はじめまして。質問させていただきます。
前提・実現したいこと
JavaScriptライブラリ「Flickity」でカルーセルを作ろうとしています。
こちらのサイト>ttps://jumpers.jp/のように、
①選択されているコンテンツを2つ以上に増やす。
②選択中スライダーが複数あってもスライドは1つずつしたい。
③非選択中のコンテンツはopacityでぼかしたいです。
こちらのサイトではslickを使っており、slick-activeクラスで選択/非選択を分けているようです。
私のサイトではslcikを使えなかったのでFlickityで同じことを実現したいです。
発生している問題・エラーメッセージ
①はgroupcellsで実現できるかと思ったのですが、②複数コンテンツがまとめてスライドされてしまいます。
参考:https://flickity.metafizzy.co/options.html#groupcells
③はis-selectedクラスで実現できそうなのですが、1つのスライドしか出来ていません。
現在はis-selected(選択されているコンテンツ)をopacity1.0にし、それ以外をopacity0.35でぼかしています。
参考:https://flickity.metafizzy.co/style.html#selected-cell
該当のソースコード
HTML
1<div id="flickity" class="js-flickity" data-flickity-options='{"wrapAround": true, "cellAlign": "center", "contain": true, "pageDots": false, "autoPlay": false}'> 2 3<div class="carousel-cell is-selected"> 4 <a href="/hogehoge/"> 5 <div> 6 <img src="hogehoge.png"> 7 </div> 8 </a> 9</div> 10 11<div class="carousel-cell is-selected"> 12 <a href="/hogehoge/"> 13 <div> 14 <img src="hogehoge.png"> 15 </div> 16 </a> 17</div> 18 19/*以降複数続く*/ 20 21</div>
CSS
1.carousel-cell { 2 opacity:.35; 3 transition-property: opacity; 4 transition-duration: 0.5s; 5 transition-timing-function: ease; 6 transition-delay: 0s; 7} 8.carousel-cell.is-selected { 9 opacity:1.0; 10}
試したこと
「発生している問題・エラーメッセージ」に合わせて記載しています。
補足情報(FW/ツールのバージョンなど)
Flickity v2.2を使用。
wordpressに実装したいと思っています。
あなたの回答
tips
プレビュー