Bootstrap carosello come nascondere un elemento dal cursore sulla dimensione xs?

Question

Come posso nascondere uno o due elementi dal bootstrap-carousel solo su xs-size?

Quando ho aggiunto classe 'hidden-xs' a questo elemento in giostra e voce div assomiglia:

<div class="item hidden-xs"> 
     <img src="imgTop2.jpg" alt="..."> 
</div> 

Tutti gli articoli e la giostra scomparso.

Lo stesso problema esiste quando aggiungo la classe "hidden-xs" all'elemento img per questo elemento.

Come posso risolvere il problema? Voglio nascondere su x solo una o due diapositive. Altri devono per visibile.

mio codice è simile:

<div id="carousel-top" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="hidden carousel-indicators" style="display:none"> 
     <li data-target="#carousel-top" data-slide-to="0" class="active"></li> 
     <li class="" data-target="#carousel-top" data-slide-to="1"></li> 
     <li class="" data-target="#carousel-top" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 

     <div class="item active"> 
     <img src="imgTop.jpg" alt="..."> 
    </div> 

    <div class="item"> 
     <img src="imgTop2.jpg" alt="..."> 
    </div> 

    <div class="item"> 
     <img src="imgTop3.jpg" alt="..."> 
    </div> 

    <div class="item"> 
     <img src="imgTop4.jpg" alt="..."> 
    </div> 

    <div class="item"> 
     <img src="imgTop5.jpg" alt="..."> 
    </div> 


    </div> 

    <!-- Controls --> 
    <a class="hidden left carousel-control" href="#carousel-top" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="hidden right carousel-control" href="#carousel-top" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 

Answer 1

non riesco a pensare ad un modo per farlo solo con le classi di supporto bootstrap, perché lo script carosello dipende dalla classe .item. Ma è possibile utilizzare il seguente jQuery:

if ($(window).width() < 960) { 
    $('#carousel-top .hide-on-mobile').removeClass('item').addClass('hide'); 
} 

Non vi resta che aggiungere la classe .hide-on-mobile agli elementi che si desidera nascondere su dispositivi mobili.

Working Example

Answer 2

Ampliando l'approccio di Sebsemillia, si può raggiungere questo logica condizionale attivamente sulla finestra ridimensionare evento. L'unico problema è che se l'elemento ha classe "attiva", devi anche rimuovere questa classe e aggiungerla a un'altra diapositiva senza la classe .hide-on-mobile. Vedi qui, utilizzando la classe .no-mobile -

$(function(){ 
 
    
 
    var $window = $(window); 
 

 
    function deviceWidth() { 
 
    return $window.width(); 
 
    } 
 

 
    function toggleMobileSlideVisibility(show_hide) { 
 
    
 
    $no_mobile_slides = $('.carousel-inner').find('.no-mobile'); 
 
\t 
 
    if (show_hide === 'hide'){ 
 
\t \t var reset_active_slide = false; 
 
\t \t $no_mobile_slides.each(function(i, e){ 
 
\t \t \t if ($(e).hasClass('active')) { 
 
\t \t \t \t reset_active_slide = true; 
 
\t \t \t \t $(e).removeClass('active'); 
 
\t \t \t } 
 
\t \t }); 
 
\t \t $no_mobile_slides.removeClass('item').addClass('hide'); 
 
\t \t if (reset_active_slide) { 
 
\t \t \t $('.carousel-inner').find('.item').first().addClass('active'); 
 
\t \t } 
 
\t } else if (show_hide === 'show') { 
 
\t \t $no_mobile_slides.addClass('item').removeClass('hide'); 
 
\t } 
 
    } 
 

 
    var is_mobile_device = false; 
 

 
    var detectMobile = function detectMobile(){ 
 
\t if (deviceWidth() > 978) { 
 
\t \t if (is_mobile_device) { toggleMobileSlideVisibility('show'); } 
 
\t \t is_mobile_device = false; 
 
\t } else { 
 
\t \t if (!is_mobile_device) { toggleMobileSlideVisibility('hide'); } 
 
\t \t is_mobile_device = true; 
 
\t } 
 
    } 
 

 
    $(window).on('resize', function(){ 
 
\t detectMobile(); 
 
    }); 
 

 
    detectMobile(); 
 

 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="https://unsplash.it/1920/600/?random&img=2" alt="random"> 
 
     <div class="carousel-caption"> 
 
     Just A Slide 
 
     </div> 
 
    </div> 
 
    <div class="item no-mobile"> 
 
     <img src="https://unsplash.it/1920/600/?random&img=3" alt="random-no-mobile"> 
 
     <div class="carousel-caption"> 
 
     A Slide That Should Hide On Mobile 
 
     </div> 
 
    </div> 
 
     <div class="item"> 
 
     <img src="https://unsplash.it/1920/600/?random&img=4" alt="random2"> 
 
     <div class="carousel-caption"> 
 
     Just Another Slide 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>

Answer 3

Oppure si può utilizzare media query CSS per nascondere gli elementi che si sceglie sul mobile:

@media screen and (max-device-width: 800px) { 
    .slide-hide-on-mobile { display: none; } 
} 

Hai solo bisogno di aggiungere classe = "slide-hide-on-mobile" agli elementi che si desidera nascondere:

<div class="item active slide-hide-on-mobile"> 
    <img src="imgTop.jpg" alt="..."> 
</div>