Bootstrap ein Karussell mit zwei Karussell-Indikatoren

Grundsätzlich, was ich versuche zu tun ist, habe ich ein Bootstrap Karussell mit 8 Folien darin. Ich verwende 2 Karussell-Indikatoren.Bootstrap ein Karussell mit zwei Karussell-Indikatoren

Dies ist mein erster Indikator mit .active Klasse funktionieren

<ol class="rightci carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" ></li> 
</ol>

Dies ist mein zweiter Indikator funktioniert es fine.when ich auf den Link klicken Karussell Dias perfekt ändern, aber .active Klasse Dosis nicht automatisch eher ändern auf erste Indikatoren .active ändert sich gut.

<div class="left leftci carousel-indicators"> 
<a href=""><span class="leftindicators active" data-target="#carousel-example-generic" data-slide-to="0">slide1</span></a> 
</div>

Hilfe mich mit ihm

Quelle

2016-07-29 parish

Sie haben 8 Dias und nur 2 Indikatoren. Kannst du klar erklären, was dein Problem ist? –

der erste Indikator funktioniert gut mit '.active' Klasse. Zum Beispiel, wenn # zuerst die Folien auf die zweite Folie schieben und dann ... die 'aktive 'Klasse des ersten Indikators ändert sich mit ... Das Problem ist mit dem zweiten Indikator ..... es ändert sich nicht wie in Folien – parish

Indikator hat 'aktive' Klasse, wenn das Bild aktiv ist! Sie benötigen 8 Indikatoren und gültiges Bootstrap-Markup für sie –

Ich glaube, Sie brauchen einige benutzerdefinierte js Bootstrap hat diese Funktionalität nicht standardmäßig zu schreiben, so dass Sie Ihre eigenen carousel-indicators

css

.carousel-indicators2 { 
    position: absolute; 
    top: 10px; 
    left: 50%; 
    z-index: 15; 
    width: 60%; 
    padding-left: 0; 
    margin-left: -30%; 
    text-align: center; 
    list-style: none; 
} 

.carousel-indicators2 li { 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    margin: 1px; 
    text-indent: -999px; 
    cursor: pointer; 
    background-color: #000\9; 
    background-color: rgba(0, 0, 0, 0); 
    border: 1px solid #fff; 
    border-radius: 10px; 
} 
.carousel-indicators2 .active { 
    width: 12px; 
    height: 12px; 
    margin: 0; 
    background-color: #fff; 
}

müssen machen

$('.carousel').on('slid.bs.carousel', function() { 
    $(".carousel-indicators2 li").removeClass("active"); 
    indicators = $(".carousel-indicators li.active").data("slide-to"); 
    a = $(".carousel-indicators2").find("[data-slide-to='" + indicators + "']").addClass("active"); 
    console.log(indicators); 

})

Fiddle

Quelle

2016-07-29 10:31:43

Thx Kumpel es funktioniert gut! – parish

Bootstrap ein Karussell mit zwei Karussell-Indikatoren

Antwort

Verwandte Themen