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 {...
- 340
1
票
Accepted
要素幅がそれぞれ異なるスライダーを作りたい
質問文に挙げられたサイトでは、 Swiper というスライダーを用いているようですので、 Swiper を使用します。Swiper では、現在アクティブなスライドには .swiper-slide-active クラスが付与されることを利用し、アクティブなスライド以外を transform プロパティの scale 関数で縮小します。
ちなみに、質問文のサイトでは、ここで transform ...
- 5,221
1
票
swiperで、1つのスライダーに対して複数個のpaginationを生成したい
複数のページネーション出来ます。
単純にはページネーションのdivを複製(<div class="swiper-pagination"></div>)して位置をcssで調整すると増やせます。
複雑なことを表現したいならSwiper APIを使ってカスタマイズすると良いでしょう。
追記、
Swiper API の Eventsコールバックを使って、...
- 1,837
1
票
動的に追加した要素にswiper.jsが効かない
swiperのデモ設置例に従い、HTMLとjsを下記の記述に修正したところ、機能しました。
HTML記述
<div class="detail swiper-container">
<ul class="col-image-slide swiper-wrapper">
<li class="swiper-slide">
<img ...
- 11
1
票
動的に追加した要素にswiper.jsが効かない
このエラーは MutationObserver.observe の第一引数がオブジェクトじゃないよ、つまり observe する要素がいないということです。
swiperのobserverはこのサンプルで言う div.detail に対してではなく ul.col-image-slide に対して行なってるようです。
たぶん以下のようなhtmlを用意して、...
- 181
Only top scored, non community-wiki answers of a minimum length are eligible