デベロッパーツール（コンソール）を表示して、Network タブを開きページを再読み込みすると、この例では data-load-prev-next="true" を指定しているので、swiper_img_01.jpg、swiper_img_02.jpg、swiper_img_08.jpg が先読み込みされていて、スライドが変わるたびに次の画像が読み込まれているのが確認できます。
<div class="swiper-container">
<div class="swiper-container" data-autoplay="3000" data-loop="true" data-speed="500" data-load-prev-next="true" data-stop-at-first-slide="true">
<div class="swiper-slide">
<!-- 背景画像を指定する要素 swiper-lazy と bg-slide-image を指定-->
<div class="swiper-lazy bg-slide-image" data-background="images/swiper_img_01.jpg">
<div class="swiper-lazy-preloader"></div><!-- プリローダー -->
<div class="slide-content">
<p>Lorem ipsum dolor sit amet, consectetur</p>
<div class="caption" data-rellax-speed="7">caption 01</div>
</div>
</div>
</div>
<div class="swiper-slide">
<!-- 背景画像を指定する要素 swiper-lazy と bg-slide-image を指定-->
<div class="swiper-lazy bg-slide-image" data-background="images/swiper_img_02.jpg">
<div class="swiper-lazy-preloader"></div>
<div class="slide-content">
<p>Lorem ipsum dolor sit amet, consectetur</p>
<div class="caption" data-rellax-speed="7">caption 02</div>
</div>
</div>
</div>
・・・中略・・・
<div class="swiper-slide">
<!-- 背景画像を指定する要素 swiper-lazy と bg-slide-image を指定-->
<div class="swiper-lazy bg-slide-image" data-background="images/swiper_img_08.jpg">
<div class="swiper-lazy-preloader"></div>
<div class="slide-content">
<p>Lorem ipsum dolor sit amet, consectetur</p>
<div class="caption" data-rellax-speed="7">caption 08</div>
</div>
</div>
</div>
</div>
<!-- end of .swiper-wrapper -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- end of .swiper-container -->
.swiper-container {
max-width: 960px;
}
/* 背景画像のスタイル */
.bg-slide-image {
width: 100%;
height: 60vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
/*background-image は HTML の data-background 属性で指定 */
}
/* 各スライドと共に表示する文字 */
.swiper-slide .slide-content p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFF;
text-shadow: .5px .5px rgba(0,0,0,0.6);
margin: 0;
padding: 3px 8px;
font-size: 18px;
background-color:rgba(0,0,0,.3);
}
/* 各スライドと共に表示するキャプション */
.swiper-slide .slide-content .caption {
position: absolute;
bottom: 30px;
right: 30px;
color: #FFF;
font-size: 16px;
background-color: rgba(0,127,127,0.5);
padding: 3px 8px;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
background: #fff;
opacity: 0.5;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #fff;
}
//swiper-container クラスを指定した要素を全て取得
const sliderElems = document.getElementsByClassName('swiper-container');
//取得した要素が1以上であればそれぞれの要素に対して以下を実行
if(sliderElems && sliderElems.length > 0) {
for ( let element of sliderElems ) {
//data 属性の値をパラメータの値として使用する変数に格納
let elementSpeed = element.getAttribute('data-speed'),
elementDirection = element.getAttribute('data-direction'),
elementAutoPlay = element.getAttribute('data-autoplay'),
elementLoop = element.getAttribute('data-loop'),
elementEffect = element.getAttribute('data-effect'),
elementSlidesPerView = element.getAttribute('data-slides-per-view'),
elementSlidesPerGroup = element.getAttribute('data-slides-per-group'),
elementSpaceBetween = element.getAttribute('data-space-between'),
elementCenteredSlides = element.getAttribute('data-centered-slides'),
elementLoadPrevNext = element.getAttribute('data-load-prev-next'),
elementStopAtFirstSlide = element.getAttribute('data-stop-at-first-slide'),
elementLazyLoad = false,
slidePreloadImages = true;
//.swiper-lazy（遅延読み込み）を指定している要素
let swiperLazyElems = element.querySelectorAll('.swiper-lazy');
if(swiperLazyElems && swiperLazyElems.length !==0 ) {
//.swiper-lazy を指定している要素が存在すれば true に変更
elementLazyLoad = true;
}
//lazyload が指定されている（.swiper-lazy を指定した要素がある）場合
if(elementLazyLoad) {
//data-load-prev-next の値を文字列から真偽値に変換
if (elementLoadPrevNext === 'true') {
elementLoadPrevNext = true;
} else {
elementLoadPrevNext = false;
}
//elementLoadPrevNext が指定されていれば前後の画像を先に読み込んでおく
elementLazyLoad = elementLoadPrevNext ? { loadPrevNext: true,} : true;
//画像全体の先読みは無効に
slidePreloadImages = false;
}
//data 属性が設定されていない場合は初期値（デフォルト）を設定及び型を変換
if (!elementSpeed) {
elementSpeed = 300;
}
if (!elementDirection) {
elementDirection = 'horizontal';
}
//data-autoplay が設定されていれば値を数値に変換し、設定されていなければ大きな値を設定
if (elementAutoPlay) {
elementAutoPlay = parseInt(elementAutoPlay);
} else {
elementAutoPlay = 999999999;
}
//真偽値の場合は文字列から真偽値に変換
if (elementLoop === 'true') {
elementLoop = true;
} else {
elementLoop = false;
}
if (!elementEffect) {
elementEffect = 'slide';
}
if (!elementSlidesPerView) {
elementSlidesPerView = 1;
}
if (elementCenteredSlides === 'true') {
elementCenteredSlides = true;
} else {
elementCenteredSlides = false;
}
if (!elementSlidesPerGroup) {
elementSlidesPerGroup = 1;
}
if (!elementSpaceBetween) {
elementSpaceBetween = 0;
}
//上記パラメータを使って Swiper を初期化
let mySwiper = new Swiper(element, {
direction: elementDirection,
speed: parseInt(elementSpeed),
autoplay: {
delay: elementAutoPlay
},
loop: elementLoop,
effect: elementEffect,
slidesPerView: parseFloat(elementSlidesPerView),
centeredSlides: elementCenteredSlides,
slidesPerGroup: parseInt(elementSlidesPerGroup),
spaceBetween: parseInt(elementSpaceBetween),
//画像の先読み（遅延読み込みの場合は false）
preloadImages: slidePreloadImages,
//遅延読み込み
lazy: elementLazyLoad,
pagination: {
el: '.swiper-pagination', //ページネーションの要素
type: 'bullets', //ページネーションの種類
clickable: true, //クリックに反応させる
},
navigation: {
nextEl: '.swiper-button-next', //「次へボタン」要素の指定
prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
},
scrollbar: {
el: '.swiper-scrollbar', //要素の指定
},
});
if (elementStopAtFirstSlide === 'true') {
elementStopAtFirstSlide = true;
} else {
elementStopAtFirstSlide = false;
}
//自動再生とループモードが有効で data-stop-at-first-slide が true なら最初のスライドに戻ったら停止
//ループモード でない場合は、最後のスライドで停止
if(elementAutoPlay !== 999999999 && elementStopAtFirstSlide) {
mySwiper.on('reachEnd', function () {
this.autoplay.stop(); //自動再生を停止
});
}
}
}