swiper.jsのオプションslidesPerViewにautoを指定して、独自で横幅を設定します。htmlのコードは以下の通りです。ナビゲーションボタンはsvgで記述しています。
<div class="container">
<div class="swiper-container js-slider">
<ul class="swiper-wrapper">
<li class="swiper-slide c-slider-item">
<a href="#" class="c-slider-item-link">
<figure class="c-slider-item-photo">
<span class="c-photo-bg" style="background-image:url(images/swiper01.jpg)"></span>
</figure>
<div class="c-slider-list-txt">
<h3 class="c-slider-list-ttl">タイトル01</h3>
<p>ダミーテキストダミーテキストダミーテキスト</p>
</div>
</a>
</li>
<li class="swiper-slide c-slider-item">
<a href="#" class="c-slider-item-link">
<figure class="c-slider-item-photo">
<span class="c-photo-bg" style="background-image:url(images/swiper02.jpg)"></span>
</figure>
<div class="c-slider-list-txt">
<h3 class="c-slider-list-ttl">タイトル02</h3>
<p>ダミーテキストダミーテキストダミーテキスト</p>
</div>
</a>
</li>
<li class="swiper-slide c-slider-item">
<a href="#" class="c-slider-item-link">
<figure class="c-slider-item-photo">
<span class="c-photo-bg" style="background-image:url(images/swiper03.jpg)"></span>
</figure>
<div class="c-slider-list-txt">
<h3 class="c-slider-list-ttl">タイトル03</h3>
<p>ダミーテキストダミーテキストダミーテキスト</p>
</div>
</a>
</li>
</ul>
<div class="c-slider-controler">
<div class="c-slider-pagination js-swiper-pagination"></div>
<div class="c-slider-controler-container">
<div class="c-slider-button-prev js-swiper-button-prev">
<svg class="c-btn-arrow" xmlns="http://www.w3.org/2000/svg" width="131px" height="28px" viewBox="0 0 131 28">
<path class="c-btn-arrow-parts" fill-rule="evenodd" d="M130.795,25.540 L108.375,0.537 L107.934,2.580 L128.796,26.006 L0.795,26.006 L0.795,28.007 L130.795,28.007 L130.795,25.540 Z"/>
</svg>
</div>
</div>
<div class="c-slider-controler-container">
<div class="c-slider-button-next js-swiper-button-next">
<svg class="c-btn-arrow" xmlns="http://www.w3.org/2000/svg" width="131px" height="28px" viewBox="0 0 131 28">
<path class="c-btn-arrow-parts" fill-rule="evenodd" d="M130.795,25.540 L108.375,0.537 L107.934,2.580 L128.796,26.006 L0.795,26.006 L0.795,28.007 L130.795,28.007 L130.795,25.540 Z"/>
</svg>
</div>
</div>
</div>
</div>
</div>CSSのコードです。ブラウザ幅1199px以下の場合、1つのスライダーの横幅はwidth: 84.375%を指定します。
.container {
margin-left: 160px;
text-align: center;
}
@media screen and (max-width: 1365px) {
.container {
margin-left: 114px;
}
}
@media screen and (max-width: 1199px) {
.container {
margin-left: 0;
}
}
@media screen and (max-width: 1199px) {
.c-slider-item {
width: 84.375%;
}
}
.c-slider-item-link {
display: block;
padding-bottom: 50px;
}
@media screen and (max-width: 767px) {
.c-slider-item-link {
padding-bottom: 30px;
}
}
.c-slider-item-photo {
position: relative;
overflow: hidden;
margin-bottom: 30px;
padding-bottom: 60%;
}
.c-photo-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: center;
background-size: cover;
transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1);
}
@media screen and (min-width: 1199px) {
a:hover .c-photo-bg {
transform: scale(1.1);
}
}
.c-slider-list-txt {
padding: 0 28px;
text-align: left;
}
.c-slider-list-ttl {
margin-bottom: 30px;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size: 2rem;
font-weight: 600;
line-height: 1.2;
}
.c-slider-controler {
position: relative;
display: inline-block;
margin: 0 auto;
}
.c-slider-pagination {
display: flex;
justify-content: center;
align-items: center;
}
.c-slider-pagination .swiper-pagination-bullet-active {
background: #fff;
}
.c-slider-pagination .swiper-pagination-bullet {
margin: 0 4px;
}
.c-slider-controler-container {
position: absolute;
top: 0;
left: 0;
transform: translateX(-130%);
}
.c-slider-controler-container:last-child {
right: 0;
left: auto;
transform: translateX(130%);
}
.c-slider-button-prev {
width: 35px;
height: 28px;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1), opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);
transform: scale(-1, 1) translateX(0);
cursor: pointer;
}
.c-slider-button-next {
width: 35px;
height: 28px;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1), opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);
cursor: pointer;
}
@media screen and (min-width: 1199px) {
.c-slider-button-prev:hover {
opacity: .6;
transform: scale(-1, 1) translateX(15%);
}
.c-slider-button-next:hover {
opacity: .6;
transform: translateX(15%);
}
}
.c-btn-arrow {
width: 100%;
margin: 0;
transform: translateY(-50%);
}
.c-btn-arrow-parts {
fill: #fff;
}JavaScriptのコードです。1つのスライダーの横幅はオプションのslidesPerViewによって自動的に決まりますが、slidesPerView: 'auto'を指定した場合横幅は指定されません。CSSで独自に設定した横幅が適用可能です。
今回はブラウザ幅が1199px以下の場合slidesPerView: 'auto'を指定し、CSSのwidth: 84.375%を適用します。ただし、ブラウザ幅1200px以上の場合slidesPerView: 3のため、ブラウザを横幅1200px以上から1199px以下にリサイズした場合、slidesPerView: 'auto'の指定が有効になりません。再度ページを読み込むと適用されます。
var swiper01 = new Swiper('.js-slider', {
loop: true,
slidesPerView: 'auto',
pagination: {
el: '.js-swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.js-swiper-button-next',
prevEl: '.js-swiper-button-prev'
},
autoplay: {
delay: 5000,
},
breakpoints: {
1200: {
slidesPerView: 3,
}
}
});
