スライダー動作
Swiper
jQueryスライダープラグインです。 headタグ内に下記2つのファイルを配置し、設定したいjsやcssでオプションや装飾の設定をします。 ・swiper-bundle.min.css ・swiper-bundle.min.js
…
HTML
<!-- Slider main container -->
<div class="swiper slider1">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/06.jpg" alt=""></div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
css
img {
max-width: 100%;
}
js
var slider1 = new Swiper ('.slider1', {
effect: 'fade',
fadeEffect: {
crossFade: true
},
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
},
});
02.Slides per view
【パラメータ】 ・loop: true, → 最後のスライドがきたら次に1枚目のスライドを表示 ・loopedSlides: 6, → 前後に6枚のスライドがある 注意 loopedSlidesの指定がないと6番目のスライドが1番目に表示される ・delay: 4000, → スライド間の間隔 ・disableOnInteraction: false, → 操作されても自動再生をストップしない ・slidesPerView: 3, → 一度に表示するスライドの数 ・slidesPerGroup: 2, → 同時にスライドさせるスライドの数 ・spaceBetween: 30, → スライドとの距離 ・clickable: true, → スライドとリンクHTML
<div class="swiper slider2">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/06.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
</div>
css
img {
max-width: 100%;
}
js
var slider2 = new Swiper(".slider2", {
loop: true,
loopedSlides: 6,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
slidesPerView: 3,
slidesPerGroup: 2,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
03.Effect cube
【パラメータ】 ・effect: ‘cube’, → 前後に6枚のスライドがある ・loop: true, → 最後のスライドがきたら次に1枚目のスライドを表示 ・delay: 4000, → スライド間の間隔 ・disableOnInteraction: false, → 操作されても自動再生をストップしない ・clickable: true, → スライドとリンクHTML
<div class="swiper slider3">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/06.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>
css
img {
max-width: 100%;
}
js
var slider3 = new Swiper ('.slider3', {
effect: 'cube',
loop: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
});
04.Effect coverflow
【パラメータ】 ・effect: ‘coverflow’, → 前後のスライドを斜めに表示 ・loop: true, → 最後のスライドがきたら次に1枚目のスライドを表示 ・delay: 4000, → スライド間の間隔 ・disableOnInteraction: false, → 操作されても自動再生をストップしない ・grabCursor: true, → マウスオンしたときにカーソルが「掴む」マークになる ・centeredSlides: true, → アクティブなスライドを中央に配置する ・slidesPerView: “auto”, → スライドコンテナに何枚表示させたいか。 注意 ※autoはコンテナの幅によってフィットする。ループと共用でくずれることがある ・rotate: 50, → 前後のスライドを回転させる角度 ・stretch: 50, → スライド間のスペース ※数値が大きくなると表示されるスライドが増える ・depth: 100, → 奥行 ※スライドは斜めに移動し、数値が大きくなると奥行が深くなる ・modifier: 1, → 効果の乗数 ・slideShadows: true, → スライドシャドウを有効にする ・clickable: true, → スライドとリンクHTML
<div> class="swiper slider4">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/06.jpg" alt=""></div>
</div>
<div> class="swiper-pagination"></div>
</div>
css
.slider4 .swiper-slide {
width: 300px;
height: 300px;
}
.slider4 .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
js
var slider4 = new Swiper(".slider4", {
effect: "coverflow",
loop: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 50,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
05.Slides Grid
【パラメータ】 ・delay: 4000, → スライド間の間隔 ・disableOnInteraction: false, → 操作されても自動再生をストップしない ・loop: true, → 最後のスライドがきたら次に1枚目のスライドを表示 ・slidesPerView: 2, → 一度に表示するスライドの数 ・rows: 2, → スライドの列 注意 ※rowsを指定し、かつloop: true,の指定があると右にスライドしなくなる(左はスライドする)実装するならloopと同時に使わない ・loopedSlides: 6, → 前後に6枚のスライドがある 注意 ※loopedSlidesの指定がないと6番目のスライドが1番目に表示される ・spaceBetween: 30, → スライドとの距離HTML
<div class="swiper slider5">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/06.jpg" alt=""></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
css
.slider5 {
width: 100%;
height: 60vh;
}
.slider5 .swiper-slide {
height: calc((100% - 30px) / 2);
}
.slider5 .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
js
var slider5 = new Swiper(".slider5", {
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
loop: true,
loopedSlides: 6,
slidesPerView: 2,
grid: {
rows: 2,
},
spaceBetween: 30,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
06.Thumbs gallery loop
【パラメータ】 ・delay: 4000, → スライド間の間隔 ・loop: true, → 最後のスライドがきたら次に1枚目のスライドを表示 ・spaceBetween: 30, → スライドとの距離 ・loopedSlides: 6, → 前後に6枚のスライドがある ・slidesPerView: 6, → 一度に表示するスライドの数 ・freeMode: true, → スワイプ時の動きが強さでスクロールされる ・watchSlidesProgress: true, → 各スライドのトランジション時の進捗状況 ・centeredSlides: true, → アクティブなスライドを中央に配置する ・swiper: thumbs6 → スライドとサムネイルを連携する 注意 ※左にスライドは連携したけど、右にスライドが連携しなかった…HTML
<div class="swiper slider6">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/06.jpg" alt=""></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div thumbsSlider="" class="swiper thumbs6">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/06.jpg" alt=""></div>
</div>
</div>
css
img {
max-width: 100%;
}
.slider6 .swiper-button-next:after,
.slider6 .swiper-button-prev:after {
color: #fff;
}
.thumbs6 {
padding: 10px 0;
}
.thumbs6 .swiper-slide {
opacity: 0.4;
}
.thumbs6 .swiper-slide-active {
opacity: 1;
}
js
var thumbs6 = new Swiper('.thumbs6', {
autoplay: {
delay: 4000,
},
loop: true,
spaceBetween: 10,
loopedSlides: 6,
slidesPerView: 6,
freeMode: true,
watchSlidesProgress: true,
});
var slider6 = new Swiper ('.slider6', {
autoplay: {
delay: 4000,
},
loop: true,
spaceBetween: 10,
loopedSlides: 6,
centeredSlides : true,
slidesPerView: 2,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: thumbs6
}
});
07.Effect cards
【パラメータ】 ・effect: “cards”, → カードの形でスライドする ・grabCursor: true, → マウスオンしたときにカーソルが「掴む」マークになる ・loop: true, → 最後のスライドがきたら次に1枚目のスライドを表示 ・delay: 4000, → スライド間の間隔 ・disableOnInteraction: false, → 操作されても自動再生をストップしないHTML
<div class="swiper slider7">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/01.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/02.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/03.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/04.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/05.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/06.jpg" alt=""></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
css
.slider7 {
width: 240px;
height: 320px;
}
.slider7 .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
}
.slider7 .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
js
var slider7 = new Swiper(".slider6", {
effect: "cards",
grabCursor: true,
loop: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
01.Effect fade
HTMLはすべてほぼ同じです。(下記3つがあるかどうかの違い) pagination:スライド下の● navigation:両サイドの矢印 scrollbar:スライド下のスクロールバー 【パラメータ】 ・effect: ‘fade’, → スライドではなくふわっと次の画像を表示 ・crossFade: true → 下の要素が表示されないようにする ・loop: true, → 最後のスライドがきたら次に1枚目のスライドを表示 注意 ※loop: true にすると、最初と最後のスライドが複製され、 左端が最後のスライドの複製、右端が最初のスライドの複製に対応するようになり、スクロールバーの表示がずれる。 ・draggable: true, → スライドとリンク