Как сделать Bootstrap 4 Carousel отзывчивым для мобильного просмотра? [Дубликат]

Question

Как сделать Bootstrap 4 Carousel отзывчивым для мобильного просмотра? [Дубликат]

Лучший способ сохранить эту информацию, например, в структуре:

typedef struct {
     int *array;
     int elements;
} list_s;

Реализовать все необходимые функции, такие как создание, уничтожение, проверка равенства и все остальное, что вам нужно. Это легче передать в качестве параметра.

79

bootstrap-4

задан Themes.guide 10 February 2018 в 11:09

13 ответов

Try this code


 <div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">

            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend1.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend2.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend3.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend1.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend2.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend3.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev"> <i class="fa fa-angle-left"></i> </a>
    <a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next"> <i class="fa fa-angle-right"></i> </a>
</div>

0

ответ дан Ajay Barot 16 August 2018 в 05:09

    $('#carousel-example-generic').on('slid.bs.carousel', function () {
        $(".item.active:nth-child(" + ($(".carousel-inner .item").length -1) + ") + .item").insertBefore($(".item:first-child"));
        $(".item.active:last-child").insertBefore($(".item:first-child"));
    });

        .item.active,
        .item.active + .item,
        .item.active + .item  + .item {
           width: 33.3%;
           display: block;
           float:left;
        }

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="max-width:800px;">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
        <img data-src="holder.js/300x200?text=1">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=2">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=3">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=4">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=5">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=6">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=7">
    </div>    
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.1/holder.min.js"></script>

2

ответ дан Bass Jobsen 16 August 2018 в 05:09

<!--css code--> 
    .carousel-showsixmoveone .carousel-control {
          width: 4%;
          background-image: none;
        }
        .carousel-showsixmoveone .carousel-control.left {
          margin-left: 15px;
        }
        .carousel-showsixmoveone .carousel-control.right {
          margin-right: 15px;
        }
        .carousel-showsixmoveone .cloneditem-1,
        .carousel-showsixmoveone .cloneditem-2,
        .carousel-showsixmoveone .cloneditem-3,
        .carousel-showsixmoveone .cloneditem-4,
        .carousel-showsixmoveone .cloneditem-5 {
          display: none;
        }
        @media all and (min-width: 768px) {
          .carousel-showsixmoveone .carousel-inner > .active.left,
          .carousel-showsixmoveone .carousel-inner > .prev {
            left: -33.333%;
          }
          .carousel-showsixmoveone .carousel-inner > .active.right,
          .carousel-showsixmoveone .carousel-inner > .next {
            left: 33.333%;
          }
          .carousel-showsixmoveone .carousel-inner > .left,
          .carousel-showsixmoveone .carousel-inner > .prev.right,
          .carousel-showsixmoveone .carousel-inner > .active {
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner .cloneditem-1,
          .carousel-showsixmoveone .carousel-inner .cloneditem-2 {
            display: block;
          }
        }
        @media all and (min-width: 768px) and (transform-3d),
        all and (min-width: 768px) and (-webkit-transform-3d) {
          .carousel-showsixmoveone .carousel-inner > .item.active.right,
          .carousel-showsixmoveone .carousel-inner > .item.next {
            -webkit-transform: translate3d(33.333%, 0, 0);
            transform: translate3d(33.333%, 0, 0);
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner > .item.active.left,
          .carousel-showsixmoveone .carousel-inner > .item.prev {
            -webkit-transform: translate3d(-33.333%, 0, 0);
            transform: translate3d(-33.333%, 0, 0);
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner > .item.left,
          .carousel-showsixmoveone .carousel-inner > .item.prev.right,
          .carousel-showsixmoveone .carousel-inner > .item.active {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            left: 0;
          }
        }
        @media all and (min-width: 992px) {
          .carousel-showsixmoveone .carousel-inner > .active.left,
          .carousel-showsixmoveone .carousel-inner > .prev {
            left: -16.666%;
          }
          .carousel-showsixmoveone .carousel-inner > .active.right,
          .carousel-showsixmoveone .carousel-inner > .next {
            left: 16.666%;
          }
          .carousel-showsixmoveone .carousel-inner > .left,
          .carousel-showsixmoveone .carousel-inner > .prev.right,
          .carousel-showsixmoveone .carousel-inner > .active {
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner .cloneditem-3,
          .carousel-showsixmoveone .carousel-inner .cloneditem-4,
          .carousel-showsixmoveone .carousel-inner .cloneditem-5 {
            display: block;
          }
        }
        @media all and (min-width: 992px) and (transform-3d),
        all and (min-width: 992px) and (-webkit-transform-3d) {
          .carousel-showsixmoveone .carousel-inner > .item.active.right,
          .carousel-showsixmoveone .carousel-inner > .item.next {
            -webkit-transform: translate3d(16.666%, 0, 0);
            transform: translate3d(16.666%, 0, 0);
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner > .item.active.left,
          .carousel-showsixmoveone .carousel-inner > .item.prev {
            -webkit-transform: translate3d(-16.666%, 0, 0);
            transform: translate3d(-16.666%, 0, 0);
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner > .item.left,
          .carousel-showsixmoveone .carousel-inner > .item.prev.right,
          .carousel-showsixmoveone .carousel-inner > .item.active {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            left: 0;
          }
        }

<!-- begin snippet: js hide: false console: true -->

<!--html-->
<div class="row ">
  <div class="col-md-12">
    <div class="carousel carousel-showsixmoveone slide" id="chocolatelist" data-interval="30000">
      <div class="carousel-inner">
        <div class="item active">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#chocolatelist" data-slide="prev"><i class="glyphicon glyphicon-chevron-left "></i></a>
      <a class="right carousel-control" href="#chocolatelist" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>
</div>

вставьте этот код, вы получите некоторую подсказку. ссылка на изображение карусельного слайда

0

ответ дан Ganesh Sundaram 16 August 2018 в 05:09

Вы можете добавить несколько тегов li в ol, у которых есть атрибут как класс со значением «индикаторы карусели», а с данными-слайдами - последовательные значения от 0 до 6 или от 0 до 9.

, чем вам просто нужно скопировать и вставить div, который имеет атрибут как класс со значением «item».

Это работает для меня.

<div data-ride="carousel" class="carousel slide" id="myCarousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li class="" data-slide-to="0" data-target="#myCarousel"></li>
        <li data-slide-to="1" data-target="#myCarousel" class=""></li>
        <li data-slide-to="2" data-target="#myCarousel" class="active"></li>
        <li data-slide-to="3" data-target="#myCarousel" class=""></li>
        <li data-slide-to="4" data-target="#myCarousel" class=""></li>
        <li data-slide-to="5" data-target="#myCarousel" class=""></li>
        <li data-slide-to="6" data-target="#myCarousel" class=""></li>
    </ol>
    <div role="listbox" class="carousel-inner">
        <div class="item active">
            <img alt="First slide" src="images/carousel/11.jpg"
                class="first-slide">
        </div>
        <div class="item">
            <img alt="Second slide" src="images/carousel/22.jpg"
                class="second-slide">
        </div>
        <div class="item">
            <img alt="Third slide" src="images/carousel/33.jpg"
                class="third-slide">
        </div>
        <div class="item">
            <img alt="Third slide" src="images/carousel/44.jpeg"
                class="fourth-slide">
        </div>
        <div class="item">
            <img alt="Third slide" src="images/carousel/55.jpg"
                class="third-slide">
        </div>
        <div class="item">
            <img alt="Third slide" src="images/carousel/66.jpg"
                class="third-slide">
        </div>
        <div class="item">
            <img alt="Third slide" src="images/carousel/77.jpg"
                class="third-slide">
        </div>
    </div>
    <a data-slide="prev" role="button" href="#myCarousel"
        class="left carousel-control"> <span aria-hidden="true"
        class="glyphicon glyphicon-chevron-left"></span> <span
        class="sr-only">Previous</span>
    </a> <a data-slide="next" role="button" href="#myCarousel"
        class="right carousel-control"> <span aria-hidden="true"
        class="glyphicon glyphicon-chevron-right"></span> <span
        class="sr-only">Next</span>
    </a>
</div>

-1

ответ дан Hemant_R_D 16 August 2018 в 05:09

1

можете ли вы показать нам bootply ?? это не работает, и я не понимаю, что вы хотите здесь сделать? – azerafati 17 July 2015 в 03:22

Я видел ваши вопросы и ответы, а также создал новую гибкую и гибкую мультирумную карусель Gist. вы можете увидеть это здесь:

https://gist.github.com/IVIR3zaM/d143a361e61459146ae7c68ce86b066e

0

ответ дан IVIR3zaM 16 August 2018 в 05:09

Самый популярный ответ прав, но я думаю, что код бесполезен. С таким же css этот код jquery легче понять, я считаю:

$('#myCarousel').carousel({
  interval: 10000
})

$('.carousel .item').each(function() {
  var item = $(this);
  item.siblings().each(function(index) {
    if (index < 4) {
      $(this).children(':first-child').clone().appendTo(item);
    }
  });
});

3

ответ дан Luke Skywalker 16 August 2018 в 05:09

1

Это работает для меня, хотя я чувствую, что разные элементы расположены вертикально, а не горизонтально, а анимация по-прежнему работает горизонтально – don giulio 4 March 2016 в 12:01

Это то, что сработало для меня. Очень простой jQuery и CSS, чтобы сделать отзывчивые карусели независимо от каруселей на одной странице. Высоко настраиваемый, но в основном div с белым пространством nowrap, содержащий кучу встроенных элементов блока и ставит последний в начале, чтобы вернуться назад или первый в конец, чтобы двигаться вперед. Спасибо insertAfter!

$('.carosel-control-right').click(function() {
  $(this).blur();
  $(this).parent().find('.carosel-item').first().insertAfter($(this).parent().find('.carosel-item').last());
});
$('.carosel-control-left').click(function() {
  $(this).blur();
  $(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first());
});

@media (max-width: 300px) {
  .carosel-item {
    width: 100%;
  }
}
@media (min-width: 300px) {
  .carosel-item {
    width: 50%;
  }
}
@media (min-width: 500px) {
  .carosel-item {
    width: 33.333%;
  }
}
@media (min-width: 768px) {
  .carosel-item {
    width: 25%;
  }
}
.carosel {
  position: relative;
  background-color: #000;
}
.carosel-inner {
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
}
.carosel-item {
  display: inline-block;
}
.carosel-control {
  position: absolute;
  top: 50%;
  padding: 15px;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5);
  transform: translateY(-50%);
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.5);
  font-size: 30px;
  display: inline-block;
}
.carosel-control-left {
  left: 15px;
}
.carosel-control-right {
  right: 15px;
}
.carosel-control:active,
.carosel-control:hover {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carosel" id="carosel1">
  <a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
  <div class="carosel-inner">
    <img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&amp;text=1" />
    <img class="carosel-item" src="http://placehold.it/500/CCCCCC&amp;text=2" />
    <img class="carosel-item" src="http://placehold.it/500/eeeeee&amp;text=3" />
    <img class="carosel-item" src="http://placehold.it/500/f4f4f4&amp;text=4" />
    <img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&amp;text=5" />
    <img class="carosel-item" src="http://placehold.it/500/f477f4/fff&amp;text=6" />
  </div>
  <a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>
<div class="carosel" id="carosel2">
  <a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
  <div class="carosel-inner">
    <img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&amp;text=1" />
    <img class="carosel-item" src="http://placehold.it/500/CCCCCC&amp;text=2" />
    <img class="carosel-item" src="http://placehold.it/500/eeeeee&amp;text=3" />
    <img class="carosel-item" src="http://placehold.it/500/f4f4f4&amp;text=4" />
    <img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&amp;text=5" />
    <img class="carosel-item" src="http://placehold.it/500/f477f4/fff&amp;text=6" />
  </div>
  <a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>

5

ответ дан Mogsdad 16 August 2018 в 05:09

1

Сэкономил 1 час ... – w3debugger 9 March 2016 в 00:47

Этот является загрузочным загрузочным твиттером 3.

Вот javascript:

$('#myCarousel').carousel({
    interval: 10000
})

$('.carousel .item').each(function(){
    var next = $(this).next();

    if (!next.length) {
        next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length>0) {
        next.next().children(':first-child').clone().appendTo($(this));
    }
    else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});

И css:

.carousel-inner .active.left  { left: -33%;             }
.carousel-inner .active.right { left: 33%;              }
.carousel-inner .next         { left: 33%               }
.carousel-inner .prev         { left: -33%              }
.carousel-control.left        { background-image: none; }
.carousel-control.right       { background-image: none; }
.carousel-inner .item         { background: white;      }

Вы можете увидеть это в действии на этом Jsfiddle

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

19

ответ дан paulalexandru 16 August 2018 в 05:09

1

спасибо за совместное использование ... я вижу некоторые мерцания в firefox, однако. – Elon Zito 5 March 2015 в 07:20
2

@paulalexandru Как увеличить количество изображений в видимой строке? – jack wolier 8 May 2015 в 10:19
3

Хорошо, если у вас есть 4 элемента в вашем css, вы должны изменить 33% с 25%, и вы также должны внести небольшое изменение в javascript. Если вам не удастся это решить, отправьте вопрос, и я опубликую полный ответ. – paulalexandru 8 May 2015 в 11:23
4

Это отличное решение! Благодаря! – raiderrobert 5 June 2015 в 14:43
5

существует ли динамическое решение переменной "x" количество изображений (не только 3, 33%)? – Serge 27 January 2016 в 15:00

попробуйте это ..... он работает в моем .... код:

<div class="container">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <div class="span4" style="padding-left: 18px;">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                </div>
            </div>
            <div class="item">
                 <div class="span4" style="padding-left: 18px;">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                </div>
            </div>
        </div>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

2

ответ дан Sergej 16 August 2018 в 05:09

1

спасибо, хорошая идея :) – Hett 9 January 2016 в 18:43

Обновление 2018

Bootstrap 4

Карусель изменилась в 4.x, а переходы с несколькими слайдами анимации могут быть переопределены следующим образом ...

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(33.33%);
}

.carousel-inner .carousel-item-left.active, 
.carousel-inner .carousel-item-prev {
  transform: translateX(-33.33%)
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{ 
  transform: translateX(0);
}

Bootstrap 4 Alpha.6 Demo Bootstrap 4.0.0 (показать 4, вперед 1 за раз) Bootstrap 4.1.0 (продвигать все 4 сразу)

Еще один вариант - отзывчивая карусель, которая показывает только и продвигается 1 слайд на меньших экранах. Вместо клонирования слайдов, как в предыдущем примере, этот настраивает CSS и использует jQuery только для перемещения дополнительных слайдов для обеспечения непрерывного циклирования (обтекание):

Не просто копировать и вставлять этот код. Во-первых, поймите, как это работает.

Bootstrap 4 Отзывчивый (показ 3, 1 слайд на мобильном телефоне)

@media (min-width: 768px) {

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }

    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }

    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

<div class="container-fluid">
    <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
        <div class="carousel-inner row w-100 mx-auto" role="listbox">
            <div class="carousel-item col-md-4 active">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <i class="fa fa-chevron-left fa-lg text-muted"></i>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            <i class="fa fa-chevron-right fa-lg text-muted"></i>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Пример - Bootstrap 4 Отзывчивый (показ 4, 1 слайд на мобильном телефоне)

Загрузочный файл 3

Вот пример 3.x в Bootply: http: // bootply.com/89193

Вам нужно поместить целую строку изображений в элемент активным. Вот еще одна версия, которая не складывает изображения при меньших ширинах экрана: http://bootply.com/92514

EDIT Альтернативный подход для продвижения по одному слайду за раз:

Используйте jQuery для клонирования следующих элементов.

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  }
  else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

И затем CSS для размещения соответственно ...

До 3.3.1

.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }

После 3.3.1

.carousel-inner .item.left.active {
  transform: translateX(-33%);
}
.carousel-inner .item.right.active {
  transform: translateX(33%);
}

.carousel-inner .item.next {
  transform: translateX(33%)
}
.carousel-inner .item.prev {
  transform: translateX(-33%)
}

.carousel-inner .item.right,
.carousel-inner .item.left { 
  transform: translateX(0);
}

Это покажет 3, но будет показывать только по одному:

Bootstrap 3.x Demo

Пожалуйста, не копируйте и не вставляйте этот код. Во-первых, поймите, как это работает. Этот ответ здесь, чтобы поможет вам узнать .

Удвоение этой модифицированной бутстрапа 4 карусели работает только наполовину (цикл прокрутки перестает работать) как сделать 2 загрузочных слайдера на одной странице без смешивания их css и jquery?

95

ответ дан Themes.guide 16 August 2018 в 05:09

1

Благодарю. Это выглядит намного лучше ... но немного странно. прокрутка влево, похоже, не работает, поскольку она прокручивает несколько блоков за раз, и порядок кажется выключенным. Прокрутка вправо работает нормально (хотя и в неправильном направлении). Проблема, с которой я сталкиваюсь, заключается в том, что создается много дубликатов, что не так уж плохо ... но не так хорошо ... поэтому для каждого элемента, который у меня есть (6 в вашем случае), этот скрипт создает N дубликатов (где N = блоки, показанные на кадр). – rodrigo-silveira 15 November 2013 в 23:12
2

@ Zentaurus, я знаю, что поздно, но проверьте пример четырех элементов . Я адаптировал логику Скелли для вопроса SOpt . – Anthony Accioly 23 July 2014 в 02:09
3

@AnthonyAccioly Спасибо за пример! – Zentaurus 24 July 2014 в 07:13
4

Это больше не работает на 3.3.4.1 – Jorge Sampayo 10 June 2015 в 17:44
5

Нашел, почему он не работает на & gt; 3.3.0 это связано с включением translate3D, проверить ответы Даниэля и Михала Врхоты на: stackoverflow.com/questions/18613271/… – Jorge Sampayo 10 June 2015 в 18:00

У меня была та же проблема, и описанные здесь решения работали хорошо. Но я хотел поддержать изменения размера окна (и макета). В результате получается небольшая библиотека, которая решает все вычисления. Проверьте это здесь: https://github.com/SocialbitGmbH/BootstrapCarouselPageMerger

Чтобы заставить скрипт работать, вам нужно добавить новую обертку <div> с классом .item-content прямо в ваш .item <div>. Пример:

<div class="carousel slide multiple" id="very-cool-carousel" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <div class="item-content">
                First page
            </div>
        </div>
        <div class="item active">
            <div class="item-content">
                Second page
            </div>
        </div>
    </div>
</div>

Использование этой библиотеки:

socialbitBootstrapCarouselPageMerger.run('div.carousel');

Чтобы изменить настройки:

socialbitBootstrapCarouselPageMerger.settings.spaceCalculationFactor = 0.82;

Пример:

Как вы можете видеть, карусель обновляется, чтобы отображать больше элементов управления при изменении размера окна. Проверьте настройку watchWindowSizeTimeout, чтобы контролировать время ожидания реагирования на изменения размера окна.

[/g1]

0

ответ дан Thomas Kekeisen 16 August 2018 в 05:09

Все вышеперечисленные решения являются взломанными и багги. Даже не пытайтесь. Используйте другие библиотеки. Лучшее, что я нашел - http://sachinchoolur.github.io/lightslider Отлично работает с загрузкой, не добавляет junk html, высоко настраиваемый, отзывчивый, мобильный и т. Д. ...

$('.multi-item-carousel').lightSlider({
    item: 4,
    pager: false,
    autoWidth: false,
    slideMargin: 0
});

18

ответ дан ymakux 16 August 2018 в 05:09

1

Большое спасибо, очень полезный lib :) – GuiPab 7 October 2016 в 13:35
2

Некоторые из этих слайдер-библиотек действительно затмевают то, что предлагает бутстрап, даже 4. Спасибо, что поделился. – Rexford 5 January 2018 в 12:13

Другие вопросы по тегам:

bootstrap-4

Как сделать Bootstrap 4 Carousel отзывчивым для мобильного просмотра? [Дубликат]

13 ответов

Обновление 2018

Похожие вопросы: