Now Loading...

スタッフブログ

戻る

当社ブログは社員での持ち回りで掲載しております。
ビジネスだけではなく、社内イベント、プライベートなことを書いておりますので予めご承知おきください。

初心者でも簡単!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」を見るとパラメータがいっぱいあるので、カスタマイズし放題!
やったね!!

以上です。

その他の記事

記事一覧

BitStar流

Contact Us

ご不明な点や、気になったことなど、
お気軽にお問い合わせください。

お問い合わせ

Recruit

新卒採用、中途採用、エンジニア採用、
デザイナー採用を行っています。

採用情報