Блог

Главная - Вопросы по программированию - Горизонтальная прокрутка в разделе миниатюр модальной галереи изображений теперь работает

Горизонтальная прокрутка в разделе миниатюр модальной галереи изображений теперь работает

#html #css #modal-dialog #horizontal-scrolling

Вопрос:

Я использую Модальное поле для отображения некоторых изображений с подписью и разделом миниатюр ниже.

Проблема, с которой я сталкиваюсь, заключается в том, что раздел миниатюр отлично работает для 6 или менее 6 изображений, мне приходится уменьшать размер миниатюр, если изображений больше. Прямо сейчас у меня их 10.

Что я хочу сделать, так это создать раздел миниатюр с возможностью горизонтальной прокрутки. Это может решить все мои проблемы. Я пробовал в Интернете, но, похоже, у меня ничего не вышло.

Часть Моего кода :

  <div class="row1">
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-sudo-0.png" style="width:100%" onclick="currentSlide(1)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-sudo-1.png" style="width:100%" onclick="currentSlide(2)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-yoga-0.png" style="width:100%" onclick="currentSlide(3)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-yoga-1.png" style="width:100%" onclick="currentSlide(4)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-yoga-2.png" style="width:100%" onclick="currentSlide(5)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-yoga-3.png" style="width:100%" onclick="currentSlide(6)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-yoga-4.png" style="width:100%" onclick="currentSlide(7)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-yoga-5.png" style="width:100%" onclick="currentSlide(8)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-bike-0.png" style="width:100%" onclick="currentSlide(9)">
 </div>
 <div class="column">
     <img class="demo cursor" src="assets/images/achievements/achi-bike-1.png" style="width:100%" onclick="currentSlide(10)">
 </div>

Решение, которое я нашел в Интернете, состояло в том, чтобы добавить это в мой CSS:

 .row1 {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
.column {
    display: inline-block;
    width: 16.66%;
}

Это не работает, но, безусловно, что-то делает. Когда я использую элементы проверки, это показывает мне, что столбец есть, но я просто его не вижу. Я прикрепил скриншот ниже.

Невидимое Разделение

На всякий случай я прилагаю весь свой Модальный код:

  <div id="myModal" class="modal" onkeypress="closeModal()">

 <!-- Modal content -->
 <span class="close cursor" onclick="closeModal()">amp;times;</span>
 <div class="modal-content">

     <div class="mySlides">
         <div class="numbertext">1 / 10</div>
         <img src="assets/images/achievements/achi-sudo-0.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">2 / 10</div>
         <img src="assets/images/achievements/achi-sudo-1.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">3 / 10</div>
         <img src="assets/images/achievements/achi-yoga-0.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">4 / 10</div>
         <img src="assets/images/achievements/achi-yoga-1.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">5 / 10</div>
         <img src="assets/images/achievements/achi-yoga-2.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">6 / 10</div>
         <img src="assets/images/achievements/achi-yoga-3.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">7 / 10</div>
         <img src="assets/images/achievements/achi-yoga-4.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">8 / 10</div>
         <img src="assets/images/achievements/achi-yoga-5.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">9 / 10</div>
         <img src="assets/images/achievements/achi-bike-0.png" style="width:100%" alt="Achievements">
     </div>

     <div class="mySlides">
         <div class="numbertext">10 / 10</div>
         <img src="assets/images/achievements/achi-bike-1.png" style="width:100%" alt="Achievements">
     </div>

     <!-- Next and previous buttons -->
     <a class="prev" onclick="plusSlides(-1)">amp;#10094;</a>
     <a class="next" onclick="plusSlides(1)">amp;#10095;</a>

     <!-- Image text -->
     <div class="caption-container">
         <p id="caption"></p>
     </div>

     <!-- Thumbnail images -->
     <div class="row1">
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-sudo-0.png" style="width:100%" onclick="currentSlide(1)" alt="Test">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-sudo-1.png" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-yoga-0.png" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-yoga-1.png" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-yoga-2.png" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-yoga-3.png" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-yoga-4.png" style="width:100%" onclick="currentSlide(7)" alt="Snowy Mountains">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-yoga-5.png" style="width:100%" onclick="currentSlide(8)" alt="Snowy Mountains">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-bike-0.png" style="width:100%" onclick="currentSlide(9)" alt="Snowy Mountains">
         </div>
         <div class="column">
             <img class="demo cursor" src="assets/images/achievements/achi-bike-1.png" style="width:100%" onclick="currentSlide(10)" alt="Snowy Mountains">
         </div>
     </div>

 </div>

Весь модальный CSS:

   /* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.8);
}

/* Modal Content */
.modal-content {
    margin: auto;
    display: block;
    background-color: #f2f2f2;
    border: none;
    width: 100%;
    height: 100%;
    max-width: 1000px;
    max-height: 70px;
}

/* The Close Button */
.close {
    color: white !important;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 30px !important;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #999 !important;
    text-decoration: none;
    cursor: pointer;
}


mySlides {
    display: none;
}

.cursor {
    cursor: pointer;
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    /*    padding-right: 25px;*/
    margin-top: -30px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 10px 10px 0;
    user-select: none;
    -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 10px 0 0 10px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    color: #f2f2f2;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* Container for image text */
.caption-container {
    text-align: center;
    background-color: #f2f2f2;
    padding: 2px 16px;
    color: #333;
}

.row1 {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.column {
    display: inline-block;
    width: 16.66%;
}

Спасибо за вашу помощь!

Ответ №1:

Я понял. Проблема была с элементом контейнера. Атрибут «максимальная высота» создавал проблему. Я только что изменил это :

 .modal-content {
    margin: auto;
    display: block;
    background-color: #f2f2f2;
    border: none;
    width: 100%;
    height: 100%;
    max-width: 1000px;
    max-height: max-content;  //THIS
}
Метки: