[B! swiper] syun128のブックマーク

syun128 id:syun128

swiperに関するsyun128のブックマーク (2)

Swiper+CSSのみ！ズームアップしながらフェードインで切り替わるスライダーの実装方法 | WEMO
Swiper+CSSのみ！ズームアップしながらフェードインで切り替わるスライダーの実装方法 2019 8/29 jQuery不要の高機能スライダープラグインとして有名な「Swiper」、便利ですよね。実はこのSwiper、表示中のスライドとその前後のスライドに特有のクラスが付いていまして、それを活用してちょろっとCSSを加えるだけで、ズームインしながらフェードで切り替わる効果をつけることができたりもします。今回は、その方法をご紹介していこうと思います。以前別の記事で、外部プラグインもjQueryも使わずに同様のズームアップ&フェードのスライドを自作する方法を紹介したのですが、それよりもかなり簡単に実装できるんじゃないかなと思います。 Swiperの機能をベースにしているので、でページャーとかもそのまま簡単に使えますし、CSSアニメーションの内容を変えるだけでいろんなパターンの効果を実
syun128 2020/06/24
swiper
リンク
Swiper Demo.03
var mySwiper = new Swiper ('.swiper-container', { loop: true, slidesPerView: 2, spaceBetween: 10, centeredSlides : true, pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', breakpoints: { 767: { slidesPerView: 1, spaceBetween: 0 } } })
syun128 2019/05/28
swiper
リンク
1

お知らせ

もっと読む

公式Twitter

@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
@hatebu
最新の人気エントリーの配信

キーボードショートカット一覧

j次のブックマーク

k前のブックマーク

lあとで読む

eコメント一覧を開く

oページを開く

設定を変更しましたx