2
票
Accepted
swiper矢印をhoverしたら現れるようにしたい
自己解決しました。
.container-fluid .swiper-container:hover .swiper-button-prev.swiper-button-black {
visibility: visible;
}
.container-fluid .swiper-container:hover .swiper-button-next.swiper-button-black {...
1
票
swiper が動作しません
エラー内容
エラーの内容はHTML内のクラス名が適切でないので、指定のElementが取得できず(undefined)参照エラーになっている、というものです。
Swiperの使用方法
Swiperの公式ドキュメントはご覧になっていますか?
巷のブログを検索するよりずっと信頼性の高いドキュメントです。
基本的には、公式ドキュメントのGetting Started ...
1
票
Accepted
要素幅がそれぞれ異なるスライダーを作りたい
質問文に挙げられたサイトでは、 Swiper というスライダーを用いているようですので、 Swiper を使用します。Swiper では、現在アクティブなスライドには .swiper-slide-active クラスが付与されることを利用し、アクティブなスライド以外を transform プロパティの scale 関数で縮小します。
ちなみに、質問文のサイトでは、ここで transform ...
1
票
swiperで、1つのスライダーに対して複数個のpaginationを生成したい
複数のページネーション出来ます。
単純にはページネーションのdivを複製(<div class="swiper-pagination"></div>)して位置をcssで調整すると増やせます。
複雑なことを表現したいならSwiper APIを使ってカスタマイズすると良いでしょう。
追記、
Swiper API の Eventsコールバックを使って、...
1
票
動的に追加した要素にswiper.jsが効かない
swiperのデモ設置例に従い、HTMLとjsを下記の記述に修正したところ、機能しました。
HTML記述
<div class="detail swiper-container">
<ul class="col-image-slide swiper-wrapper">
<li class="swiper-slide">
<img ...
1
票
動的に追加した要素にswiper.jsが効かない
このエラーは MutationObserver.observe の第一引数がオブジェクトじゃないよ、つまり observe する要素がいないということです。
swiperのobserverはこのサンプルで言う div.detail に対してではなく ul.col-image-slide に対して行なってるようです。
たぶん以下のようなhtmlを用意して、...
Only top scored, non community-wiki answers of a minimum length are eligible