デイトラweb制作上級編パターン2 DAY31~44②

卒業制作課題パターン2 2日目
PC版

スマホ版

ループするスライダーの作成(+縦のページネーション)

HTML
<section class="top-swiper">
<div class="top-swiper__inner">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- スライド1 -->
<div class="top-main-visual">
<img src="./img/top/top-01.png" alt="" class="pc-image">
<img src="./img/top/top-01-sp.png" alt="" class="sp-image">
<div class="top-main-visual__text">
<img src="./img/top/top-text.png" alt="街の皆様の笑顔を守るアットホームな歯医者さん" class="pc-image">
<img src="./img/top/top-text-sp.png" alt="街の皆様の笑顔を守るアットホームな歯医者さん" class="sp-image">
</div>
</div>
</div>
<div class="swiper-slide">
<!-- スライド2 -->
<div class="top-main-visual__bg2">
<img src="./img/top/top-02.png" alt="" class="pc-image">
<img src="./img/top/top-02-sp.png" alt="" class="sp-image">
<div class="top-main-visual__text">
<img src="./img/top/top-text.png" alt="街の皆様の笑顔を守るアットホームな歯医者さん" class="pc-image">
<img src="./img/top/top-text-sp.png" alt="街の皆様の笑顔を守るアットホームな歯医者さん" class="sp-image">
</div>
</div>
</div>
<div class="swiper-slide">
<!-- スライド3 -->
<div class="top-main-visual__bg3">
<img src="./img/top/top-03.png" alt="" class="pc-image">
<img src="./img/top/top-03-sp.png" alt="" class="sp-image">
<div class="top-main-visual__text">
<img src="./img/top/top-text.png" alt="街の皆様の笑顔を守るアットホームな歯医者さん" class="pc-image">
<img src="./img/top/top-text-sp.png" alt="街の皆様の笑顔を守るアットホームな歯医者さん" class="sp-image">
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</section>
SCSS
/*================================================
PC表示・スマホ表示する画像の切り替え
================================================*/
.pc-image {
@include mq('sp') {
display: none;
}
}
.sp-image {
display: none;
@include mq('sp') {
display: block;
}
}
/*================================================
スライドの中身
================================================*/
.top-main-visual__bg1,
.top-main-visual__bg2,
.top-main-visual__bg3 {
position: relative;
}
.top-main-visual__text {
display: inline-block;
margin-right: auto;
position: absolute;
left: 60px;
bottom: 52px;
@include mq('sp') {
left: 20px;
bottom: 40px;
}
img {
width: 32.421875vw;
@include mq('sp') {
width: 70.6667vw;
}
}
}
/*================================================
swiperの設定
================================================*/
.top-swiper {
padding: 0 62px;
margin-top: 120px;
@include mq('tab') {
margin-top: 80px;
}
@include mq('sp') {
margin-top: 80px;
padding: 0 20px;
}
}
// ページネーションとアローアイコンの基準
.top-swiper__inner {
position: relative;
}
// 初期設定でabsoluteがあるため書かない
.swiper-button-next {
width: 66px;
height: 66px;
background: url(../img/top/arrow-right.png) no-repeat center center / contain;
right: -33px;
top: 49%;
@include mq('sp') {
width: 45px;
height: 45px;
right: -20px;
top: 50%;
}
&::after {
display: none;
}
}
.swiper-button-prev {
width: 66px;
height: 66px;
margin-top: -20px;
background: url(../img/top/arrow-left.png) no-repeat center center / contain;
left: -33px;
top: 49%;
@include mq('sp') {
width: 45px;
height: 45px;
left: -20px;
top: 50%;
}
&::after {
display: none;
}
}
.swiper-pagination .swiper-pagination-clickable,
.swiper-pagination-bullets,
.swiper-pagination-horizontal {
bottom: 0px !important;
left: -30px !important;
// 横並びのspanタグを縦にする
display: flex;
flex-direction: column;
@include mq('sp') {
bottom: 17px !important;
left: -17px !important;
}
}
.swiper-pagination-bullet {
width: 9px;
height: 9px;
background: #C2C2C2;
opacity: 1;
@include mq('sp') {
width: 6px;
height: 6px;
}
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin-top: 10px;
}
.swiper-pagination-bullet-active {
background: #1391E6;
}
JavaScript
const swiper = new Swiper('.swiper', {
// ループ設定
loop: true,
// ページネーション
pagination: {
el: '.swiper-pagination',
clickable: true
},
// アローアイコン
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// スライドの速さ
slidesPerView: "auto",
autoplay: {
delay: 5000,
disableOnInteraction: false
},
// 浮き出るように表示
effect: "fade",
fadeEffect: {
crossFade: true
},
});
まとめ
今回も卒業制作課題を進めました。
スライダーの作成で手間取りました。。。
ほぼほぼ毎回スライダーは出てきますが、決まった形はないのでいつも苦戦しています。
早く慣れたいですね。。。