Twitter Bootstrap Karussell Zyklus Elemente von rechts nach links (RTL) umgekehrt

Question

Wie kann die Twitter Bootstrap Karussell Zyklus Funktion kann geändert werden, um die Elemente von rechts nach links statt von links nach rechts, so dass es in hebräisch/normal aussehen wird arabische Webseiten?

Answer 1

außer Kraft setzen Sie einfach die Zyklusfunktion mit einer ähnlichen Funktion, die i.Vj. statt nächsten ruft:

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

Verwendung

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

statt

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

in Bootstrap 3

Answer 3

Ich habe eine andere Sache, zu faul war (für mich zu ausführlich), um Ihre Lösung zu bleiben:

Meine Einstellungen: ASP.NET MVC, Kultureinstellungen: Hebräisch. Meine Karussell-Instanz befindet sich unter einem div namens "divTopNewsSlider". ".slideshow-prev" und ".slideshow-next" sind die Selektoren für meine vorherigen und nächsten Symbole.

Lösung vor:

1. die Kultur des Benutzers ermitteln (I für ein Content Management System zu entwickeln, also muß ich die Kultureinstellungen vom Server bekommen).

2. es über die Schwimmerrichtung der Karussell li Elemente bestimmen.

3. Ändern Sie die Funktionen near und prev des Karussell-Reglers jeweils umgekehrt.

In Razor:

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

In 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

Wie die Bootstrap-Karussell von CSS umkehren

ich nur eine Lösung von CSS haben. Keine neuen Skripte. Keine Änderung des HTML.

1. Machen Sie die Bilder breit und ansprechend.
2. Ändern Sie die Reihenfolge der Indikatoren. Bringe sie zurück in die Mitte der Folie.
3. Ändern Sie die Richtung des Übergangs.

Bitte überprüfen Sie das Ergebnis:

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

Für RTL Sprachen wie Persisch, Arabisch und Hebräisch

In der bootstrap.js Datei finden & Änderung dieser Zeilen:

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

zu:

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

auch

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

zu:

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