Твиттер Bootstrap Carousel cycle items справа налево (RTL) обратный

Как может Twitter Bootstrap Карусель функция может быть изменена на цикл элементов справа налево, а не слева направо, чтобы она выглядела нормально на иврите/арабских сайтах?

6
carousel hebrew jquery right-to-left twitter-bootstrap

5 ответов

просто переопределите функцию цикла аналогичной функцией, которая вызывает prev вместо далее:

$(document).ready(function () {
    $('.carousel').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();
    });
});
8

Как отменить Карусель Bootstrap с помощью CSS

у меня есть решение только CSS. Никаких новых сценариев. Никаких изменений HTML.

  1. сделайте изображения широкими и отзывчивыми.
  2. изменить порядок индикаторов. Верните их в центр слайда.
  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>
3

для RTL языков, таких как персидский, арабский и иврит

в файле Bootstrap.JS файл, найти и изменить следующие строки:

var delta = direction == 'prev' ? -1 : 1

в:

var delta = direction == 'prev' ? 1 : -1

и

Carousel.prototype.next = function () {
    if (this.sliding) return
    return this.slide('next')
}
Carousel.prototype.prev = function () {
    if (this.sliding) return
    return this.slide('prev')
}

в:

Carousel.prototype.next = function () {
    if (this.sliding) return
    return this.slide('prev')
}
Carousel.prototype.prev = function () {
    if (this.sliding) return
    return this.slide('next')
}
1

Я сделал другое, было слишком лениво придерживаться вашего решения (слишком многословно для меня):

Мои настройки: ASP.NET MVC, настройки культуры: иврит. Мой экземпляр карусели сидит под div с именем "divTopNewsSlider". ".слайд-шоу-prev "и".слайд-шоу-далее " - это селекторы для моих значков prev и next.

шагов решения:

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

  2. используйте его для определения направления поплавка элементов карусели li.

  3. измените функции Next и prev слайдера карусели на их обратный, соответственно.

В Бритвы: 

@functions {
    Boolean IsRTL()
    {
        return this.CultureDictionary.Language.CultureAlias.ToLower().IndexOf("he-il") > -1;
    }
}

В JavaScript: 

    <script type="text/javascript">
        var isRTL = "@IsRTL()".toLowerCase() === 'true';
        $(".slideshow .pager li").css("float", isRTL ? "right" : "left");

        $(document).ready(function () {
            if (isRTL) {
                $(".slideshow-prev").click(function () {
                    $("#divTopNewsSlider").carousel('next');
                    event.stopPropagation();
                });

                $(".slideshow-next").click(function () {
                    $("#divTopNewsSlider").carousel('prev');
                    event.stopPropagation();
                });
            }
        });

    </script>
0

использовать

var carousel = $(this).data('bs.carousel');

вместо

var carousel = $(this).data('carousel');

в bootstrap 3

-1