Twitter Bootstrap Carousel: dispongono di indicatori di giostra all'esterno di Carousel Div

Question

È possibile avere la lista degli indicatori di carosello al di fuori della Divisione carosello? E in fondo, sto chiedendo se è possibile cercare l'intera pagina per elementi specifici con una classe legata a loro.

sto immaginando qualcosa di simile:

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

E 'possibile?

solo aggiungere, ho controllato il bootstrap fonte JS ed ho trovato questa linea:

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

E 'appena popola gli indicatori della lista. Immagino che il riferimento sia per l'elemento di presentazione .

questione javascript

E 'possibile cercare l'intera pagina per gli elementi rimuovendo la questo di riferimento?

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

Qualsiasi suggerimento sarebbe molto apprezzato. Grazie!

Answer 1

Come soluzione a questo problema è possibile copiare la classe = "active" (e class = "") dalle diapositive ai propri indicatori assegnando a ciascuna diapositiva e ciascun indicatore un ID.

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

Quindi chiamare lo script navFunction() sui clic del tasto sinistro o destro. Questa soluzione è limitata alle diapositive che non utilizzano la funzione di scorrimento automatico.

Answer 2

Questo funziona con i clic del tasto sinistro/destro e il carosello di scorrimento automatico.

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

Ho scoperto che l'utilizzo della funzione carousel() da bootstrap ha funzionato al meglio perché si specifica quale DIV dovrebbe essere il carosello. La classe del carosello deve avere una posizione relativa, ma volevo che i miei indicatori avessero il posizionamento assoluto nella parte inferiore della pagina e non solo il fondo del carosello.

I set-up il codice HTML in questo modo:

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

Nel mio file JS, ho fatto il seguente codice:

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

I d id non tocca affatto il file di bootstrap. La classe "slide" è importante per assegnare a qualsiasi DIV che si desidera essere la giostra in modo che faccia l'animazione.

Answer 4

Un po 'in ritardo per la festa ma potresti provare ad aggiungere uno script come questo ...

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

Ho scritto un po 'di codice universale, in modo che possiamo mettere carousel-indicators in qualsiasi luogo della pagina.

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