[B! *web制作][swiper] highAAAのブックマーク

Swiper Demos

🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

highAAA 2020/03/26

リンク

Swiperでクリック式の複数行サムネイル型スライダーを作る【コピペOK】

こんにちは、もやし（＠moyashi3333）です。フリーランスとして、主にWeb制作・コーディングの仕事をしています。今回は、サイト制作でよく実装される「スライダー」の発展的な内容になります。スライダーを簡単に作ることができるJavaScriptライブラリ「Swiper」。 Swiperは様々なデザイン・レイアウトのスライダーを簡単に作ることができ、公式デモにも多くの例が掲載されています。jQueryに依存していないこともあり、スライダーを作る際はもっぱらSwiperを使用しています。ただ、今回ぼくが作成したかった”複数行のサムネイル式スライダー”が公式デモにはなかったため、記事にしておきます。【完成形デモ】複数行のサムネイル式スライダー See the Pen swiper_thumb by Seimah (@ck3333) on CodePen. 下部サムネイルの画像をクリ

highAAA 2020/03/26

リンク

Swiper.jsのサムネイル画像とスライダーを連動させる | ラーミアラボ

スライダープラグインのSwiper.jsのカスタマイズでちょっと詰まったところがあったのでメモっておきます。ページネーションにサムネイル画像を使うスライドの下にサムネイルが出て、スライドと連動して現在表示している画像に装飾が出るようにしていきます。 ↓こういうの。スライドの下にサムネイル画像が出て連動する感じ。今回は、ページネーション（●が並ぶやつ）に背景画像にスライドの画像を設定する方法で実装できました。とある方が「swiperのスライドを2つ置けば連動しているように見せることができる」と書いていましたが、そうするとサムネイルをクリックした時にその画像をスライドに表示することができないので、今回はサムネイル機能や複数のスライダーを使わずにページネーションを改造していきます！ STEP1 ページネーションをスライド外に置く SwiperのデモのPagenationにある丸をスライド

highAAA 2020/03/26

リンク

【swiper.js】スライダーにサムネイルを表示しカルーセルにカスタム | Puzzle（パズル）

人気のスライダー【swiper.js】にサムネイルを表示させ、更に両サイドが少しづつ見えるカルーセルにカスタムする案件がありましたので、備忘録を兼ねて記載します。サムネイルは、ギャラリーの中央にエフェクトを付けてメインスライダーの中央に表示されている写真が一目で分かるようにカスタムしています。 CDNを記述 https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> ※CDNによってはスライダーが動作しない場合があるかもしれません。上記のCDNではチェック済みです。 HTML スライダーにサムネイルを付けたHTMLを記述します