ヘッダー CSS に追加
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<style>
/* <![CDATA[ */
.swiper-container {
width: 100vh;
}
.swiper-pagination-bullet-active {
background: #fff;
}
.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-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 img {
max-width: 100%;
width: 100%;
}
@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 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>
<!-- Add Arrows -->
＋ でウィジェットに追加（動かすためのコード）
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var swiper = new Swiper('.swiper-container', {
effect: "fade",
loop: true,
centeredSlides : true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop:true,
slidesPerView: '1',
});
/*]]>*/
</script>