デイトラweb制作上級編パターン2 DAY31~44⑦
nakano
卒業制作課題パターン2 7日目
PC版
スマホ版
ループするスライドショーの実装
上級編 DAY31~44③ でも同じようなスライドショーを作成しましたが、こっちは各スライドで止まらない仕様
HTML
<div class="p-staff__swiper">
<div class="swiper swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide p-staff__swiper-size">
<div class="p-staff__swiper-image"><img src="./img/staff/staff-slider1.png" alt=""></div>
</div>
<div class="swiper-slide p-staff__swiper-size">
<div class="p-staff__swiper-image"><img src="./img/staff/staff-slider1-1.png" alt=""></div>
</div>
<div class="swiper-slide p-staff__swiper-size">
<div class="p-staff__swiper-image"><img src="./img/staff/staff-slider1-2.png" alt=""></div>
</div>
<div class="swiper-slide p-staff__swiper-size">
<div class="p-staff__swiper-image"><img src="./img/staff/staff-slider1-3.png" alt=""></div>
</div>
<div class="swiper-slide p-staff__swiper-size">
<div class="p-staff__swiper-image"><img src="./img/staff/staff-slider1-4.png" alt=""></div>
</div>
</div>
</div>
</div>SCSS
.p-staff__swiper {
margin-top: 160px;
@include mq('sp') {
margin-top: 97px;
}
}
.p-staff__swiper-size {
width: 23.828125vw;
@include mq('sp') {
width: 53.333vw;
}
}
// スライドごとに停止させない
.swiper-wrapper {
transition-timing-function: linear;
}JS
const staffSwiper = new Swiper('.swiper2', {
loop: true,
speed: 10000,
autoplay: {
delay: 0,
disableOnInteraction: false,
},
slidesPerView: "auto",
// スライド同士の間隔（単位はpx）
spaceBetween: 10,
breakpoints: {
// スライドの表示枚数：768px以上の場合
768: {
spaceBetween: 20,
}
}
});まとめ
今回も卒業制作課題を進めました。
スライダーが登場したのはこのページで2回目です。
classを分けていなかったので最初はうまくスライドが動かず、少し焦りましたが何とか作成することができました。
まだ残っているページは多いですが、目標の2週間以内の完成に向けてがんばります！
