Bootstrap-Karussell: Wie auf Folie zwei Karussell Schieberegler gleichzeitig?

Habe ich drei Karussell-Schieberegler auf der single Seite und ich möchte, dass Sie sich zwei von Ihnen zur gleichen Zeit .ich.e. beides sollte sich ändern, Schieberegler Bilder in der gleichen Zeit. Beide haben die gleiche Anzahl von Bilder/Dias. Hier ist der code, den ich verwende:

jQuery('#carousel-example-generic1, #carousel-example-generic2').carousel({
    interval: 4000
});

Und auch ich habe versucht, diesen code unter:

jQuery('.carousel').carousel({
    pause:'false'
});

jQuery('#carousel-example-generic1').on('slide', function(){
    jQuery('#carousel-example-generic2').carousel('next');
});

Aber Links und rechts die Schieberegler haben eine sehr geringe Verzögerung beim Wechsel von Folien. Und diese Verzögerung geht auf die Erhöhung. Die bekannten Probleme mit dieser Art von problem? Link zur Website ist diese.

JSFiddle: Link

dies hat zu tun mit der CSS-übergang auf dem Karussell vielleicht. Siehe auch: stackoverflow.com/questions/17332431/... und hier: stackoverflow.com/questions/4838972/...

InformationsquelleAutor atif | 2013-12-20

  1. 12

    Um diese Verzögerung vermeiden, könnten Sie manuell starten die beiden Karussells zur gleichen Zeit, und verwenden maßgeschneiderte Behandlungen für Veranstaltungen.

    Option #1 :

    • Synchronen init
    • Einfach starten Sie das geschehen auf beiden Karussells
    • Pause auf hover (ich habe Sie nicht benötigen)
    $('.carousel-sync').carousel('cycle');
$('.carousel-sync').on('click', '.carousel-control[data-slide]', function (ev) {
    ev.preventDefault();
    $('.carousel-sync').carousel($(this).data('slide'));
});
$('.carousel-sync').on('mouseover', function(ev) {
    ev.preventDefault();
    $('.carousel-sync').carousel('pause');
});
$('.carousel-sync').on('mouseleave', function(ev) {
    ev.preventDefault();
    $('.carousel-sync').carousel('cycle');
});
    <div id="carousel-a" class="carousel slide carousel-sync">
  ...
</div>

<div id="carousel-b" class="carousel slide carousel-sync">
  ...
</div>

    Bootply Beispiel

    Option #2

    • Desynchronisiert init
    • Doppelte Ereignisse auf beiden Karussells, sobald Sie Auftritt
    • Keine pause-on-hover
    $('.carousel-sync').on('slide.bs.carousel', function(ev) {
    //get the direction, based on the event which occurs
    var dir = ev.direction == 'right' ? 'prev' : 'next';
    //get synchronized non-sliding carousels, and make'em sliding
    $('.carousel-sync').not('.sliding').addClass('sliding').carousel(dir);
});
$('.carousel-sync').on('slid.bs.carousel', function(ev) {
    //remove .sliding class, to allow the next move
    $('.carousel-sync').removeClass('sliding');
});
    <div id="carousel-a" class="carousel slide carousel-sync" data-ride="carousel" data-pause="false">
  ...
</div>

<div id="carousel-b" class="carousel slide carousel-sync" data-ride="carousel" data-pause="false">
  ...
</div>

    Bitte nicht die .sliding - Klasse ist erforderlich, um eine Endlosschleife zu vermeiden.

    Bootply Beispiel

    Danke für die Antwort, lassen Sie mich diese anwenden und sehen, ob es funktioniert für mich. Durch die Art und Weise, die ich erstellt habe, ein jsfiddle zu, so möchten Sie vielleicht, um zu sehen, die problem.
    Auch die Bootply link, den Sie, gerade haben Sie einen Blick auf es nach einiger Zeit, es ist timing nicht gleich bleiben nach einiger Zeit.
    Das Karussell auf meiner Website gestoppt automatisches wechseln Schieberegler
    $('.carousel-sync').carousel('cycle'); starten automatisch ändern, aber es gibt eine pause auf mouseover. (Ich bin derzeit auf der Suche nach einer besseren Lösung zur Vermeidung von Desynchronisation)
    Ich machte noch einen Versuch, Sie können einen Blick auf es.

    InformationsquelleAutor zessx

  2. 1

    Sorry, wenn ich etwas verpasst haben in der Frage, aber wenn Sie möchten, dass die oberen und unteren Karussells zu synchronisieren, können Sie Haken die slid Ereignis, im Gegensatz zu den slide Veranstaltung.

    JS:

    jQuery('#carousel-example-generic2').carousel({
    pause:'false'
});

jQuery('#carousel-example-generic2').on('slid', function(){
    jQuery('#carousel-example-generic1').carousel('next');
});

    http://jsfiddle.net/FKQS8/5/

    InformationsquelleAutor geedubb

  3. 1

    Da die Antwort von @zessx nicht mehr richtig funktioniert nach der änderung von Folien mit dem Karussell-Indikatoren, ich möchte eine erweiterte Antwort auf seine option #2. Diese erweiterte Antwort wird auch der sync-dia-änderungen ausgelöst durch Klicks auf Karussell-Indikatoren:

    $('.carousel-sync').on('slide.bs.carousel', function (ev) {
    //get the direction, based on the event which occurs
    var dir = ev.direction == 'right' ? 'prev' : 'next';
    //get synchronized non-sliding carousels, and make'em sliding
    $('.carousel-sync').not('.sliding').addClass('sliding').carousel(dir);
});
$('.carousel-sync').on('slid.bs.carousel', function (ev) {
    //remove .sliding class, to allow the next move
    $('.carousel-sync').removeClass('sliding');
});

//sync clicks on carousel-indicators as well
$('.carousel-indicators li').click(function (e) {
    e.stopPropagation();
    var goTo = $(this).data('slide-to');
    $('.carousel-sync').not('.sliding').addClass('sliding').carousel(goTo);
});

    Bitte beachten Sie, dass dies erfordert, die synchronisiert Karussells, um die gleiche Anzahl von Folien. Wenn es nicht der Fall ist, muss man ein fallback für diejenigen Fälle, in denen "goTo" existiert nicht für alle synchronisierten Karussells.

    Fix scheint zu funktionieren, außer wenn ich meine erste Folie zu meiner Dritten Folie macht es sowohl Dias aktiv (1 von den Schiebereglern) und nicht verschwinden. Keine Ahnung, wie das möglich ist?
    Meine Vermutung ist, dass Sie eine "active" - Klasse einige carousel-inner > - Element in Ihre cshtml wo es nicht hingehört. Ohne zu sehen, der code ist schwer zu sagen.

    InformationsquelleAutor René

  4. 0

    Wenn Sie mit Twitter Bootstrap-3 (nicht check mit 4). Sie können verwenden Sie Klassen anstelle von IDS. 

    <div id="carousel-a" class="carousel slide carousel-sync" >
  ...
</div>

<div id="carousel-b" class="carousel slide carousel-sync" >
  ...
</div>

    In der oben genannten Fall-Karussell-sync. Dann sind die Steuerelemente, die Sie gerade verwenden href=".Karussell-sync". Und es funktioniert in alle Richtungen.

    InformationsquelleAutor Meint-Willem Gaasbeek

Schreibe einen Kommentar