画像も文字もスライド可能！Swiper.jsでコンテンツスライダーを簡単に！

ホーム
jQuery, Web Design
画像も文字もスライド可能！Swiper.jsでコンテンツスライダーを簡単に！

2019.09.29

画像も文字もスライド可能！Swiper.jsでコンテンツスライダーを簡単に！

皆さんこんにちは、mayukouです。
先日、スライダーに便利で簡単なスクリプトを見つけました。
最近は、１カラムのランディングページが主流になって来ましたが、そんなデザインにもふさわしい、コンテンツスライダーです。
画像だけスライドするプラグインは、たくさん出ていますが、
文字やボタンなどのHTMLタグもスライドできるという素敵なプラグインです。
それでは使い方をお伝えしていきます。

スポンサードリンク

デモをご紹介

デモはこちら。デモでは、わかりやすいようにコンテンツの背景色を分けています。
デモ

使い方（記述方法）

Swiper.jsの公式サイトから、ファイルを一式ダウンロードします。Githubのページに飛びますので、一番新しいZipファイルをダウンロードしましょう。Source Codeと書かれたリンクをクリックします。

公式サイトからダウンロード

スクリプトとCSSを読み込み

＜head＞内と＜body＞の閉じタグ直前に以下のCSSとスクリプトを読み込む記述をします。このとき、記述するパスは自身のパスとリンクさせてください。

<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>

<head>

...

</head>

<body>

...

</body>

HTMLの記述

<!-- Slider main container -->
<div class="swiper-container">
    <!-- スライダー全体を包む -->
    <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>
    <!-- ページネーションが必要な場合以下を記述 -->
    <div class="swiper-pagination"></div>
<!-- ページネーションここまで -->

    <!-- ナビゲーションボタンが必要な場合以下を記述 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
<!-- ナビゲーションボタンここまで -->

    <!-- スクロールバーが必要な場合以下を記述 -->
    <div class="swiper-scrollbar"></div>
<!-- スクロールバーここまで -->
</div>

<div class="swiper-slide">Slide 1</div>

<div class="swiper-slide">Slide 2</div>

<div class="swiper-slide">Slide 3</div>

...

</div>

</div>

CSSの記述

CSSでスライダーのサイズを設定してください。

.swiper-container {
    width: 600px;
    height: 300px;
}

.swiper-container {

width: 600px;

height: 300px;

}

スクリプトの記述

body閉じタグの直下に以下を記述してください。こちらは、色々なスライダーの設定になります。

<script>
 var swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  loop: true,
});
</script>

var swiper = new Swiper('.swiper-container', {

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

loop: true,

});

</script>

こちらの記述は、左右に矢印が付く、シンプルなスライダーになります。

最後に

いかがでしたか？とても便利なので、ぜひ、ご活用ください。

投稿者プロフィール

mayukou: Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら

プロフィール

mayukou

こんにちは！mayukouと申します。福岡市でハーブティー専門店のデザイナーをしています。デザイナー10年目。海外で活動できる一流デザイナーを目指しています。洋楽好き（特にR&B）。Mac&iPhoneユーザー。AB型です。自分の学んだこと、役に立つことを発信していきたいと思います。よろしくおねがいします。