2

Как в стандартном слайдере Bootstrap поставить прокрутку слайдов слева направо?

1

1 ответ 1

2

"Восточная карусель" с прокруткой в обратном направлении

Если добавить слайдеру атрибут data-slide="prev", то слайдер перейдёт на предыдущий слайд только один раз - сразу после загрузки страницы. А затем смена слайдов пойдёт в обычном направлении.


jQuery

На английском SO есть два скрипта:

  1. скрипт попроще прокручивает слайды в обратном направлении, но не трогает индикаторы;
  2. скрипт посложнее меняет и направление прокрутки, и порядок индикаторов:

$(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.

  1. растягиваем слайды на всю ширину контейнера;
  2. меняем порядок индикаторов с помощью float: right; и заново выравниваем их по центру слайда;
  3. меняем анимацию при смене слайдов.

Проверьте, пожалуйста:

jsfiddle   codepen   bootply

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.