jQueryでプラグインなしでレスポンシブなスライドショーを実装したい
Q&A
解決したいこと
jQueryでプラグインなしでスライドショーを実装していますが、jsファイルに記述してレスポンシブ対応させたいです。
cssに記述する方法で実装はできたのですが、jsファイルで実装させたいと考えています。
・795px以下でスライドショーの幅を画面幅100％にしたい
if (window.matchMedia('(max-width: 795x)').matches) {
以下でif文を使って条件分岐させて対応させたいのですが、記述方法がわかりません。
該当するソースコード
style.css(レスポンシブ未対応のコード)
.slider-wrap {
width: 600px;
padding: 10px;
margin: 0 auto;
border-radius: 10px;
background-color: #ddd;
box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4);
}
.slider-area {
position: relative;
width: 600px;
height: 300px;
background-color: #fff;
overflow: hidden;
}
.slider-list {
position: absolute;
top: 0;
left: 0;
width: 2400px;
height: 300px;
}
.slider-list > li {
float: left;
list-style-type: none;
}
.slider-ctrl-btn {
position: absolute;
top: 50%;
width: 30px;
height: 30px;
margin-top: -15px;
cursor: pointer;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0.5);
}
.slider-ctrl-btn.prev {
left: 30px;
}
.slider-ctrl-btn.next {
right: 30px;
}
.swiper,
.slick {
max-width: 500px;
margin: 30px auto 0;
}
.swiper-button-prev,
.swiper-button-next {
color: #fff;
}
.swiper-pagination span {
background-color: #fff;
}
.slick-prev {
left: 25px;
}
.slick-next {
right: 25px;
}
.slick-prev,
.slick-next {
z-index: 100;
}
index.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="format-detection" content="telephone=no" />
<title>05 | 1-jQuery</title>
<link rel="stylesheet" href="../../00-tools/css/reset.css" />
<link rel="stylesheet" href="../../00-tools/css/base.css" />
<link rel="stylesheet" href="css/swiper-bundle.min.css" />
<link rel="stylesheet" href="css/slick.css" />
<link rel="stylesheet" href="css/slick-theme.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js" defer></script>
<script src="js/slick.min.js" defer></script>
<script src="js/swiper-bundle.min.js" defer></script>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="slider-wrap">
<div class="slider-area">
<ul class="slider-list clearfix">
<li class="slide active"><img src="img/1.jpg" alt="" /></li>
<li class="slide"><img src="img/2.jpg" alt="" /></li>
<li class="slide"><img src="img/3.jpg" alt="" /></li>
<li class="slide"><img src="img/4.jpg" alt="" /></li>
</ul>
<button
type="button"
class="slider-ctrl-btn prev"
data-ctrl="prev"
></button>
<button
type="button"
class="slider-ctrl-btn next"
data-ctrl="next"
></button>
</div>
</div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/1.jpg" alt="" /></div>
<div class="swiper-slide"><img src="img/2.jpg" alt="" /></div>
<div class="swiper-slide"><img src="img/3.jpg" alt="" /></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
<div class="slick">
<ul class="slick-wrapper">
<li><img src="img/1.jpg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
</ul>
</div>
</div>
<script defer>
// defer
window.addEventListener("load", function () {
var a = $(".slider-wrap"),
e = a.find(".slider-ctrl-btn"),
b = a.find(".slider-list"),
d = b.find("img"),
sliderImgLength = d.length,
sliderImgWidth = d.width(),
sliderListPosArr = [],
sliderClickCount = 0;
for (i = 0; i < sliderImgLength; i++) {
sliderListPosArr[i] = -i * sliderImgWidth;
}
e.on("click", function () {
sliderDirection = $(this).data("ctrl");
c(sliderDirection);
b.animate({ left: sliderListPosArr[sliderClickCount] }, 500);
});
function c(f) {
if (window.matchMedia('(max-width: 795x)').matches) {
//795px以下の時のjs
} else {
//ここに796px以上のの時のjs
switch (f) {
case "next":
if (sliderClickCount < sliderImgLength - 1) {
sliderClickCount++;
} else {
sliderClickCount = 0;
}
break;
case "prev":
if (sliderClickCount != 0) {
sliderClickCount--;
} else {
sliderClickCount = sliderImgLength - 1;
}
break;
default:
break;
}
}
}
const swiper = new Swiper(".swiper", {
// ページネーションが必要なら追加
pagination: {
el: ".swiper-pagination",
clickable: true, //ドットのクリックを有効化
},
// ナビボタンが必要なら追加
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
allowTouchMove: false, //スライドを流し続ける
},
loop: true,
speed: 1000, //スライドアニメーション（切り替わるときの動き）のスピード
slidesPerView: "auto", //1画面で見えるスライド数。autoにして常にスライドが見えるようにしている
freeMode: true, //自由にドラッグ（スワイプ）できるようにする。スライド位置がスナップしなくなる。
freeModeMomentum: false, //ドラッグ（スワイプ）した後の慣性スクロールをオフにする。
});
$(".slick-wrapper").slick({
speed: 800, //スライドするスピード
dots: true, //スライドしたのドット
arrows: true, //左右の矢印
infinite: true, //スライドのループ
pauseOnHover: false, //ホバーしたときにスライドを一時停止しない
responsive: [
{
breakpoint: 796, // 641〜795px以下のサイズに適用
settings: {
slidesToShow: 1,
arrows: false, //左右の矢印
},
},
{
breakpoint: 641, // 〜640px以下のサイズに適用
settings: {
speed: 800, //スライドするスピード
slidesToShow: 1,
dots: false, //スライドしたのドット
arrows: false, //左右の矢印
},
},
],
});
});
</script>
</body>
</html>
自分で試したこと
ここに問題・エラーに対して試したことを記載してください。
「jQuery レスポンシブ」と検索しましたが、そもそものプラグインを使わない一番上のスライドショーの変数の定義などの意図がわからず、解決できませんでした。
この場合のif文の記述についてご教示いただけるとありがたいです。よろしくお願いいたします。
0