Это тот эффект, которого я пытаюсь достичь с помощью карусели Bootstrap 3.
Вместо того, чтобы просто показывать по одному кадру за раз, он отображает N кадров подряд. Затем, когда вы скользите (или когда он скользит автоматически), он перемещает группу слайдов, как это происходит.
Можно ли это сделать с помощью карусели bootstrap 3? Надеюсь, мне не придется искать очередной плагин jQuery ...
Можно ли это сделать с помощью карусели bootstrap 3? Надеюсь, мне не придется искать еще один плагин jQuery
По состоянию на 08.12.2013 ответ отрицательный. Эффект, который вы ищете, невозможен при использовании универсального плагина карусели Bootstrap 3. Однако вот простой плагин jQuery, который, кажется, делает именно то, что вы хотите http://sorgalla.com/jcarousel/
Все вышеперечисленные решения хакерские и содержат ошибки. Даже не пытайся. Используйте другие библиотеки. Лучшее, что я нашел - http://sachinchoolur.github.io/lightslider Отлично работает с бутстрапом, не добавляет ненужный html, легко настраиваемый, отзывчивый, удобный для мобильных устройств и т. д.
$('.multi-item-carousel').lightSlider({
item: 4,
pager: false,
autoWidth: false,
slideMargin: 0
});
Это рабочий бутстрап для твиттера 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 ошибки, одна из них заключалась в том, что стрелка влево создавала странный эффект, а другая касалась выделения текста жирным шрифтом в некоторых ситуациях, который можно решить, установив цвет фона, чтобы нижний элемент не был виден во время перехода эффект.
Кажется, что новая версия Bootstrap добавляет margin-right: -100% к каждому элементу, поэтому в адаптивном решении, приведенном в ответе, получившем наибольшее количество голосов здесь , это свойство следует сбросить, например:
.carousel-inner .carousel-item {
margin-right: inherit;
}
Рабочий codepen с v4.3.1 в LESS.
Это то, что у меня сработало. Очень простой 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&text=1" />
<img class="carosel-item" src="http://placehold.it/500/CCCCCC&text=2" />
<img class="carosel-item" src="http://placehold.it/500/eeeeee&text=3" />
<img class="carosel-item" src="http://placehold.it/500/f4f4f4&text=4" />
<img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&text=5" />
<img class="carosel-item" src="http://placehold.it/500/f477f4/fff&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&text=1" />
<img class="carosel-item" src="http://placehold.it/500/CCCCCC&text=2" />
<img class="carosel-item" src="http://placehold.it/500/eeeeee&text=3" />
<img class="carosel-item" src="http://placehold.it/500/f4f4f4&text=4" />
<img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&text=5" />
<img class="carosel-item" src="http://placehold.it/500/f477f4/fff&text=6" />
</div>
<a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>Самый популярный ответ правильный, но я считаю, что код бесполезно сложен. Я считаю, что с тем же 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);
}
});
});
попробуйте это ..... он работает в моем .... code:
<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>
У меня была та же проблема, и описанные здесь решения работали хорошо. Но я хотел поддержать изменение размера окна (и макета). В результате получилась небольшая библиотека, которая решает все вычисления. Проверьте это здесь: 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 для управления таймаутом реакции на изменение размера окна.
Я видел ваши вопросы и ответы и создал новую адаптивную и гибкую многоэлементную карусель Gist. Вы можете видеть это здесь:
https://gist.github.com/IVIR3zaM/d143a361e61459146ae7c68ce86b066e
Вы можете добавить несколько тегов li в ol, у которых есть атрибут как класс со значением «carousel-sizes», а с data-slide-to - последовательные значения, такие как от 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 новую вещь под названием показывать по 4, сдвигать по одному для начальной загрузки 3 (v3.3.7)
CODEPLY: - https://www.codeply.com/go/eWUbGlspqU < / а>
ЖИВЫЙ СНИПЕТ
(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/&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/&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&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&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/&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/&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&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&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>.carousel-inner .active.right { left: 33%; }.
- person Anthony Accioly; 23.07.2014
