Twitter Бутстрап Элементы цикла карусели справа налево (RTL) отменено

Question

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

Answer 1

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

$(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(); 
    }); 
}); 

Answer 2

использование

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

вместо

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

в загрузчике 3

Answer 3

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

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

шаги Решение:

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

2. Используйте его, чтобы определить направление поплавка элементов карусели li.

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

В Razor:

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

Answer 4

Как отменить карусель 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>

Answer 5

Для 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') 
}