Галерея миниатюр начальной загрузки - перемещение col-md-3 из одной позиции в другую - PullRequest
0 голосов
/ 16 января 2019

У меня есть div с классом контейнера, и в этом div у меня есть 4 столбца

<div class="container">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
</div>

и 2 отдельные стрелки для левой и правой

just like this

На изображении крайний правый элемент div не показан, но когда я нажимаю левую кнопку, я бы хотел, чтобы все элементы div переместили один элемент влево (удаленный крайний правый элемент), а когда я нажимаю правую кнопку, мне хотелось бы все элементы div для перемещения на одну точку вправо, кроме крайнего правого элемента div, который будет отображаться как первый элемент div справа. Может быть больше 4 дел.

Можно использовать CSS и / или JQuery

У меня есть этот кусочек кода, который перемещает 3 столбца вместе

        <div class="container">

            <div id="imageCarousel" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#imageCarousel" data-slide-to="1"></li>
                <li data-target="#imageCarousel" data-slide-to="2"></li>
              </ol>
             <div class="carousel-inner">
               <div class="item active">
                 <div class="row">
                   <div class="col-md-4">
                     <img src="https://1.bp.blogspot.com/-E8GdZQshD7I/WI1-yGMXseI/AAAAAAAACfs/ZndWplkyLpgVPO5IQ294pjxr9rq8YtqcwCLcB/s640/boot1.png" class="img-responsive" />
                   </div>
                   <div class="col-md-4">
                     <img src="https://2.bp.blogspot.com/-hmUAa7DH5N4/WI2KJqMdhrI/AAAAAAAACf8/huv-RB55G_QpCI-9G-iA0JrS1pqCswEogCLcB/s640/boot2.png" class="img-responsive" />
                   </div>
                   <div class="col-md-4">
                     <img src="https://2.bp.blogspot.com/-ZWboxYj_gz0/WInKMMQA_HI/AAAAAAAACe4/4ihHdvifuKYJNQElLULtivsCne9ZDbM3ACLcB/s640/di.png" class="img-responsive" />
                   </div>
                 </div>
               </div>
               <div class="item">
                 <div class="row">
                   <div class="col-md-4">
                     <img src="https://2.bp.blogspot.com/-hmUAa7DH5N4/WI2KJqMdhrI/AAAAAAAACf8/huv-RB55G_QpCI-9G-iA0JrS1pqCswEogCLcB/s640/boot2.png" class="img-responsive" />
                   </div>
                   <div class="col-md-4">
                     <img src="https://2.bp.blogspot.com/-ZWboxYj_gz0/WInKMMQA_HI/AAAAAAAACe4/4ihHdvifuKYJNQElLULtivsCne9ZDbM3ACLcB/s640/di.png" class="img-responsive" />
                   </div>
                   <div class="col-md-4">
                     <img src="https://1.bp.blogspot.com/-E8GdZQshD7I/WI1-yGMXseI/AAAAAAAACfs/ZndWplkyLpgVPO5IQ294pjxr9rq8YtqcwCLcB/s640/boot1.png" class="img-responsive" />
                   </div>
                 </div>
               </div>
               <div class="item">
                 <div class="row">
                   <div class="col-md-4">
                     <img src="https://1.bp.blogspot.com/-E8GdZQshD7I/WI1-yGMXseI/AAAAAAAACfs/ZndWplkyLpgVPO5IQ294pjxr9rq8YtqcwCLcB/s640/boot2.png" class="img-responsive" />
                   </div>
                   <div class="col-md-4">
                     <img src="https://1.bp.blogspot.com/-E8GdZQshD7I/WI1-yGMXseI/AAAAAAAACfs/ZndWplkyLpgVPO5IQ294pjxr9rq8YtqcwCLcB/s640/boot1.png" class="img-responsive" />
                   </div>
                   <div class="col-md-4">
                     <img src="https://2.bp.blogspot.com/-ZWboxYj_gz0/WInKMMQA_HI/AAAAAAAACe4/4ihHdvifuKYJNQElLULtivsCne9ZDbM3ACLcB/s640/di.png" class="img-responsive" />
                   </div>
                 </div>
               </div>
              </div>
              <a class="left carousel-control" href="#imageCarousel" role="button" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#imageCarousel" role="button" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
             </div>

        </div>

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...