如何禁用桌面上的owl轮播滑块？

Question

我正在使用owlcarousel。我必须只在桌面和移动设备上显示图像，它应该是显示滑块。如果我删除脚本，Slider无法在设备中工作。请查看下面的图片以供参考。你能帮帮我吗？

$(document).ready(function() {
 
  $("#owl-demo").owlCarousel({
 
      autoPlay: 3000, //Set AutoPlay to 3 seconds
 
      items : 4,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]
 
  });
 
});

#owl-demo .item{
  margin: 3px;
}
#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
 
<!-- Default Theme -->
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">

<div id="owl-demo">
   <div class="col-md-4">
  	<div class="item"><img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt="Owl Image"></div>
</div>

 <div class="col-md-4">
  <div class="item"><img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt="Owl Image"></div>
</div>

 <div class="col-md-4">
  <div class="item"><img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt="Owl Image"></div>
</div>

 <div class="col-md-4">
  <div class="item"><img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt="Owl Image"></div>
</div>

 <div class="col-md-4">
  <div class="item"><img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt="Owl Image"></div>
</div>

 <div class="col-md-4">
  <div class="item"><img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt="Owl Image"></div>
</div>

</div>

Answer 1

希望它适合你：）

＆＃13;

＆＃13;

function owlSlider() {
 
  $("#owl-demo").owlCarousel({
 
      autoPlay: 3000, //Set AutoPlay to 3 seconds
 
      items : 4,
      //itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]
 
  });
 
};
$(window).resize(function(){
	resizeWin();
});
function resizeWin(){
if ($(window).width() < 768) {
   owlSlider();
}
}

＆＃13;

#owl-demo .item{
  margin: 3px;
}
#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
 
<!-- Default Theme -->
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">

<div id="owl-demo">
   <div class="col-md-4">
  	<div class="item"><img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt="Owl Image"></div>
</div>

 <div class="col-md-4">
  <div class="item"><img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt="Owl Image"></div>
</div>

 <div class="col-md-4">
  <div class="item"><img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt="Owl Image"></div>
</div>

 <div class="col-md-4">
  <div class="item"><img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt="Owl Image"></div>
</div>

 <div class="col-md-4">
  <div class="item"><img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt="Owl Image"></div>
</div>

 <div class="col-md-4">
  <div class="item"><img src="http://economictimes.indiatimes.com/thumb/msid-50941625,width-640,resizemode-4/mughal-gardens-in-full-bloom.jpg" alt="Owl Image"></div>
</div>

</div>

＆＃13;

＆＃13;

＆＃13;