0
私はowl-carouselプラグイン（https://owlcarousel2.github.io/OwlCarousel2/）を使用しています。私はすべてのコンテンツが1行に表示され、モバイルデバイス上で有効になるように、デスクトップ上のフロールカルーセルを無効にして、コンテンツが1つずつスライドするようにしたいと考えています。いくつかのコードを試しましたが、うまくいきません。デスクトップでのフクロウカルーセルの無効化とモバイルデバイスでの有効化
あなたは私を助けてくれますか？今
$(document).ready(function() {
\t $("#owl_about_main_slider").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 500,
margin:10,
paginationSpeed : 400,
autoplay:true,
items : 1,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : false,
loop:true,
nav:true,
navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
});
\t });
$(function() {
var owl = $('.owl-carousel'),
owlOptions = {
loop: false,
margin: 10,
responsive: {
0: {
items: 1
}
}
};
if ($(window).width() < 854) {
var owlActive = owl.owlCarousel(owlOptions);
} else {
owl.addClass('off');
}
$(window).resize(function() {
if ($(window).width() < 854) {
if ($('.owl-carousel').hasClass('off')) {
var owlActive = owl.owlCarousel(owlOptions);
owl.removeClass('off');
}
} else {
if (!$('.owl-carousel').hasClass('off')) {
owl.addClass('off').trigger('destroy.owl.carousel');
owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
}
}
});
});html,body{
\t margin: 0;
\t padding: 0;
\t height: 100%;
}
body .owl-nav div{
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
border:1px solid #000;
width: 40px;
height: 40px;
border-radius: 50%;
}
body .owl-prev{
left: 0;
display: flex;
}
body .owl-next{
right: 0;
display: flex;
}
body .owl-prev i, body .owl-next i{
margin: auto;
}
#owl_about_main_slider div h2{
text-align: center;
}
.owl-carousel.off {
display: block;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> \t \t
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div id="owl_about_main_slider" class="owl-carousel">
<div><h2>This is First Slider</h2></div>
<div><h2>This is Second Slider</h2></div>
<div><h2>This is Third Slider</h2></div>
<div><h2>This is Fourth Slider </h2></div>
</div>
スニペットを例文と共有するとよいでしょう。 –
私は以前の回答を編集しました。現在のように、.owl-carouselクラスが 'display：none'に設定されているので、私はstopCarousel関数の 'owl'要素にスタイル変更を加えました。 – yinken
返信ありがとう、私はあなたのコードをテストしましたが、デスクトップ上のコンテンツを取得していない –