Bootstrap轮播如何在xs大小的滑块上隐藏一个项目？

3 回答

• 0

  我想不出用引导程序帮助程序类做的方法，因为轮播脚本取决于 .item 类 . 但是你可以使用以下jQuery：

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

  您只需将类 .hide-on-mobile 添加到要在移动设备上隐藏的项目 .

  Working Example

  回复于 2024-05-05T14:31:07+08:00
• 5

  扩展Sebsemillia的方法，您可以在窗口调整大小事件上主动实现此条件逻辑 . 唯一的问题是，如果元素具有类"active"，则还必须删除此类并将其添加到另一个没有 .hide-on-mobile 类的幻灯片中 . 看到这里，使用类 .no-mobile -

  $(function(){
    
    var $window = $(window);
  
    function deviceWidth() {
      return $window.width();
    } 
  
    function toggleMobileSlideVisibility(show_hide) {
      
      $no_mobile_slides = $('.carousel-inner').find('.no-mobile');
  	
      if (show_hide === 'hide'){
  		var reset_active_slide = false;
  		$no_mobile_slides.each(function(i, e){
  			if ($(e).hasClass('active')) {
  				reset_active_slide = true;
  				$(e).removeClass('active');
  			}
  		});
  		$no_mobile_slides.removeClass('item').addClass('hide');
  		if (reset_active_slide) {
  			$('.carousel-inner').find('.item').first().addClass('active');
  		}
  	} else if (show_hide === 'show') {
  		$no_mobile_slides.addClass('item').removeClass('hide');
  	}
    }
  
    var is_mobile_device = false;
  
    var detectMobile = function detectMobile(){
  	if (deviceWidth() > 978) {
  		if (is_mobile_device) { toggleMobileSlideVisibility('show'); }
  		is_mobile_device = false;
  	} else {
  		if (!is_mobile_device) { toggleMobileSlideVisibility('hide'); }
  		is_mobile_device = true;
  	}
    }
  
    $(window).on('resize', function(){
  	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>
  

  回复于 2024-05-05T14:31:07+08:00
• 0

  或者您可以使用CSS媒体查询来隐藏您在移动设备上选择的项目：

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

  您只需要在要隐藏的项目中添加class =“slide-hide-on-mobile”：

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

  回复于 2024-05-05T14:31:07+08:00