Wordpressでサイトを作っており、slickスライダーを入れています。
ヘッダーのスライダー画像1枚だけ表示して、前後の画像は少しチラ見せ、スマホでは前後の画像のチラ見せは無しにしたいです。
コピペですが自分なりに調べて問題なく動いたのですが、レスポンシブ指定の追記をするとスライダーが崩れてしまいます。
jsの記述に間違いがありますでしょうか？
回答をよろしくお願いいたします。
<link rel="stylesheet" type="text/css" href="slick.css">
<link rel="stylesheet" type="text/css" href="slick-theme.css">
<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" src="slick.min.js"></script>
<script>
$("document").ready(function(){
$('.mypattern').slick({
autoplay: true,
autoplaySpeed: 2500,
speed: 800,
slidesToShow: 1,
dots: true,
arrows: false,
centerMode: true,
centerPadding: '30%'
responsive: [
{
breakpoint: 1024,
settings: {
centerPadding: '0'
}
}, ]
});
});
</script>
<style>
* {
margin: 0;
padding: 0;
}
.slider {
width: 90%;
margin: 0 auto 0px;
}
.slick-slide img {
width: 100%;
height: auto;
}
.mypattern{
width: 100%;
}
.mypattern .slick-slide{
margin: 5px;
}
.mypattern .slick-slide:not(.slick-center) {
-webkit-filter: opacity(70%);
-moz-filter: opacity(70%);
-o-filter: opacity(70%);
-ms-filter: opacity(70%);
filter: opacity(70%);
transition: 0.2s linear;
}
</style>
<div class="content">
<div class="slider mypattern">
<div><a href="#"><img src="/images/abc.jpg"></a></div>
<div><a href="#"><img src="/images/def.jpg"></a></div>
<div><a href="#"><img src="/images/ghi.jpg"></a></div>
<div><a href="#"><img src="/images/jkl.jpg"></a></div>
</div>
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/07 07:36