Как в стандартном слайдере Bootstrap
поставить прокрутку слайдов слева направо?
1 ответ
"Восточная карусель" с прокруткой в обратном направлении
Если добавить слайдеру атрибут data-slide="prev"
, то слайдер перейдёт на предыдущий слайд только один раз - сразу после загрузки страницы. А затем смена слайдов пойдёт в обычном направлении.
jQuery
На английском SO есть два скрипта:
- скрипт попроще прокручивает слайды в обратном направлении, но не трогает индикаторы;
- скрипт посложнее меняет и направление прокрутки, и порядок индикаторов:
$(document).ready(function () {
$('#myCarousel').each(function(){
$(this).carousel();
var carousel = $(this).data('bs.carousel'); // or .data('carousel') in bootstrap 2
carousel.pause();
// At first, reverse the order of the items in the carousel because we're moving backwards
$(this).find('> .carousel-inner > .item:not(:first-child)').each(function() {
$(this).prependTo(this.parentNode);
});
// Override the bootstrap carousel prototype function, adding a different one won't work (it'll work only for the first slide)
carousel.cycle = function (e) {
if (!e) this.paused = false
if (this.interval) clearInterval(this.interval);
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.prev, this), this.options.interval))
return this;
};
carousel.cycle();
});
});
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#myCarousel img {
height: auto;
max-width: 100%;
width: 100%;
}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="//placehold.it/900x300/c69/f9c/?text=1" alt="First slide">
</div>
<div class="item">
<img src="//placehold.it/900x300/9c6/cf9/?text=2" alt="Second slide">
</div>
<div class="item">
<img src="//placehold.it/900x300/69c/9cf/?text=3" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" 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>
CSS
Сделал то же самое с помощью стилей, без скриптов и перестановок в HTML.
- растягиваем слайды на всю ширину контейнера;
- меняем порядок индикаторов с помощью
float: right;
и заново выравниваем их по центру слайда; - меняем анимацию при смене слайдов.
Проверьте, пожалуйста:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* 1 */
#myCarousel img {
height: auto;
max-width: 100%;
width: 100%;
}
/* 2 */
.carousel-indicators {
width: auto;
margin-left: 0;
transform: translateX(-50%);
}
.carousel-indicators li {
float: right;
margin: 1px 4px;
}
.carousel-indicators .active {
margin: 0 3px;
}
/* 3 */
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="//placehold.it/900x300/c69/f9c/?text=1" alt="First slide">
</div>
<div class="item">
<img src="//placehold.it/900x300/9c6/cf9/?text=2" alt="Second slide">
</div>
<div class="item">
<img src="//placehold.it/900x300/69c/9cf/?text=3" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" 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>