Wie Eulenkarussell Slider in Desktop deaktivieren?

Question

Ich verwende owlcarousel .Ich muss nur Bilder auf dem Desktop anzeigen und in mobilen sollte es Display-Slider.Wenn ich Skripte entfernen, funktioniert Slider nicht im Gerät.Bitte überprüfen Sie unten Bild als Referenz. Würdest du mir dabei helfen?

$(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"> 
 
    \t <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

Hoffe, dass es für Sie arbeitet :)

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

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

<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"> 
 
    \t <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>