ヘッダー CSS に追加
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<script type="text/javascript">
//<![CDATA[
$(function () {
// 本番ページの時は custom-hook を有効にする
if (window.parent && window.parent === window) {
$('.custom-hook').each(function () {
// widgetで書いたhook要素
var $hook = $(this);
// hookの親要素 (j-htmlCode) をフックの基準とする
var $hookParent = $(this).parent();
var targetPosition = $hook.attr('data-target-position');
// オリジナルのクラス名を追加したい要素
var $target;
// target-positionがnextなら、hookParentの次の要素をtargetにする
if (targetPosition === 'next') {
$target = $hookParent.next();
}
// target-positionがparentなら、hookParentの直近の親要素をtargetにする
else if (targetPosition === 'parent') {
$target = $hookParent.parent();
}
// target-positionがchildなら、hookParentの次の親要素の子要素をtargetにする
else if (targetPosition === 'child') {
$target = $hookParent.next().children();
}
// target-positionがmeなら、hookParentをtargetにする
else if (targetPosition === 'me') {
$target = $hookParent;
}
// hookで設定したclass-nameをtargetのクラス名として追加する
$target.addClass($hook.attr('data-class-name'));
// target-positionがme以外の時、hook要素自体は何もしないので削除する
if (targetPosition !== 'me') {
$hookParent.remove();
}
});
}
});
//]]>
</script>
<style>
/* <![CDATA[ */
.custom-hook {
font-size: 13px;
color: #fff;
padding: 4px;
border: 3px solid #888;
}
.custom-hook::before {
content: attr(data-class-name);
}
.custom-hook[data-target-position="parent"] {
background-color: #74A835;
border-color: #E2EBAE;
}
.custom-hook[data-target-position="next"] {
background-color: #006EA6;
border-color: #A1DAF0;
}
.custom-hook[data-target-position="me"] {
background-color: #F57D0C;
border-color: #FFDE8F;
}
.custom-hook[data-target-position="child"] {
background-color: #C23049;
border-color: #FCBDC8;
}
/* -------------------------------------------------------------------------------- /
ここまでCustom Hook
/ -------------------------------------------------------------------------------- */
.swiper-container {
width: 100%;
}
.swiper-pagination-bullet-active {
background: #fff;
}
.s-three-wrap {
position: relative;
max-width: 100%;
margin: 0 auto;
}
.s-three-text, .s-three-sub, .s-three-button {
position: absolute;
width: 100%;
left: 0;
text-align: center;
color: white;
}
.s-three-text {
top: 20%;
font-size: 5vw;
}
.s-three-sub {
top: 55%;
font-size: 2vw;
}
.s-three-button {
top: 75%;
left: calc( 50% - 156px );
display: block;
width: 312px;
padding: 5px 10px;
box-sizing: border-box;
border: 2px solid #FFF;
color: white !important;
text-align: center;
text-decoration: none;
transition: all .25s ease;
}
.s-three-button:hover {
background: white;
color: #1b1b1b !important;
}
.swiper-slide img{
width: 100%;
}
.swiper-slide-active .s-three-text {
animation: fade 1.75s ease 0s 1 normal;
}
.swiper-slide-active .s-three-sub {
animation: fade 1.75s ease 0s 1 normal;
}
.swiper-slide-active .s-three-button {
animation: fade 1.75s ease 0s 1 normal;
}
.swiper-slide-next{
opacity: 0.5;
}
.swiper-slide-prev{
opacity: 0.5;
}
#thumbs {
height: 10%;
box-sizing: border-box;
padding: 10px 0;
}
#thumbs .swiper-slide {
width: 33%;
height: auto;
opacity: 0.3;
cursor: grab;
}
#thumbs .swiper-slide:active {
cursor: grabbing;
}
#thumbs .swiper-slide-active {
opacity: 1;
}
@keyframes slideTextFade {
0%, 25% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.toggle-column {
display: flex;
align-items: stretch;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.toggle-column div.flexmodul, div.n {
padding: 0 !important;
}
/*]]>*/
</style>
＋ でウィジェットに追加
<!-- Swiper -->
<div id="slider" class="swiper-container toggle-column">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="s-three-wrap">
<img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s56f4dd03397de957/image/i65952ee16378b431/version/1603950960/image.jpg" /> <span class=
"s-three-text typewriter-text">slide 1</span> <span class="s-three-sub">sub text 1.</span> <a href="" class="s-three-button">button 1</a>
</div>
</div>
<div class="swiper-slide">
<div class="s-three-wrap">
<img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s56f4dd03397de957/image/ib9f852b5ca129ffe/version/1603950972/image.jpg" /> <span class="s-three-text">slide 2</span>
<span class="s-three-sub">sub text 2.</span> <a href="" class="s-three-button">button 2</a>
</div>
</div>
<div class="swiper-slide">
<div class="s-three-wrap">
<img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s56f4dd03397de957/image/i30bb782b1a4daff7/version/1603950978/image.jpg" /> <span class="s-three-text">slide 3</span>
<span class="s-three-sub">sub text 3.</span> <a href="" class="s-three-button">button 3</a>
</div>
</div>
</div>
<div class="swiper-pagination">
</div>
<div class="swiper-button-prev swiper-button-white">
</div>
<div class="swiper-button-next swiper-button-white">
</div>
</div>
<div id="thumbs" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s56f4dd03397de957/image/i65952ee16378b431/version/1603950960/image.jpg" />
</div>
<div class="swiper-slide">
<img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s56f4dd03397de957/image/ib9f852b5ca129ffe/version/1603950972/image.jpg" />
</div>
<div class="swiper-slide">
<img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s56f4dd03397de957/image/i30bb782b1a4daff7/version/1603950978/image.jpg" />
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var slider = new Swiper ('#slider', {
loop: true,
loopedSlides: 3,
centeredSlides : true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
breakpoints: {
640: {
slidesPerView: 1,
},
980: {
slidesPerView: 1.5,
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
var thumbs = new Swiper('#thumbs', {
centeredSlides: true,
spaceBetween: 10,
loop: true,
loopedSlides: 3,
slidesPerView: 3,
touchRatio: 0.2,
slideToClickedSlide: true
});
slider.controller.control = thumbs;
thumbs.controller.control = slider;
/*]]>*/
</script>