【スライダー】swiper導入とサンプルコード
もくじ
swiperのサイト
https://swiperjs.com/get-started
cssとjsをサイトからダウンロードする
上記URL内の
アセットをダウンロードする
の部分にURLがあるのでそちらをクリックして
UNPKGへ飛びます。
ダウンロードするのは
swiper-bundle.min.css
swiper-bundle.min.js
の2つです。
右側のView Rawをクリック
コードが現れるので
名前を付けて保存でデスクトップに保存します。
swiper-bundle.min.jsのほうも同じ工程でダウンロードします。
フォルダ内にダウンロードしてきたcssとjsを格納する
jsのフォルダ内に
swiper用のスクリプトを書くための
swiper.jsもついでに作っておいてください。（中身は空で大丈夫です。）
HTMLにcssとjsを読み込むコードを記載する
cssの読み込み
<!-- head内のリセットcssの後に記載する -->
<!-- swiper.css -->
<link rel="stylesheet" href="./css/swiper-bundle.min.css">jsの読み込み
<script src="./js/swiper-bundle.min.js"></script>
<script src="./js/swiper.js"></script>
<!-- /bodyの直前に記載する -->swiperの基本型
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>サンプルコード
シンプルな3枚のスライド
HTMLの方でimgに背景画像を設置することが可能
See the Pen swiper01 by ゆきち@web制作 (@yukichi_web) on CodePen.
下部にクリックできるドットを表示
スライドの自動再生
jsにautoplayのパラメーターを追加することで実装可能
delayはミリ秒で設定
ちなみに 1秒＝1000ミリ秒
下記は2秒ごとに自動的にスライドする
複数のスライドを表示させる
HTMLの方でimgに背景画像を設置することが可能
slidesPerViewで何枚表示させるかを指定
2.5とか小数点でスライドを見切れさせることも可能
spaceBetweenの数値でスライド同士の空白を指定
複数のスライドを表示させる（見切れ）
jsのslidesPerViewの値を小数点で設定
centeredSlidesをtrueに設定して
真ん中のスライドを中心にする。
右側のスライドのみ見切れさせたい場合は
centeredSlidesを削除する。
jsのslidesPerViewの値を4とか偶数に指定する場合は
centeredSlidesを削除する。
（真ん中の2枚を中心にするため。）
See the Pen swiper04 by ゆきち@web制作 (@yukichi_web) on CodePen.
実装例
HTML
<section id="results" class="results">
<div class="results-inner">
<h2 class="fff">Results</h2>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="slide-item-img">
<img src="./img/slide1.png" alt="">
</div>
<div class="slide-item-textarea">
<h3>とかくに人の世は住みにくい。</h3>
<p>どこへ越しても住みにくいと悟った時、詩が生れて 、画が出来る。意地を通せば窮屈だ。</p>
</div>
</div>
<div class="swiper-slide">
<div class="slide-item-img">
<img src="./img/slide1.png" alt="">
</div>
<div class="slide-item-textarea">
<h3>とかくに人の世は住みにくい。</h3>
<p>どこへ越しても住みにくいと悟った時、詩が生れて 、画が出来る。意地を通せば窮屈だ。</p>
</div>
</div>
<div class="swiper-slide">
<div class="slide-item-img">
<img src="./img/slide1.png" alt="">
</div>
<div class="slide-item-textarea">
<h3>とかくに人の世は住みにくい。</h3>
<p>どこへ越しても住みにくいと悟った時、詩が生れて 、画が出来る。意地を通せば窮屈だ。</p>
</div>
</div>
<div class="swiper-slide">
<div class="slide-item-img">
<img src="./img/slide1.png" alt="">
</div>
<div class="slide-item-textarea">
<h3>とかくに人の世は住みにくい。</h3>
<p>どこへ越しても住みにくいと悟った時、詩が生れて 、画が出来る。意地を通せば窮屈だ。</p>
</div>
</div>
<div class="swiper-slide">
<div class="slide-item-img">
<img src="./img/slide1.png" alt="">
</div>
<div class="slide-item-textarea">
<h3>とかくに人の世は住みにくい。</h3>
<p>どこへ越しても住みにくいと悟った時、詩が生れて 、画が出来る。意地を通せば窮屈だ。</p>
</div>
</div>
<div class="swiper-slide">
<div class="slide-item-img">
<img src="./img/slide1.png" alt="">
</div>
<div class="slide-item-textarea">
<h3>とかくに人の世は住みにくい。</h3>
<p>どこへ越しても住みにくいと悟った時、詩が生れて 、画が出来る。意地を通せば窮屈だ。</p>
</div>
</div>
<div class="swiper-slide">
<div class="slide-item-img">
<img src="./img/slide1.png" alt="">
</div>
<div class="slide-item-textarea">
<h3>とかくに人の世は住みにくい。</h3>
<p>どこへ越しても住みにくいと悟った時、詩が生れて 、画が出来る。意地を通せば窮屈だ。</p>
</div>
</div>
</div>
<!-- If we need pagination -->
</div>
<div class="swiper-pagination fade"></div>
<div class="line-button w-inversion fade">
<a href="#">VIEW ALL</a>
</div>
</div>
</section>scss
/* results */
.results {
position: relative;
.results-inner {
background-color: #3e3e3e;
margin-left: 40px;
padding: 55px 0 60px 0;
@include mq(lg) {
margin-left: 0;
}
@include mq(md) {
padding-top: 40px;
padding-bottom: 40px;
}
h2 {
margin-bottom: 56px;
margin-left: 60px;
@include mq(lg) {
text-align: center;
margin-left: 0;
}
@include mq(md) {
margin-left: -18px;
margin-bottom: 33px !important;
}
}
.swiper-container {
max-width: 100%;
height: 100%;
margin-bottom: 36px;
padding: 0 60px;
@include mq(xs) {
padding: 0 17px 2px 17px;
}
.swiper-slide {
max-width: 400px;
align-items: center;
justify-content: center;
@include mq(sm) {
width: 274px;
}
.slide-item-img {
width: 100%;
img {
object-fit: cover;
width: 100%;
height: 100%;
vertical-align: bottom;
}
}
.slide-item-textarea {
background-color: #fff;
padding: 16px;
font-family: $font-family-ja;
width: 100%;
@include mq(md) {
padding: 8px 11px;
}
h3 {
font-weight: bold;
margin-bottom: 11px;
@include mq(md) {
margin-bottom: 0 !important;
}
}
p {
font-size: 16px;
@include mq(md) {
font-size: 12px !important;
line-height: 22px;
}
}
.p2 {
vertical-align: bottom;
}
}
}
}
.swiper-pagination {
position: relative;
text-align: left;
margin-left: 60px;
@include mq(lg) {
text-align: center;
margin-left: 0;
}
@include mq(md) {
margin-top: -14px;
margin-left: 0;
}
span {
border-radius: 50%;
}
.swiper-pagination-bullet {
margin-right: 19px;
background: #fff;
opacity: 1;
width: 12px;
height: 12px;
outline: none;
vertical-align: middle;
}
.swiper-pagination-bullet-active {
background-color: #fff;
border: solid 4px #3e3e3e;
width: 20px;
height: 20px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
box-shadow: 0 0 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px #fff;
-moz-box-shadow: 0 0 0 1px #fff;
}
}
.line-button {
margin-left: 60px;
margin-right: auto;
margin-top: 40px;
width: 289px;
@include mq(lg) {
margin: 0 auto;
margin-top: 22px;
}
@include mq(md) {
width: 84%;
a {
padding: 15px 15px 10px 26px;
}
}
}
}
}js
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
breakpoints: {
768: {
spaceBetween: 40
},
300: {
spaceBetween: 20
}
}
});この記事をシェアする
