2012-07-12 7 views
5

Ho cercato di nascondere i pulsanti destro e sinistro di Bootstrap Carousel se è presente un solo cursore, ma sembra che non riesca a farlo funzionare correttamente.Nascondere Twitter Avviare le frecce sinistra e destra se è presente un solo cursore

Ho provato

if ($('.carousel-inner div').length === 1) { 
     $(this).find('.controls .carousel-control').hide(); 
    } 

e

if($('.carousel-inner .item').is(':only-child')) { 
    $(this).find('.controls .carousel-control').hide(); 

senza alcuna fortuna.

C'è una ragione particolare per cui nessuna di queste funzioni? La console restituisce il numero corretto di cursori per .length e io uso lo stesso identico metodo .hide su una funzione diversa che si occupa di questo carosello.

+3

cosa si intende per "$ (this)"? – ahren

risposta

6

Invece di provare $(this).find(...).hide();$('.controls .carousel-control').hide();

+0

Grazie, non appena ho letto "ciò che è $ (questo)" riferimento "è venuto da me. La tua risposta alla fine è stata la soluzione. –

12

La risposta accettata funziona bene fino a quando si dispone di 1 carosello per pagina. Ho avuto un paio così ho pensato di aggiungere alla soluzione:

basa sull'utilizzo dello standard Bootstrap Carousel Mark up:

<div id="myCarousel" class="carousel slide"> 
    <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> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item">…</div> 
    <div class="item">…</div> 
    <div class="item">…</div> 
    </div> 
    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

Ti consigliamo di scorrere ogni occorrenza di una giostra, uso $ (questo) e prendi i suoi fratelli:

$('.carousel-inner').each(function() { 

    if ($(this).children('div').length === 1) $(this).siblings('.carousel-control, .carousel-indicators').hide(); 

}); 
+0

Grazie per aver aggiunto questo. –

Problemi correlati