<div class="main_visual_01 swiper-container">
<div class="main_visual_01--wrapper swiper-wrapper">
<div class="main_visual_01--slide swiper-slide"><img src="{{image}}" alt=""></div>
<div class="main_visual_01--slide swiper-slide"><img src="{{image}}" alt=""></div>
<div class="main_visual_01--slide swiper-slide"><img src="{{image}}" alt=""></div>
</div>
<div class="main_visual_01--pagination swiper-pagination"></div>
</div>
{
"image": "/assets/images/dummy_260_260.png"
}
// =====================================================================================
//
// main_visual_01
//
// =====================================================================================
@use 'scss/global' as g;
// -------------------------------------------------------------------------------------
// 全体枠
// -------------------------------------------------------------------------------------
.main_visual_01 {
width: 100%;
height: 100vw;
@include g.mq(tablet) {
height: calc(100vw / 1.33);
}
@include g.mq(pc) {
height: calc(100vw / 1.78);
}
}
// -------------------------------------------------------------------------------------
// 全体枠 > スライドコンテナ
// -------------------------------------------------------------------------------------
.main_visual_01--wrapper {
}
// -------------------------------------------------------------------------------------
// 全体枠 > スライドコンテナ > スライド単体
// -------------------------------------------------------------------------------------
.main_visual_01--slide {
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
// -------------------------------------------------------------------------------------
// 全体枠 > スライドコンテナ > ページネーション
// -------------------------------------------------------------------------------------
.main_visual_01--pagination {
bottom: 16px !important;
line-height: 8px;
.swiper-pagination-bullet {
width: 12px;
height: 12px;
margin: 0 8px !important;
background: #fff;
opacity: 1;
&.swiper-pagination-bullet-active {
background: g.$color_primary;
}
}
}
// =====================================================================================
//
// main_visual_01
// - このファイルを「src/js/components」に移動の上、呼び出してください
// - 呼び出しの際、引数でRoots名を指定してください
// - 記述例：
// import main_visual_01 from './components/main_visual_01';
// main_visual_01('top_kv');
//
// =====================================================================================
import $ from 'jquery';
import Swiper from 'swiper';
import SwiperCore, { Pagination } from 'swiper/core';
SwiperCore.use([Pagination]);
import 'swiper/swiper-bundle.css';
export default function (rootsName) {
let $container = null;
$(() => {
$container = $('.' + rootsName + '--container');
new Swiper('.' + rootsName, {
pagination: {
el: '.' + rootsName + '--pagination',
clickable: true,
},
});
});
}