2019.09.02

初心者でも簡単!jQuery不要のスライダー[Swiper]

最近お気に入りのデニムのお尻に穴が開いて傷心気味の私です。
どうもこんにちは。

今日はよく使うスライダープラグインを紹介しようと思います。

jQuery不要のレスポンシブスライダー【Swiper】

Swiper

つかいかた

あらかじめCDNになっているjsとcssかファイルをDLしてhtmlに入れておきましょう。
「GetStarted」のリンクをクリックすると詳しい入れ方が書いてあるぞ!

1. Swiperのサイトを開きます

2. 「Demos」をクリック!

3. いろんなタイプのものが出てくるのでお好みのスライダーの「Source code」リンクをクリック!!

4. githubに遷移するので、htmlをこぴぺ

なんとこれだけ!!!
いいかんじのスライダーが表示されます。

ナビゲーションの見た目を変えたいときはswiper.cssの記述を上書きしちゃいましょう。

他にもスライド時の動きを変えたり、スライド方向を縦にしたりできるようです。

demosにあるもので足りない時は「API」を見るとパラメータがいっぱいあるので、カスタマイズし放題!
やったね!!

以上です。

一覧に戻る