【WEBサイト制作】BXスライダー・Swiperスライダー設定

BXスライダー

jQuery Content Slider | Responsive jQuery Slider | bxSlider

Add a respsonsive image slider to any website.

こちらのページを参照！
（とてもわかりやすいページです！）

【jQuery】超簡単jQueryスライダー［bxSlider］の使い方。

今日紹介する jQuery プラグイン［bxSlider］はレスポンシヴ・デザインにも対応した高性能なコンテンツ・スライダーです。まずはサンプルをご覧ください。jQuery bxSlider：サンプル・デモ特徴は初心者で...

MV部分HTML

<div class="slider">
<div class="fst">
<p>SLEEPING IS A<br>
PEACEFUL TIME</p>
<p>「眠り」という人間生活において最も重要なやすらぎの時間を、より豊かに、より快適に</p>
</div>
<div class="sec">
<p>HERE IS THE MESSAGE OF <br>
THE SECOND SLIDER</p>
<p>ここにスライダー２枚目のメッセージが入ります。ここにスライダー２枚目のメッセージ</p>
</div>
<div class="thd">
<p>HERE IS THE MESSAGE OF <br>
THE SECOND SLIDER</p>
<p>ここにスライダー２枚目のメッセージが入ります。ここにスライダー２枚目のメッセージ。</p>
</div>
</div>
<!--/.slider-->

変更したCSS

/*Slider */
.bx-wrapper {
border: 0;
margin-bottom: 0;
/* height: 1150px;*/
max-height: 1000px;
}

@media screen and (max-width:767px) {
.bx-wrapper {
height: 750px;
}
}
/*仮でarrowミュート*/
.bx-wrapper .bx-prev, .bx-wrapper .bx-next {
background: none;
}

Swiperスライダー

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

Swiper 公式サイト：https://swiperjs.com/
Swiper GitHub ページ：https://github.com/nolimits4web/swiper
Swiper ダウンロードページ：https://github.com/nolimits4web/swiper/releases
Swiper 変更履歴：Change Log

こちらのページを参照！
（とてもわかりやすいページです！）

jQuery 不要スライダープラグイン Swiper の使い方

jQuery 不要でレスポンシブ及びタッチデバイス（スマホやタブレット）対応のスライダープラグイン Swiper（バージョン7 / 8）の基本的な設定方法や使い方についての覚書（解説）です

HEADにコピペ

<!--ループスライダー--> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>

HTML

<section id="" class="content-box online-shop container"> 

<div class="swiper-container">

 <!-- 全スライドをまとめるラッパー --> 

<div class="swiper-wrapper">

 <!-- 各スライド --> 

<div class="swiper-slide"><img src="img/front-page/shop_01.jpg" alt=""/></div> 

<div class="swiper-slide"><img src="img/front-page/shop_02.jpg" alt=""/></div> 

<div class="swiper-slide"><img src="img/front-page/shop_03.jpg" alt=""/></div> 

<div class="swiper-slide"><img src="img/front-page/shop_04.jpg" alt=""/></div> 

<div class="swiper-slide"><img src="img/front-page/shop_05.jpg" alt=""/></div> 

</div> 

<!-- ページネーションを表示する場合 --> 

<div class="swiper-pagination"></div> 

<!-- 前後スライドへのナビゲーションボタン(矢印)を表示する場合 --> 

<div class="swiper-button-prev"></div>

 <div class="swiper-button-next">

</div> 

</div> 

</section>

<script>
var mySwiper = new Swiper ('.swiper-container', {
// オプションパラメータ(一部のみ抜粋)
loop: true, // 最後のスライドまで到達した場合、最初に戻らずに続けてスライド可能にするか。
speed: 600, // スライドが切り替わるトランジション時間(ミリ秒)。
slidesPerView: 4, // 何枚のスライドを表示するか
spaceBetween: 10, // スライド間の余白サイズ(ピクセル)
direction: 'horizontal', // スライド方向。 'horizontal'(水平) か 'vertical'(垂直)。effectオプションが 'slide' 以外は無効。
effect: 'slide', // "slide", "fade"(フェード), "cube"(キューブ回転), "coverflow"(画像を斜めに) または "flip"(画像が裏返しに切り替わる)

// スライダーの自動再生
// autoplay: true 　のみなら既定値での自動再生
autoplay: {
delay: 1000, // スライドが切り替わるまでの表示時間(ミリ秒)
stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか
disableOnInteraction: false // ユーザーのスワイプ操作を検出したら自動再生を中止するか
},

// レスポンシブ化条件
breakpoints: {
// 980ピクセル幅以下になったら
980: {
slidesPerView: 3,
spaceBetween: 30
},
// 640ピクセル幅以下になったら
640: {
slidesPerView: 2,
spaceBetween: 20
}
},

// ページネーションを表示する場合
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},

// 前後スライドへのナビゲーションを表示する場合
navigation: {
nextEl: '.swiper-button-next', // 次のスライドボタンのセレクタ
prevEl: '.swiper-button-prev', // 前のスライドボタンのセレクタ
},
});
</script>