Карусель завантажувальної програми декілька кадрів одночасно


110

Такого ефекту я намагаюся досягти за допомогою каруселі Bootstrap 3

введіть тут опис зображення

Замість того, щоб показувати один кадр одночасно, він відображає N кадру, котрі просуваються поруч. Потім, коли ви слайд (або коли він автоматично ковзає), він зміщує групу слайдів, як це робиться.

Це можна зробити за допомогою каруселі bootstrap 3? Я сподіваюся, що мені не доведеться їхати на полювання на ще один плагін jQuery ...


Вибачте вже адаптований Bootstrap 4, але легко змінити stackoverflow.com/a/42098033/4796923
Олег V Карун

Існує нове рішення цієї проблеми за допомогою гладкої каруселі Кена Уілера, яка простіша у виконанні та більш елегантна, ніж ці. Будь ласка вид @joshmoto відповідь з повним кодом тут> stackoverflow.com/a/54263516/345605
Ganar

Відповіді:


20

Це можна зробити за допомогою каруселі bootstrap 3? Я сподіваюся, що мені не доведеться їхати на полювання на ще один плагін jQuery

Станом на 12.12.2013 відповідь - ні. Ефект, який ви шукаєте, неможливий за допомогою загального плагіну каруселі Bootstrap 3. Однак ось простий плагін jQuery, який, здається, робить саме те, що ви хочете http://sorgalla.com/jcarousel/


147

Оновлено 2019 рік ...

Завантаження 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 (покажіть 3, заздалегідь 1 за один раз)
Bootstrap 4.1.0 (просуньте всі 4 одночасно)
Bootstrap 4.3.1 чуйний (показати кілька, заздалегідь 1) new
Карусель завантажувальної програми 4.3.1 з картамиnew


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

Будь ласка, не просто копіюйте та вставляйте цей код. Спочатку зрозумійте, як це працює.

Bootstrap 4 Respovable (показати 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 Respovable (показати 4, 1 слайд на мобільному пристрої)
Приклад - Bootstrap 4 Respovable (показати 5, 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 одночасно, але лише один за іншим :

Демонстрація завантажувача 3.x


Будь ласка, не копіюйте та не вставляйте цей код. Спочатку зрозумійте, як це працює. Ця відповідь тут, щоб допомогти вам навчитися .

Подвоєння цієї модифікованої каруселі завантажувача 4 функціонує лише наполовину правильно (цикл прокрутки перестає працювати),
як зробити 2 повзунки завантажувальної машини на одній сторінці, не змішуючи їх css та jquery?
Мульти-карусель Bootstrap 4 показує 4 зображення замість 3


6
Дякую. Це виглядає набагато краще ... але відчуває себе трохи дивно. прокрутка ліворуч, здається, не працює, оскільки прокручує кілька блоків одночасно, і порядок видається вимкненим. Прокрутка праворуч працює добре (хоча і в неправильному напрямку). Проблема, яка у мене виникає з цим, полягає в тому, що, здається, створюється багато дублікатів, що не так вже й погано ... але не так добре ... тому для кожного елемента, який у мене є (6 у вашому випадку), цей сценарій створює N дублікатів (де N = блоки показані на кадр).
rodrigo-silveira

5
@ Zentaurus, я знаю, що вже пізно, але ознайомтеся з прикладом чотирьох елементів . Я адаптував логіку Skelly для швидкого запитання .
Ентоні Аксіолій

3
Знайдено , чому він не працює> 3.3.0 , це пов'язано з включенням translate3D, перевірити відповіді Danijel і Міхал Vrchota на: stackoverflow.com/questions/18613271 / ...
Хорхе Сампайо

2
@Zim, що демонстрація демонструє 1 слайд. Я сподіваюсь показати 3 або 4 (стільки, скільки відповідає екрану), а потім показати 1 елемент після цього.
Молодший

1
@Junior Точно в останній версії (4.3.1) єдине, що працювало для мене, - це коригування маржі, пояснене в іншій відповіді, наведеній тут .
Armfoot

30

Всі вищевикладені рішення є хакі і баггі. Навіть не намагайся. Використовуйте інші губки. Найкраще, що я знайшов - http://sachinchoolur.github.io/lightslider Відмінно працює з завантажувальним пристроєм, не додає html-файли, не можна налаштувати, чуйний, мобільний та інше ...

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

Велике спасибі, дуже корисна
ліб

Деякі з цих бібліотек слайдерів справді карлики, що пропонує завантажувальна програма, навіть 4. Дякую, що поділились.
Хофі

Слайдер дублює слайди. Дивіться приклад кодування соруезу повзунків на їх веб-сайті
Марінські

Це мертвий проект із занадто великою кількістю відкритих питань. (перевірити їхнього github)
Осама Рашид

20

Це робочий twitter bootstrap 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 помилки всередині них, одна з них полягала в тому, що ліва стрілка викликає дивний ефект, а друга стосується того, що текст стає жирним у деяких ситуаціях, що можна вирішити, встановивши колір фону, щоб нижній елемент не був видно під час переходу ефект.


дякую за те, що поділилися ... Однак я бачу, як мерехтить у firefox.
Елон Зіто

@paulalexandru Як я можу збільшити кількість зображень у видимому рядку?
jack wolier

Добре, якщо у вашому css є 4 елементи, ви повинні змінити 33% на 25%, і вам доведеться також трохи змінити javascript. Якщо вам не вдасться вирішити це питання, поставте питання, і я опублікую повну відповідь там.
paulalexandru

Це чудове рішення! Дякую!
raiderrobert

1
Дуже дякую. Це мені дуже допомогло. Я будую власну тему завантаження для сайту drupal 8 на основі теми Barrio. У ньому не надто багато варіантів, коли справа стосувалася налаштування каруселі. Надані вами JS та CSS працювали як магія. Мені довелося трохи змінити код, щоб відповідати моїм вимогам, але в цілому він працював фантастично. Дуже
дякую

6

Це те, що працювало для мене. Дуже прості jQuery та CSS для того, щоб карусель, що реагує, працювала незалежно від каруселей на одній сторінці. Настроюваний, але в основному дів з білим пробілом тепер, що містить купу вбудованих елементів блоку, і останній кладуть на початку, щоб рухатись назад, або перший в кінці, щоб рухатися вперед. Дякую 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>


Спасибі, крихітний гігант, чи можете ви допомогти мені зі своєю відповіддю "карусельними показниками". та функцію автоматичного слайду включати / вимикати.
MahiMan

6

Оновлення 2019-03-06 - Bootstrap v4.3.1

Здається, що нова версія Bootstrap додає а margin-right: -100%до кожного елемента, тому в адаптивному рішенні, наведеному в найбільш актуалізованій відповіді , цю властивість слід скинути, наприклад:

.carousel-inner .carousel-item {
    margin-right: inherit;
}

Робочий кодпен з v4.3.1 у МЕНШЕ .


Бог благословить вас ахаха
Альберто Белліні

1
Для тих, хто бореться з вищезгаданою найкращою обраною відповіддю, ця відповідь, зокрема посилання codepen, чудово працює за допомогою bootstrap v4.4.0. Трохи налаштувавшись, ви зможете легко працювати з 4-ма видимими слайдами або будь-чим, що вам потрібно. Дякуємо за публікацію
crdunst

3

Найпопулярніша відповідь правильна, але я вважаю, що код є марно складним. З тим же 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);
    }
  });
});

Це працює для мене, хоча я відчуваю, що різні елементи розташовані вертикально, а не горизонтально, тоді як анімація все ще працює горизонтально
Дон Джуліо

2

спробуйте це ..... це працює в шахті .... код:

<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

    $('#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>
    


0

У мене була така ж проблема, і рішення, описані тут, працювали добре. Але я хотів підтримати зміни розміру вікна (та макета). В результаті виходить невелика бібліотека, яка вирішує всі обчислення. Перевірте це тут: 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налаштуваннями, щоб контролювати час очікування реакції на зміни розміру вікна.


0
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>


-1

Ви можете додати кілька тегів li in 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
чи можете ви показати нам завантажувальний пристрій ?? це не працює, і я не отримую те, що ти хочеш тут робити ??
azerafati

-1

Посилання на вище посилання я додав 1 нову річ під назвою показати 4, пересуньте одну за одною для завантажувальної програми 3 (v3.3.7)

CODEPLY : - https://www.codeply.com/go/eWUbGlspqU

LIVE SNIPPET

(function(){
  $('#carousel123').carousel({ interval: 2000 });
}());

(function(){
  $('.carousel-showmanymoveone .item').each(function(){
    var itemToClone = $(this);

    for (var i=1;i<4;i++) {
      itemToClone = itemToClone.next();

      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = $(this).siblings(':first');
      }

      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone()
        .addClass("cloneditem-"+(i))
        .appendTo($(this));
    }
  });
}());
body {
    margin-top: 50px;
}

.carousel-showmanymoveone .carousel-control {
  width: 4%;
  background-image: none;
}
.carousel-showmanymoveone .carousel-control.left {
  margin-left: 15px;
}
.carousel-showmanymoveone .carousel-control.right {
  margin-right: 15px;
}
.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3 {
  display: none;
}
@media all and (min-width: 768px) {
  .carousel-showmanymoveone .carousel-inner > .active.left,
  .carousel-showmanymoveone .carousel-inner > .prev {
    left: -50%;
  }
  .carousel-showmanymoveone .carousel-inner > .active.right,
  .carousel-showmanymoveone .carousel-inner > .next {
    left: 50%;
  }
  .carousel-showmanymoveone .carousel-inner > .left,
  .carousel-showmanymoveone .carousel-inner > .prev.right,
  .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-1 {
    display: block;
  }
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev.right,
  .carousel-showmanymoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}
@media all and (min-width: 992px) {
  .carousel-showmanymoveone .carousel-inner > .active.left,
  .carousel-showmanymoveone .carousel-inner > .prev {
    left: -25%;
  }
  .carousel-showmanymoveone .carousel-inner > .active.right,
  .carousel-showmanymoveone .carousel-inner > .next {
    left: 25%;
  }
  .carousel-showmanymoveone .carousel-inner > .left,
  .carousel-showmanymoveone .carousel-inner > .prev.right,
  .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-2,
  .carousel-showmanymoveone .carousel-inner .cloneditem-3 {
    display: block;
  }
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(25%, 0, 0);
            transform: translate3d(25%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-25%, 0, 0);
            transform: translate3d(-25%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev.right,
  .carousel-showmanymoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="carousel carousel-showmanymoveone slide" id="carousel123">
	<div class="carousel-inner">
		<div class="item active">
			<div class="col-xs-12 col-sm-6 col-md-3"><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-6 col-md-3"><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-6 col-md-3"><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-6 col-md-3"><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-6 col-md-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive"></a></div>
		</div>
		<div class="item">
			<div class="col-xs-12 col-sm-6 col-md-3"><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-6 col-md-3"><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-6 col-md-3"><a href="#"><img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive"></a></div>
		</div>
	</div>
	<a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
	<a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.