Twitter Bootstrap Karussell: haben Karussell-Indikatoren außerhalb Karussell Div

Question

Ist es möglich, die Karussell-Indikatoren Liste außerhalb der Karussell Div haben? Und ganz unten frage ich, ob es möglich ist, die gesamte Seite nach bestimmten Elementen zu durchsuchen, an die eine Klasse gebunden ist.

Ich bin so etwas wie dies vorstellen:

<div id="presentation" class="tab-pane active"> 
    <div id="presentationCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
      <div class="item active"><img src="...1.jpg" alt="" /></div> 
      <div class="item active"><img src="...2.jpg" alt="" /></div> 
      <div class="item active"><img src="...3.jpg" alt="" /></div> 
     </div> 
     <a class="carousel-control left" href="#presentationCarousel" data-slide="prev">&lsaquo;</a> 
     <a class="carousel-control right" href="#presentationCarousel" data-slide="next">&rsaquo;</a> 
    </div> 
</div> 

<div id="chapterList"> 
    <ol class="carousel-indicators"> 
     <li data-target="#presentationCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#presentationCarousel" data-slide-to="1"></li> 
     <li data-target="#presentationCarousel" data-slide-to="3"></li> 
    </ol> 
</div> 

Ist es möglich?

einfach hinzufügen, Ich habe die Bootstrap-JS Quelle und fand diese Zeile:

this.$indicators = this.$element.find('.carousel-indicators') 

er die Liste Indikatoren nur auffüllt. Ich stelle mir vor, die diese Referenz ist für die Präsentation div Element.

JAVASCRIPT FRAGE

Ist es möglich, durch das Entfernen der diese Referenz die gesamte Seite für Elemente suchen?

this.$indicators = $element.find('.carousel-indicators') 

Jedes Stück Beratung wäre sehr geschätzt. Vielen Dank!

Answer 1

Um dieses Problem zu umgehen, können Sie class = "active" (und class = "") aus den Folien in Ihre Indikatoren kopieren, indem Sie jeder Folie und jedem Indikator eine ID zuweisen.

function navFunction() { 
    setTimeout(function() { 
     $("#ind-1").attr("class", $("#slide-1").attr("class")); 
     $("#ind-3").attr("class", $("#slide-2").attr("class")); 
     $("#ind-3").attr("class", $("#slide-3").attr("class")); 
    }, 800); 
}; 

Dann rufen Sie das Skript navFunction() auf der linken oder rechten Maustaste klickt. Diese Vorgehensweise ist auf Folien beschränkt, die kein automatisches Scrollen verwenden.

Answer 2

Dies funktioniert sowohl mit Links/Rechts-Tasten klicken und Auto-Scrolling-Karussell.

$(document).ready(function() {   
    $('#presentation').carousel({ 
     interval: 8000 
    }).bind('slide', function() { 
     navFunction(); 
    }).carousel('cycle'); 
}); 

function navFunction() { 
    setTimeout(function() { 
     $("#ind-1").attr("class", $("#slide-1").attr("class")); 
     $("#ind-2").attr("class", $("#slide-2").attr("class")); 
     $("#ind-3").attr("class", $("#slide-3").attr("class")); 
     $("#ind-4").attr("class", $("#slide-4").attr("class")); 
     $("#ind-5").attr("class", $("#slide-5").attr("class")); 
    }, 800); 
}; 

Answer 3

Ich fand, dass die Verwendung der Funktion carousel() vom Bootstrap am besten funktionierte, weil Sie angeben, welcher DIV das Karussell sein sollte. Die Karussellklasse muss eine relative Position haben, aber ich wollte, dass meine Indikatoren absolut am unteren Ende der Seite positioniert sind und nicht nur am unteren Ende des Karussells.

ich den HTML-Code wie folgt Aufstellmaße:

<div id="galleryCarousel" class="carousel"> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="images/photos/IMG_1937_8_9_tonemapped-X3.jpg" alt="Dish"> 
     <div class="carousel-caption"> 
     Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio 

     </div><!--end caption--> 
    </div><!--end item--> 

    <div class="item"> 
     <img src="images/photos/IMG_1961_2_3_tonemapped-X2.jpg" alt="Dish" class="portrait"> 
     <div class="carousel-caption"> 
     Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit 

     </div><!--end caption--> 
    </div><!--end item--> 


    </div><!--end carousel-inner--> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#gallery" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#gallery" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 



</div> <!--END carousel--> 

<div class="col-xs-6 picName"> 
    other stuff 
    </div> 

    <div class="col-xs-6"> 
    other stuff 
    </div> 

     <ol class="carousel-indicators col-xs-12"> 
     <li data-target="#gallery" data-slide-to="0" class="active"><div><img src="images/photos/small/IMG_1937_8_9_tonemapped-X3.jpg" alt="Goldstone, California Facility Images"></div>Goldstone Antenna at...</li> 
     <li data-target="#gallery" data-slide-to="1"><div><img src="images/photos/small/IMG_1961_2_3_tonemapped-X2.jpg" alt="Image 2"></div>Image 2</li> 

     </ol> 
    </div><!--END gallery--> 

In meiner eigenen JS-Datei, habe ich den folgenden Code:

$('#gallery').carousel({ 
    interval: 2000, 
    pause: "hover", 
    wrap: true 
}); 

I d Ignoriere die Bootstrap-Datei überhaupt nicht. Die "Folie" -Klasse ist wichtig, um jedem DIV, das das Karussell sein soll, zuzuordnen, damit es die Animation ausführt.

Answer 4

Bis spät in die Party, aber Sie könnten versuchen, ein Skript wie folgt hinzuzufügen ...

$('#myCarousel').on('slide.bs.carousel', function() {  

$holder = $("ol li.active"); 
$holder.next("li").addClass("active"); 
if($holder.is(':last-child')) 
{ 
$holder.removeClass("active"); 
$("ol li:first").addClass("active"); 
} 
$holder.removeClass("active"); 
}) 
</script> 

Answer 5

ich einige Universal-Code geschrieben haben, so können wir carousel-indicators an einer beliebigen Stelle auf der Seite platzieren.

$(document).ready(function() { 
    $('div[data-ride="carousel"]').each(function() { 
     var $carousel = $(this); 
     var id = this.id; 
     var relatedIndicators = $('li[data-target="#'+id+'"]'); 
     $carousel.on('slid.bs.carousel', function (e) { 
      var index = $carousel.find('.carousel-inner .item').index($carousel.find('.carousel-inner .active')); 
      relatedIndicators.removeClass('active'); 
      relatedIndicators.filter('[data-slide-to="'+ index +'"]').addClass('active'); 
     }); 
    }); 
});