皆様日々のコーディングお疲れ様です〜！
今回はメインビジュアルでも使えるswiperをアレンジした実装方法をお伝えしますー！
手順 ・swiperを2つ作る ・横に並べる ・片方をオプションで縦にして、逆再生させる ・自動再生やスピード等をオプションで調整する
たったこれだけです。
今回のコードをコピペすれば、下記のような画面を実装することが可能です。
準備
・HTML、CSS、JSファイルを用意する。
実装方法
早速実装してみましょう！
コピペ可能ですので、よくわからない方はまずコピペしてみましょう！
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<link href="./style.css" rel="stylesheet">
</head>
<body>
<!-- ここから -->
<div class="mainVisual">
<div class="swiper-container01">
<div class="swiper-wrapper">
<div class="swiper-slide bgc-01">😋</div>
<div class="swiper-slide bgc-02">😊</div>
<div class="swiper-slide bgc-03">😂</div>
</div>
</div>
<div class="swiper-container02">
<div class="swiper-wrapper">
<div class="swiper-slide bgc-04">😚</div>
<div class="swiper-slide bgc-05">😇</div>
<div class="swiper-slide bgc-06">😌</div>
</div>
</div>
</div>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<script type='text/javascript' src="./script.js"></script>
<!-- ここまで -->
</body>
</html>スワイパーを2つ作ります。
スワイパーの読み込みを忘れないようにしてくださいね。
CSS
.mainVisual {
display: flex;
}
@media screen and (max-width:678px) {
.mainVisual {
display: block;
}
}
.swiper-container01 {
width: 100%;
max-width: 940px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
.swiper-container02 {
width: 100%;
max-width: 940px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
@media screen and (max-width:678px) {
.swiper-container01 {
height: 250px;
}
.swiper-container02 {
height: 250px;
}
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
color: #2d1408cc;
}
.bgc-01 {
background-color: #afe7e7;
}
.bgc-02 {
background-color: #d4f0d9;
}
.bgc-03 {
background-color: #e8cae2;
}
.bgc-04 {
background-color: #ebecc6;
}
.bgc-05 {
background-color: #d4d6f0;
}
.bgc-06 {
background-color: #e8cfca;
}今回はSPでは縦並びに戻しています。
説明のために連番やbackground-colorを使っていますが、お好みで調節してください。
JavaScript
var mySwiper01 = new Swiper ('.swiper-container01', {
effect: 'slide',
slidesPerView: 1,
loop: true,
speed: 1000,
autoplay: {
delay: 2000,
reverseDirection: false,
disableOnInteraction: false,
}
})
var mySwiper02 = new Swiper ('.swiper-container02', {
direction: 'vertical',
effect: 'slide',
slidesPerView: 1,
loop: true,
speed: 1000,
autoplay: {
delay: 2000,
reverseDirection: true,
disableOnInteraction: false,
}
})スワイパーを2つ生成します。
縦向きのスライダーにしたい場合はdirectionオプションで指定できます。
デフォルトではhorizontalになっているので、縦向きにしたいときはverticalと指定しましょう。
逆再生はスワイパーのreverseDirectionオプションで指定できます。
デフォルトではfalseになっているので逆にしたい場合は、trueにしましょう。
スワイパーのオプションをアレンジしてメインビジュアルを作ってみてのまとめ
分解して考えると、1つずつスワイパーを作って横並びにしているだけです。
自動再生やページ送りの秒数を合わせることで、同じタイミングで動かすことができます。
検証ツールで縮めた時にタイミングずれるので、綺麗に作りたい人はスライダーを自作したりもう少し細かく調査してもいいかもしれません。
しかし、ユーザーでわざわざ検証でSPを見る人いる？とも思います。。。ごめんなさい笑
スワイパーの増やし方などはもっとスマートな方法があるかもしれませんが、メインビジュアルで一箇所だけ使用するならこちらの方法で問題ないと思います。
こんな方法もあるよ！という方はコメントに記載していただけると嬉しいです(^^)
コメント