<div class="main_visual_02 swiper-container">
<div class="main_visual_02--wrapper swiper-wrapper">
<div class="main_visual_02--slide swiper-slide"><img src="{{image}}" alt=""></div>
<div class="main_visual_02--slide swiper-slide"><img src="{{image}}" alt=""></div>
<div class="main_visual_02--slide swiper-slide"><img src="{{image}}" alt=""></div>
</div>
<div class="main_visual_02--pagination swiper-pagination"></div>
</div>
{
"image": "/assets/images/dummy_260_260.png"
}
// =====================================================================================
//
// main_visual_02
//
// =====================================================================================
@use 'scss/global' as g;
// -------------------------------------------------------------------------------------
// 全体枠
// -------------------------------------------------------------------------------------
.main_visual_02 {
width: 100%;
height: 100vh;
}
// -------------------------------------------------------------------------------------
// 全体枠 > スライドコンテナ
// -------------------------------------------------------------------------------------
.main_visual_02--wrapper {
}
// -------------------------------------------------------------------------------------
// 全体枠 > スライドコンテナ > スライド単体
// -------------------------------------------------------------------------------------
.main_visual_02--slide {
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
// -------------------------------------------------------------------------------------
// 全体枠 > スライドコンテナ > ページネーション
// -------------------------------------------------------------------------------------
.main_visual_02--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_02
// - このファイルを「src/js/components」に移動して使用してください
// - 呼び出しの際、引数でRoots名を指定してください
// - 記述例：
// import main_visual_02 from './components/main_visual_02';
// main_visual_02('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;
function onResize() {
$container.css({
height: $(window).innerHeight() + 'px',
});
}
$(() => {
$container = $('.' + rootsName);
new Swiper('.' + rootsName, {
pagination: {
el: '.' + rootsName + '--pagination',
clickable: true,
},
});
$(window).on('resize.' + rootsName, onResize);
onResize();
});
}