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

<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>

/*================================================
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;
}

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
  },
});