これは旧バージョンのswiperのオプションについて書いた記事です。最新版(6系)のオプションについてはこちらにあります
ちょっと機会があって、swiper.js使ったからその時のメモ。
本当は単語ごとにスムーススクロールとか設置した方がいいんだろうけど、めんどく(
ブラウザの検索機能を使ってくだしあ。
ちょくちょく間違ってる可能性があるから、間違ってる箇所があったら教えていただければ気まぐれで修正します。
あと、例が欲しいところがあれば気まぐれで追記します。
これは旧バージョンのswiperのオプションについて書いた記事です。最新版(6系)のオプションについてはこちらにあります
swiper.jsってなんぞ?
簡単に言うと、スライダー系のJS。オプションが多く、個人的にはbxsliderとslickとflexと合わせて神スライダー四天王として認識してる。
このswiper.jsのメリットデメリットはこんな感じ
メリット
- オプションが非常に多い。前に記事したbxsliderより多い。コールバック関数(タッチ、クリックなどをした時に関数を実行するもの)の数が特に多い。
- jQueryが不要。なんだかんだプラグインの多くはjQueryが必要になることが多いけど、これは不要。サイトの仕様によっては非常にありがたい。
- スマホにも対応。タッチ、スワイプ、タップにも反応してくれる。
- 特定のボタンを押した時に、特定のスライドに移動するとかそういうのが非常に簡単にできる。
デメリット
- 最新版のサポートはモダンブラウザのみ。IE8とか言われると、少し厳しい。旧バージョンなら大丈夫らしい(これは試してないから、聞いた話程度)
- 少しだけ実装に手間がかかる。というか、bxsliderとかが簡単すぎるんだけど。それよりは少し手間がかかる程度。
- 容量が四天王の中で最大。他より30KBくらい大きい。まあ、誤差程度ではあるけど一応。
最新版のサポートがモダンブラウザ限定という部分が結構痛いけど、それさえクリアすれば非常に万能で使いやすいsliderだと思う。
実装について
大体ここに書いてある。
http://idangero.us/swiper/api/
ざっくり説明すると、
1、公式ページからjs及びcssをダウンロード。それぞれを設置。swiper.js(swiper.min.js)についてはheadタグではなく、/bodyの上に置く。
2、swiperを実装したいブロック(divタグ)に.swiper-containerをつける。
3、div.swiper-containerにdiv.swiper-wrapperを。
4、さらにその中にdiv.swiper-slideを。
5、swipeを実装するための記述とか、オプションを記述するために使うjsを作成する。このjsも/bodyの上に設置する。
これで基本は完成。こんなん。
<!-- Slider main container --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">ここに1つ目のスライド!</div> <div class="swiper-slide">ここに2つ目のスライド</div> <div class="swiper-slide">ここに3つ目のスライド</div> </div> </div>
var swiper; $(window).load(function() { swiper = new Swiper('.swiper-container', { // この中にオプションを記述する。 }); });
あとは、下(縦スライドの場合は右)にpagination(pagination)をつける場合はdiv.swiper-paginationを、
次へボタン、前へボタンをつけたい場合はdiv.swiper-button-prev、div.swiper-button-nextを、
スクロールバーをつけるならdiv.swiper-scrollbarをdiv.swiper-containerの中に入れる。
次へボタンとかは普通に実装するとデフォルトのデザインになっちゃうから、注意。
オプションについて
ここからが本題。このオプションを使わないとわざわざswiper.jsを使う理由ないからね!
オプションのつけ方はこんな感じ
var swiper; $(window).load(function() { swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, direction: 'vertical', touchAngle: 90, onTouchStart: function() { alert("touchstart!!"); } }); });
コールバック(例で言うと、onTouchStart)はfunction(){}を書いて、その中に処理したい内容を記述する。
それ以外は数値とか、指定された文字列を入れるって感じ。
コールバックに関しては、簡単なやつなら直接書いてもいいけど、長い処理の場合は別でfunction用意しておいて、それを実行する
function start_alert() { alert("touchstart!!"); } // 中略 onTouchStart: function() { start_alert(); }
こんな感じで書いた方がいいと思う。その方がわかりやすいし。
以下、オプションの流し込み
基本オプション
initialSlide
数。
一番最初に表示させるスライドの番号(0スタート)。
デフォルトでは0。
direction
文字列。
スライドの方向。横(horizontal)か縦(vertical)か。
デフォルトでは横(horizontal)。
speed
数。
スライドの速度。数字が大きければ遅く、小さければ早くなる。ミリ秒。
デフォルトでは300。
setWrapperSize
真偽。
.swiper-wrapperに全てのスライドの合計の幅(もしくは高さ)がpxでセットされる。width300pxのスライドが5枚の場合、.swiper-wrapperのwidthは1500pxになる。
デフォルトではfalse。
virtualTranslate
真偽。
trueにすると.swiper-wrapperのtransformが削除される。普通にスッと移動するスライドじゃなくて、凝ったアニメーションでの遷移をしたい場合に使用する。CSS・JSでのアニメーションの知識が必要。
デフォルトではfalse。
width
数。
スライドの幅を指定する。当たり前だけど、これを指定するとレスポンシブの機能がなくなる。
デフォルトでは100%みたいな感じ(厳密には少し違うけど)。
height
数。
スライドの高さを指定する。当たり前だけど、これを指定するとレスポンシブの機能がなくなる。
デフォルトではautoみたいな感じ(厳密には少し違うけど)。
autoHeight
真偽。
trueにすると、.swiper-wrapperの高さがslideの中身ぴったりになる。それぞれ中身の高さが違う場合、スライドするたびに、次のスライドの高さに自動で数字が変わる。
デフォルトではfalse。
roundLengths
真偽。
trueにすると、スライドの幅や高さが決めてあったら、中のテキストや画像をぼやけないように調整してくれる。通常はfalseで、ぼやける不具合が出た時に初めてtrueにするってした方がいいかも。あと、なんか不具合起きてる時になんとなくつけてみるとうまくいく時があるらしい(この使い方はあまりお勧めできないけれど)。
デフォルトではfalse。
nested
真偽。
trueにすると、入れ子になったSwiper(つまり、Swiperの中でさらにSwiperを使っている時)のタッチイベントが正常に取れるようになる。
デフォルトではfalse。
自動再生関連
autoplay
数。
これを設定すると、何ミリ秒ごとに遷移するかを設定できる。このパラメータが設定されていない場合、自動再生自体がされない。
個別にスライドのミリ秒を設定したい場合、div.swiper-slideにdata-swiper-autoplayを追加する。
<div class="swiper-slide" data-swiper-autoplay="2000">
デフォルトでは設定されていない状態。
autoplayStopOnLast
真偽。
trueにすると、最後のスライドになった時に自動再生が停止する。後述する、loopのオプションを設定している場合は効かない。
デフォルトではfalse。
autoplayDisableOnInteraction
真偽。
trueだと、ユーザーがスライドを操作した後自動再生が停止する。falseだとユーザーが操作しても自動再生がされっぱなし。
デフォルトではtrue。
進捗
watchSlidesProgress
真偽。
進捗状態を計算するオプション、らしい。でもその数字がどこで取れるのかわからない。自分の中では、後述するwatchSlidesVisibilityのオプションの前提オプションって認識。
デフォルトではfalse。
watchSlidesVisibility
真偽。
watchSlidesProgressがtrue前提。trueにすると画面に表示されているスライドにswiper-slide-visibleのクラスが追加される。複数表示されている場合は、そのすべてにこのクラスがつく。
freeMode
freeMode
真偽。
これをtrueにすると、スワイプした際にスライドぴったりに止まらなくなる。固定位置がなくなるというかなんというか。
デフォルトではfalse。
freeModeMomentum
真偽。
freeModeがtrue前提。trueだと、FreeModeでのスワイプ時に慣性スクロールみたいなのが働くようになる。
デフォルトではtrue。
freeModeMomentumRatio
数。
freeModeMomentumがtrue前提。数字を大きくすれば、慣性スクロール的なやつの距離を延ばせる。
デフォルトでは1。
freeModeMomentumVelocityRatio
数。
freeModeMomentumがtrue前提。数字を大きくすれば、慣性スクロール的なやつの速度を早くできる。
デフォルトでは1。
freeModeMomentumBounce
真偽。
freeModeMomentumがtrue前提。trueだと一番最後のスライドに行った時にバウンスする感じのアニメーションが起きる。
デフォルトではtrue。
freeModeMinimumVelocity
数。
freeModeMomentumがtrue前提。freeModeを開始するトリガーとなるスワイプの最小速度を設定できる。
デフォルトでは0.02。
freeModeSticky
真偽。
freeModeがtrue前提。trueだと、freeModeで慣性が切れる着地点に対して一番近い固定位置に収まるようになる。スナップが有効になる。
デフォルトではfalse。
効果
effect
文字列
“slide”, “fade”, “cube”, “coverflow” もしくは “flip”
スライドの仕方を選択できる。スライドにするか、フェードにするか、箱がくるっと回転したようなものにするか、横から半回転する感じでやってくるものにするか、中心で回転する感じにするか。基本、slideもしくはfadeで良いと思う。
デフォルトではslide。
fade
object。
effectがfade前提。
デフォルトでは
fade: { crossFade: false }
これを書くとクロスフェードをオンオフにできる(クロスフェードは、前のスライドのフェードアウトと次のスライドのフェードインを同時に行うもの)。
cube
effectがcube前提。
デフォルトでは
cube: { slideShadows: true, shadow: true, shadowOffset: 10000000, shadowScale: 0.94 }
見てわかる通り、影をつけるかつけないか、どのくらいつけるかを設定できる。
slideShadowsで側面の影のオンオフ。shadowでキューブの下にある影のオンオフ。shadowOffsetで影の位置、shadowScaleで影の大きさ。
slideShadowsをfalseにすると境界線みたいなのがちらつくことがあるから、基本デフォルト推奨。
coverflow
effectがcoverflow前提。
デフォルトでは
coverflow: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows : true }
rorateは次のスライドに行く時までに各スライドがどの程度回転するかの角度。stretchはスライド間の距離。depthは奥行き。modifierは角度(つけすぎ注意)。slideShadowsはスライドにある影。
基本デフォルト推奨。
flip
effectがflip前提。
デフォルトでは
flip: { slideShadows : true, limitRotation: true }
slideShadowsはスライドの影。limitRotationは角度の制限みたいなものなんだけど、これfalseにすると動きやばくなるからtrue固定でいいと思う。
parallax
parallax
真偽。
スライドの内側でパララックスを実装したい場合はこれをtrueにする必要があるらしい。最終的にはパララックスの仕方にもよるとは思うけど。
デフォルトではfalse。
Slides grid
spaceBetween
数。
スライドの間の距離を設定できる。
デフォルトでは0。
slidesPerView
数字もしくはauto。
1画面で見えるスライドの数を設定できる。loopを設定したい場合は、一緒にloopedSlidesの設定をする必要がある。slidesPerView:autoとslidesPerColumnは一緒に設定してはいけない。
デフォルトでは1。
slidesPerColumn
数。
列ごとのスライド数。独自のスライドの動きと合わせたりすると面白い。
デフォルトでは1。
slidesPerColumnFill
文字列。
columnもしくはrow。slidesPerColumnなどを実装した際に、どのようにして埋めるかを設定できる。列をベースに埋めるか、行をベースに埋めるか。
デフォルトではcolumn。
slidesPerGroup
数。
複数のスライドを1つにまとめる。スワイプした際にグループで囲った全てが同時にスライドする。実質slidesPerViewが2以上前提な気がする。
デフォルトでは1。
centeredSlides
真偽。
trueにすると、スライドのスタートが真ん中になる。実質slidesPerViewが3以上の奇数前提な気がする。
デフォルトではfalse。
slidesOffsetBefore
数。
全てのスライドの前に追加で余白を設ける。余白は1つ分のスライドとして認識される。それぞれのスライドは余白分ずれて見える。ピクセル。
デフォルトでは0。
slidesOffsetAfter
数。
全てのスライドの最後に追加で余白を設ける。余白は1つ分のスライドとして認識される。ピクセル。
デフォルトでは0。
カーソル
grabCursor
真偽。
trueだとカーソルがスライドに乗った時、グラブになる。当然だけどスマホは意味なし。
デフォルトではfalse。
タッチ(スマホ)
touchEventsTarget
文字列。
containerもしくはwrapper。タッチイベントの対象をどちらにするか選択できる。基本containerでいいと思う。
デフォルトではcontainer。
touchRatio
数。
しきい値。どのくらいスワイプしたら次のスライドに行くかを設定できる。数字が大きければ少しのスワイプで次に行く。スライドのサイズに応じて設定した方がいい。
デフォルトでは1。
touchAngle
数。
スワイプを認識する角度を設定できる。スライドのサイズが大きいなら数字を大きくした方がいい。
デフォルトでは45。
simulateTouch
真偽。
trueだとタッチイベント(マウスイベント)を認識するようになる。falseにする意味はそんなない気がする。
デフォルトではtrue。
shortSwipes
真偽。
時間の短いスワイプを無効にする場合はfalseを設定する。基本デフォルト推奨。
デフォルトではtrue。
longSwipes
真偽。
時間の長いスワイプを無効にする場合はfalseを設定する。基本デフォルト推奨。
デフォルトではtrue。
longSwipesRatio
数字。
時間の長いスワイプをした時に、どのくらい次(もしくは前)のスライドが見えてたら次(もしくは前)のスライドに行くかを設定できる。個人てきには0.4くらいが好き。
デフォルトでは0.5。
longSwipesMs
数。
時間の長いスワイプをした時に、どのくらい経過したら次(もしくは前)のスライドへ行くのをキャンセルするかを設定できる。ミリ秒。
デフォルトでは300。
followFinger
真偽。
falseだとスワイプした時に次のスライドや前のスライドが見えるような動きをキャンセルできる。true推奨。
デフォルトではtrue。
onlyExternal
真偽。
trueだとスライドする手段がslidePrevやslideNextなどの外部限定になる。少なくともスマホではfalse推奨。
デフォルトではfalse。
threshold
数。
しきい値。この数値よりスワイプ距離が短い場合、スライダーは動かない。ピクセル。
デフォルトでは0。
touchMoveStopPropagation
真偽。
trueにすることでイベントのバブリングを防ぐ。デフォルト推奨。
デフォルトではtrue。
iOSEdgeSwipeDetection
真偽。
iOSのUIWebViewにおいてスワイプのイベントを有効にするための設定。らしい。
デフォルトではfalse。
iOSEdgeSwipeThreshold
数。
iOSのUIWebViewにおいてここで画面左端から設定した数より小さい数の範囲ではスワイプのイベントが有効にならない。らしい。
デフォルトでは20。
touchReleaseOnEdges
真偽。
trueだとスライダーをスワイプでスライドさせている時にも画面がスクロールされるようになる。
デフォルトではfalse。
passiveListeners
真偽。
スマホでのパフォーマンスを高める。基本デフォルトでいいと思うけどe.preventDefaultを使用する場合は競合してしまうため、こちらをfalseにする必要がある。
デフォルトではtrue。
resistance
resistance
真偽。
trueだと最後のスライドもしくは最初のスライドで次に行こうとする時に発生するバウンスアニメーションに抵抗力がつくようになる。
デフォルトではtrue。
resistanceRatio
数。
抵抗力を強めたり弱めたりできる。
デフォルトでは0.85。
クリック
preventClicks
真偽。
スワイプ中での不要なクリックを無効にできる。ユーザビリティ的にtrue推奨。
デフォルトではtrue。
preventClicksPropagation
真偽。
スワイプ中のクリックイベントを無効にできる。ユーザビリティ的にture推奨。
デフォルトではtrue。
slideToClickedSlide
真偽。
スワイプ中にクリックした時、今の動きをキャンセルしてクリックした側のスライドに移動する。ゆっくりなスライダーでない限り、ユーザビリティ的にfalse推奨。
デフォルトではfalse。
スワイプ
allowSwipeToPrev
真偽。
falseだとスワイプで前に戻る動きができなくなる。
デフォルトではtrue。
allowSwipeToNext
真偽。
falseだとスワイプで次行く動きができなくなる。
デフォルトではtrue。
noSwiping
真偽。
trueだとnoSwipingClassで指定したクラスを持ったスライドはスワイプの操作が効かなくなる。
デフォルトではtrue。
noSwipingClass
文字列
noSwipingがture前提。ここで指定したクラス名を持ったスライドはスワイプの操作が効かなくなる。
デフォルトでは’swiper-no-swiping’。
swipeHandler
文字列(htmlElement)
ここで指定したクラス上でしかスワイプ操作が効かなくなる。
デフォルトでは’null’。
Navigation Controls
uniqueNavElements
真偽。
paginationやボタンなどを認識する際、swiperに(階層として)一番近いものが適用される。不具合の原因になるため、デフォルト推奨。
デフォルトではtrue。
Pagination
Pagination
文字列(htmlElement)
指定した空のdivの中にpaginationをつける。指定はクラス名推奨。別のスライダーが存在する場合、クラス名は分けた方がいい。
デフォルトでは’null’
paginationType
文字列。
‘bullets’、’fraction’、’progress’もしくは’custom’。
paginationの種類を選択できる。丸い円か、数字か、barか、カスタム。progressは結構かっこいい。
デフォルトでは’bullets’。
paginationHide
真偽。
trueにすると、スライド上でクリックした際にpaginationが消えたり出たりするようになる。
デフォルトではfalse。
paginationClickable
真偽。
trueにするとpaginationをクリックした際に、そのpaginationの適切なスライドにスライドする(国語力やべえ)。
デフォルトではfalse。
paginationElement
文字列。
ここで指定したタグでpaginationが形成されるようになる。divとかliとかにしたい時に。
デフォルトでは’span’。
paginationBulletRender(swiper, index, className)
関数
paginationTypeがbullets前提。bulletsのpaginationをカスタマイズできる。
公式の例
var swiper = new Swiper('.swiper-container', { //... paginationBulletRender: function (swiper, index, className) { return '<span class="' + className + '">' + (index + 1) + '</span>'; } });
pagination個別につけたいクラスがあったり、タグの間に何かを挟みたい時(アイコンとか)にどうぞ。
デフォルトではnull。
paginationFractionRender(swiper, currentClassName, totalClassName)
関数
paginationTypeがfraction前提。fractionのpaginationをカスタマイズできる
公式の例
var swiper = new Swiper('.swiper-container', { //... paginationFractionRender: function (swiper, currentClassName, totalClassName) { return '<span class="' + currentClassName + '"></span>' + ' of ' + '<span class="' + totalClassName + '"></span>'; } });
数字と数字の間を文字や画像にしたい時とかにどうぞ。
デフォルトではnull。
paginationProgressRender(swiper、progressbarClass)
関数
paginationTypeがprogress前提。progressのpaginationをカスタマイズできる。
公式の例
var swiper = new Swiper('.swiper-container', { //... paginationProgressRender: function (swiper, progressbarClass) { return '<span class="' + progressbarClass + '"></span>'; } });
独自のクラスをつけたい時とかにどうぞ。
デフォルトではnull。
paginationCustomRender(swiper, current, total)
関数
paginationTypeがcustom前提。customのpaginationをカスタマイズできる・・・って当たり前だけど。
公式の例
var swiper = new Swiper('.swiper-container', { //... paginationCustomRender: function (swiper, current, total) { return current + ' of ' + total; } });
オリジナルのpaginationを設置したい時にどうぞ。
デフォルトではnull。
ナビゲーションボタン
nextButton
文字列(htmlElement)
ナビゲーションボタンを設置する。静的にhtmlで次へボタンを設置した後、このオプションでその設置したボタンのクラスを指定することで実装できる。
デフォルトではnull。
prevButton
文字列(htmlElement)
ナビゲーションボタンを設置する。静的にhtmlで前へボタンを設置した後、このオプションでその設置したボタンのクラスを指定することで実装できる。
スクロールバー
scrollbar
文字列(htmlElement)
スワイプ中にスクロールバーを表示させる。空のdivを用意して、そのdivにあるクラス名をこのオプションで指定することで実装できる。
デフォルトではnull。
scrollbarHide
真偽。
trueだとスワイプが完了したらスクロールバーが消える。
デフォルトではtrue。
scrollbarDraggable
真偽。
trueだとスクロールバーをドラッグできるようになる。
デフォルトではfalse。
scrollbarSnapOnRelease
真偽。
tureだとスクロールバーをドラッグした後、一番近いスライドにスナップするようになる。scrollbarDraggableをtrueにしてるならこっちもtrue推奨。
デフォルトではfalse。
アクセシビリティ
a11y
真偽。
音声やスクリーンリーダーを使用する場合はtrue。
デフォルトではfalse。
prevSlideMessage
文字列。
前ボタンのスクリーンリーダーでの文字。
デフォルトでは’Previous slide’。
nextSlideMessage
文字列。
次ボタンのスクリーンリーダーでの文字。
デフォルトでは’Next slide’。
firstSlideMessage
文字列。
最初のスライドの時に出るスクリーンリーダーでの文字。
デフォルトでは’This is the first slide’。
lastSlideMessage
文字列。
最後のスライドの時に出るスクリーンリーダーでの文字。
デフォルトでは’This is the last slide’。
paginationBulletMessage
文字列。
paginationで使用するスクリーンリーダーでの文字。
デフォルトでは’Go to slide {{index}}’
キーボード
keyboardControl
真偽。
trueだとキーボードの左右でスライドが可能になる。ユーザー環境に左右されるから使用する際はそれを考慮すること。
デフォルトではfalse。
mousewheelControl
真偽。
trueだとマウスホイールでのスライドが可能になる。ユーザー環境に左右されるから使用する際はそれを考慮すること。
デフォルトではfalse。
mousewheelForceToAxis
真偽。
マウスホイールでのスライドが、ホイールした方向と一致しないとスライドしなくなる。マウスホイールに横にホイールする機能がない時、ホイールで横にスワイプすることができなくなる。
デフォルトではfalse。
mousewheelReleaseOnEdges
真偽。
mousewheelControlがtrue前提。trueの場合、ホイールでスライドしてる時でもページがスライドされる。
mousewheelInvert
真偽。
trueだとマウスホイールでのスライドが逆方向になる。デザイン次第では逆のが
デフォルトではfalse。
mousewheelInvert
数。
マウスホイールの感度調整。数が大きければ、その分スクロールが強くなる。高くしすぎ注意。
デフォルトでは1。
mousewheelEventsTarged
文字列(htmlElement)
マウスホイールのイベントが発火する対象を指定できる。特定のスライドに来た時だけマウスホイールイベントを発火とかそういう時に使うかも。
デフォルトでは’container’。
ハッシュ
hashnav
真偽。
trueにして、各スライドにdata-hash=”slide1″のような感じでdata-hashを設置すると、url#slide1といったurlでdata-hashが一致するところからスライドが始まる。
デフォルトではfalse。
hashnavWatchState
真偽。
trueだと、スライドするたびにurlの末尾にdata-hashがハッシュで書かれるようになる(リロードはされない)。
デフォルトではfalse。
history
文字列
.swipe-sliderにdata-history属性を書くと、その中の文字列がURLにつく。
デフォルトでは何もなし。
replaceState
真偽。
ハッシュ法(document.location.hash)またはpushState(window.history.replaceState)メソッドをhashnavで使用するのではなく、代わりにreplaceState(window.history.replaceState)メソッドを使う。
デフォルトではfalse。
preloadImages
真偽。
プリロード。事前にスライドで使う画像を読み込んでおくもの。
デフォルトではtrue。
updateOnImagesReady
真偽。
preloadImagesがture前提。画像が全て読み込んだらスライドを初期化する。ture推奨。
デフォルトではtrue。
lazyLoading
真偽。
preloadImagesがfalse前提。画像を遅延して読み込む。スライドに重い画像があったりする場合に。
デフォルトではfalse。
lazyLoadingInPrevNext
真偽。
lazyLoadingがture前提。遅延読み込みが最初表示されてる画像と次に表示される画像にも適応される。
デフォルトではfalse。
lazyLoadingInPrevNextAmount
数。
lazyLoadingInPrevNextがture前提。lazyLoadingInPrevNextの遅延読み込みが適応される枚数を選択できる。slidesPerViewで2枚以上セットでスライドしてたりする時に使う。
デフォルトでは1。
lazyLoadingOnTransitionStart
真偽。
lazyLoadingがture前提。lazyLoadingではスワイプ完了後に読み込むけど、ここをtureにするとスワイプ開始時に読み込むようになる。
デフォルトではfalse。
ループ
loop
真偽。
trueだとループするようになる(最後のスライドの時にnextのボタンを押したりすると最初のスライドに行く。逆も同様)。これを設定した際、正面のスライドに.swiper-slide-duplicate-activeが、次のスライドに.swiper-slide-duplicate-nextが、前のスライドに.swiper-slide-duplicate-prevが追加される。
デフォルトではfalse。
loopAdditionalSlides
数。
ループ作成時に作成されるクローンの枚数。見た目では特に変化せず、ソースコード上で変わる。
デフォルトでは0。
loopedSlides
数。
slidesPerviewがautoの時に、ループする数を設定する際に使用する。
デフォルトではnull。
ズーム
zoom
真偽。
trueだとダブルクリックでズームするようになる(スマホ、ダブレットの場合2本指で拡大できる)。ダブルクリックした箇所が拡大される。画像の解像度注意。
デフォルトではfalse。
zoomMax
数。
ズームの最大倍率。数が大きいとより拡大できるようになる。画像の解像度と相談。
デフォルトでは3。
zoomMin
数。
ズームの最小倍率。
デフォルトでは1。
zoomToggle
真偽。
falseだとダブルクリックでのズームが出来なくなり、スマホ及びダブレットの指でのズームしかできなくなる。
デフォルトではtrue。
コントロール
control
変数名
複数スライドがあるときに、片方をスライドしたら別のやつもスライドするようにする。
var Swiper_01 = new Swiper('#swiper_01',{ }) var Swiper_02 = new Swiper('#swiper_02',{ }) Swiper_01.params.control = Swiper_02; Swiper_02.params.control = Swiper_01;
デフォルトではundefined。
controlInverse
真偽。
trueだと、controlで指定したものと動きが逆方向になる。Aが右から左なら、Bが左から右。
var Swiper1 = new Swiper('#swiper-container1',{ }) var Swiper2 = new Swiper('#swiper-container2',{ }) Swiper1.params.control = Swiper2; Swiper1.params.controlInverse=true;
controlBy
文字列
‘slide’もしくは’container’
slideだと片方が1枚分スライドするともう片方も1枚分スライドする。containerだと両方のスライドの枚数を比較して、相対位置のスライドになる。例えば、片方が10枚のスライドでもう片方が3枚のスライドの時、2枚の方を1回スライドして2枚目に行くと、もう片方は5枚目に行く。片方が5枚でもう片方が3枚の時、3枚の方を1回スライドすると、もう片方は3枚目に行く。
デフォルトでは’slide’。
normalizeSlideIndex
真偽。
centeredSlidesを使っている時に、1枚目が3枚目として認識されているのをtrueだと1枚目として認識してくれるようになる。
公式参考URL https://github.com/nolimits4web/Swiper/pull/1766
デフォルトではtrue。
Observer
observer
真偽。
スライド作成後にスタイルの変更やスライドの表示非表示を変更する時に、falseだと崩れるけど対応するようになる。その分、少し重くなる印象。
デフォルトではfalse。
observeParents
真偽。
スライドの親要素にもobserverが適応されるようになる。observerがtrueならこちらもtrueがいいと思う。
デフォルトではfalse。
Breakpoints
breakpoints
オブジェクト
画面サイズごとでパラメータを設定したい場合に。breakpoints内で設定できるものと出来ないものがある。レイアウト関係と、ロジック(関数とか)がないもののみ適応できるらしい。公式曰く、slidesPerView、slidesPerGroup、spaceBetweenなどは設定できるけど、slidesPerColumn、loop、direction、effectは設定できない。
公式例
var swiper = new Swiper('.swiper-container', { // Default parameters slidesPerView: 4, spaceBetween: 40, // Responsive breakpoints breakpoints: { // when window width is <= 320px 320: { slidesPerView: 1, spaceBetween: 10 }, // when window width is <= 480px 480: { slidesPerView: 2, spaceBetween: 20 }, // when window width is <= 640px 640: { slidesPerView: 3, spaceBetween: 30 } } })
Callbacks
runCallbacksOnInit
真偽。
transitionやslideChangeの開始時や終了時のCallbacksを実行する。要するにCallbacksを使う前提オプション。
デフォルトではtrue。
OnInit(swiper)
関数
スライドの初期化完了時に実行する関数。スライドのロード完了時とかそういう認識。
onSlideChangeStart(swiper)
関数
スライドの移動(次、前両方)開始時に実行される関数。
onSlideChangeEnd(swiper)
関数
スライドの移動(次、前両方)終了時に実行される関数。
onSlideNextStart(swiper)
関数
次のスライドに行く時のみ実行される関数。
onSlideNextEnd(swiper)
関数
次のスライドに行った時のみ実行される関数。
onSlidePrevStart(swiper)
関数
前のスライドに行く時のみ実行される関数。
onSlidePrevEnd(swiper)
関数
前のスライドに行った時のみ実行される関数。
onTransitionStart(swiper)
関数
スライドアニメーションの開始時に実行される関数。onSlideChangeStartの次のタイミング。
onTransitionEnd(swiper)
関数
スライドアニメーションの終了時に実行される関数。onSlideChangeEndの次のタイミング。
onTouchStart(swiper、event)
関数
ユーザーがタッチしたら実行される関数。
onTouchMove(swiper、event)
関数
ユーザーがスライド上で指を動かしたら実行される関数。
onTouchMoveOpposite(swiper、event)
関数
ユーザーがスライド上で指を動かしたけど、touchAngleの判定外だった時に実行される関数。
onSliderMove(swiper、event)
関数
ユーザーがスワイプしてスライドを移動させている間実行される関数。スライドを掴んでいる状態に実行されるというか。
onTouchEnd(swiper、event)
関数
ユーザーが指を離した時に実行される関数。
onClick(swiper、event)
関数
スライドをクリックしたら実行される関数。
ONTAP(swiper、event)
関数
タップした時に実行される関数。
onDoubleTap(swiper、event)
関数
2回タップした時に実行される関数。
onImagesReady(swiper)
関数
スライドで使う画像が全て読み込まれたら実行される関数。
onProgress(swiper、progress)
関数
activeのスライドから次(前)のスライドに遷移する際、スライドがどのくらい遷移されているかを取得してその遷移量に応じて実行される関数。progressが遷移量の値。
onReachBeginning(swiper)
関数
初期位置(デフォルトで言う、1枚目)に来た時に実行される関数。
onReachEnd(swiper)
関数
最後のスライドに来た時に実行される関数。
onDestroy(swiper)
関数
スライドに対してdestroyが実行された時に実行される関数。
onSetTranslate(swiper,translate)
関数
.swiper-wrapperが移動する時に実行される関数。
onSetTransition(swiper、transition)
関数
swiperに対してアニメーションが実行される度に実行される関数。掴んでいる時とかに、掴んで移動させる度に実行される。
onAutoplay(swiper)
関数
onSlideChangeStartと同じタイミングなんだけど、自動再生での遷移にのみ実行される関数。
onAutoplayStart(swiper)
関数
自動再生が開始された時に実行される関数。
onAutoplayStop(swiper)
関数
自動再生が停止された時に実行される関数。
onLazyImageLoad(swiper, slide, image)
関数
遅延ロードを設定している時に、遅延ロード開始時に実行される関数。
onLazyImageReady(swiper, slide, image)
関数
遅延ロードを設定している時に、画像の遅延読み込みが完了されると実行される関数。
onPaginationRendered(swiper、paginationContainer)
関数
paginationが生成された時に実行される関数。
onScroll(swiper、E)
mousewheelでスライドなどがされた時に実行される関数。
各クラス名の設定(複数人での管理がしにくくなるためデフォルト推奨)
containerModifierClass
swiperの全体を囲っているdivにつくクラスにつく先頭。
デフォルトでは’swiper-container-‘。
slideClass
各スライドにつくクラス。
デフォルトでは’swiper-slide’。
slideActiveClass
アクティブになってるスライドにつくクラス。
デフォルトでは ‘swiper-slide-active’
slideDuplicatedActiveClass
アクティブになってる複数のスライドにつくクラス。
デフォルトでは’swiper-slide-duplicate-active’。
slideVisibleClass
表示されているスライドのクラス。
デフォルトでは’swiper-slide-visible’。
slideDuplicateClass
loop設定時につくスライドのクラス。
デフォルトでは ‘swiper-slide-duplicate’。
slideNextClass
次のスライドにつくクラス。
デフォルトでは’swiper-slide-next’。
slideDuplicatedNextClass
次のスライドで複数ある場合につくクラス。
デフォルトでは ‘swiper-slide-duplicate-next’。
slidePrevClass
前のスライドにつくクラス。
デフォルトでは’swiper-slide-prev’。
slideDuplicatedPrevClass
前のスライドで複数ある場合につくクラス。
デフォルトでは’swiper-slide-duplicate-prev’。
wrapperClass
ラッパーにつくクラス。
デフォルトでは’swiper-wrapper’。
bulletClass
paginationTypeがbullet時につくクラス。
デフォルトでは’swiper-pagination-bullet’。
bulletActiveClass
paginationTypeがbullet時にアクティブのpaginationにつくクラス。
デフォルトでは’swiper-pagination-bullet-active’。
paginationHiddenClass
非アクティブのpaginationにつくクラス。
デフォルトでは’swiper-pagination-hidden’。
paginationCurrentClass
paginationTypeがfraction時にアクティブのpaginationにつくクラス。
デフォルトでは’swiper-pagination-current’。
paginationTotalClass
paginationTypeがfraction時に総数の値につくクラス。
デフォルトでは’swiper-pagination-total’。
paginationProgressbarClass
paginationのprogressbarにつくクラス。
デフォルトでは’swiper-pagination-progressbar’。
paginationClickableClass
paginationがクリックできる時につくクラス。
デフォルトでは’swiper-pagination-clickable’。
paginationModifierClass
パラメータの設定次第でpaginationに追加されるクラスの先頭。
デフォルトでは ‘swiper-pagination-‘。
buttonDisabledClass
次へ、前へボタンが無効になった時につくクラス。
デフォルトでは’swiper-button-disabled’。
lazyLoadingClass
遅延ロード設定時につくクラス。
デフォルトでは’swiper-lazy’。
lazyStatusLoadingClass
遅延ロード中につくクラス。
デフォルトでは’swiper-lazy-loading’。
lazyStatusLoadedClass
遅延ロード完了したスライドにつくクラス。
デフォルトでは’swiper-lazy-loaded’。
lazyPreloaderClass
遅延ロード設定時にプリローダーしている時につくクラス。
デフォルトでは’swiper-lazy-preloader’。
preloaderClass
プリローダーそのもののクラス。
デフォルトでは’preloader’。
zoomContainerClass
zoom設定時につくクラス。
デフォルトでは’swiper-zoom-container’。
notificationClass
a11y設定時につくクラス。
デフォルトでは’swiper-notification’。
あとメソッドとかあるけどとりあえずここまで。
あー疲れた。
はじめまして。田中と申します。
“特定のボタンを押した時に、特定のスライドに移動するとかそういうのが非常に簡単にできる。”
まさにこの機能を実装したいのですが、別のボタンからどのように該当スライドをアクティブにできるのでしょうか。
hashでやってもうまくいかなかったので、ご教授頂けますと幸いです。
田中さん
初めまして。コメントありがとうございます。
>“特定のボタンを押した時に、特定のスライドに移動するとかそういうのが非常に簡単にできる。”
>まさにこの機能を実装したいのですが、別のボタンからどのように該当スライドをアクティブにできるのでしょうか。
>hashでやってもうまくいかなかったので、ご教授頂けますと幸いです。
こちらの機能を実装するには2つの作業が必要になります。
1、押すボタンにdata-hashを記述します。
2、jsに以下のようなものを記述します。
slideTo()で()内のインデックス番号にスワイプします。この例ですと3になります。
まず、ハッシュを使わずにswiper.slideTo(3)のように直接数字を入れてみてください。それで動くのでしたらhashにしても動くはずです。動かない場合、構文ミスになりますので、一度検証ツールのコンソールを見て、エラー内容を確認してください。エラーもない場合はclick自体が効いていないか、何かが上に重なっている可能性が高いのでそれがないか調べてください。
サンプル
はじめまして。
swiper 止まるで検索したところ、こちらの記事にたどり着きました。
多くのオプションがある中で目当のオプションがあるかどうか分からなかったので質問させて頂きます。
●リンク付きの画像を自動でスライドさせているのですがクリック又はフリックするとスライドが停止していまいます。
再度自動再生させるにはどうしたらよろしいのでしょうか?
もしも解決できる内容でしたらご教示頂けましたら幸いです。
できましたら添付しておりますurlは非公開でお願い致します。
宜しくお願い致します。
しょうほんさん
コメントありがとうございます。
autoplayDisableOnInteractionのオプションを使用すれば実現できます。
swiper = new Swiper(‘.swiper-container’, {
direction: ‘vertical’,
autoplay: 2000,
autoplayDisableOnInteraction: false
});
こんな感じにすれば大丈夫です。お試しください。
初めまして。
オプションの解説が詳しく書いてあり重宝させていただいてます。
ひとつご存知でしたら教えてほしいことが…
ここに1つ目のスライド!
ここに2つ目のスライド
ここに3つ目のスライド
というデフォルトの書式で書いているのですが、「開始スライド」を指定することはできますでしょうか?
http://hogehoge.com/swiper/
と書いたとき、何もしないと上記HTMLの「ここに1つ目のスライド!」が表示されるかと思います。これを「ここに3つ目のスライド」が開く状態にしたいのです…。
使いみちとしては、右開きの和書のようなものをswiperで作っているのですが、表紙部分が一番最後に来てしまうため、表紙を一番最初に表示させたいと思ったことです。
どうぞよろしくお願い申し上げます。
も、申し訳ございません!!
initialSlide
を指定したら大丈夫でした。
基本オプションの一番上に書いてあることでしたね…
yunosukeさん
コメントありがとうございます!
解決できたようで良かったです。和書・・・なかなか面白いサイトになりそうですね。少し難しいものになりますけど、virtualTranslateやonSlideChangeEndを設定してオリジナルの動きをつけるとより和書っぽいものになるのかなー、とか色々考えられます。
今後ともよろしくお願いします。
swiperのオプションを調べていたらたどり着きました。
いろいろと参考にさせていただいてます。
ひとつご教授いただきたいことがあるのですが、
コールバック関数を使用したのですが、
その際、スライドの番号によって処理を分けたいと考えています。
たとえば、bxsliderなら
if(oldIndex == 4){
//4枚目のスライドの処理
}
みたいなことができるのですが、swiperでも同じことができないかと思ってります。
大変図々しく恐縮ですが、もしご存知でしたら。
penguinさん
コメントありがとうございます!
特定のスライド枚数に来た時にそれ毎の処理を実行する方法ですが、activeIndexによって実現できます。これは記事には書いてないプロパティの部分なので、申し訳ありませんが詳しくは公式サイトを見ていただければと思います。
書き方はbxsliderのそれと同じような感じです。
注意点があるとすれば、最初のスライドの時に前に戻るような動きをすると、再び最初のスライドに来た時の処理が実行されてしまうことです。わかりにくいですが、サンプルのページでコンソールを見ながら、最初のスライド表示時に上に動かしてみてください。ちなみに最後のスライドでも同様です。
最初のスライド、最後のスライドの時に1回だけ実行したい場合はjQueryのoneや、フラグを使ってなんとかしていただければ。
サンプル
今後ともよろしくお願いします。
お礼が遅くなりまして、すみません。
なるほど大変わかりやすいご返事ありがとうございました!!
ソースまでご提示いただき、感謝です!(*’▽’)
参考にさせていただきます。
これは神記事
感謝。
swiper新規設置の際に重宝させていただきました。オプションの内容が細かく説明されていてとても参考になります、ありがとうございます。
ただ、どうしても解決できない問題があり、お手すきの際にご指導いただくことはできませんでしょうか。
具体的には添付のURLのページですが、ナビゲーションボタンでスライドすると、画像が消えたり再表示されたりします(消えたりするキッカケが不明)。
オプションやCSSをいじってみたのですが解消されず途方に暮れています。何か考えられる要因があればご指導ください。
※URLは非公開にしていただければ幸いです。
コメントありがとうございます!
URLを拝見させていただきました。
結論から申し上げますと、LazyLoad.jsの影響です。
LazyLoadで1pxの画像が本来表示したい画像に変換される前にスライダーが形成されたため不具合が発生しています。
このURLのサイトの仕様についてはわかりませんが、swiper内の画像を遅延読み込みをさせる場合はswiperのオプションのlazyLoadingを使用してください。
今後ともよろしくお願いします!
レーウィン様
早速のご指導ありがとうございます。ブラグインのLazyLoadを無効化したところ不具合なくスライドされるようになりました。一発解決、本当にありがとうございます!
なお、遅延読み込みの代替案(プラグイン)としてBJ Lazy Loadを有効化しました。同ブラグインならclass指定で部分的に遅延読み込みを除外できそうでしたので。ただ、嬉しい誤算で初期設定のままでも不具合なくスライドされています。
繰り返しとなりますが、この度はご指導ありがとうございました!
JS初心者なのでとても参考にさせて頂いています。
Multi Row Slides Layout と zoomを組み合わせようと思っています。
しかし表示順の問題なのかズーム画像が次の画像の下になってしまいます。
ソースを見てみたのですが僕には無理そうです。
解決方法があればご教示いただけないでしょうか・・・
のりさん
コメントありがとうございます!
Multi Row Slides Layoutというのは公式デモの10番目にあったものですよね。
それのオプションにzoom:trueを加えて、slide1の箇所をimgタグに差し替えてみたのですが、問題なく動いてるように感じました。
一応でこちらで作成したソースをお送りさせていただきますので、ご参考までに
レーウィン様
対応して頂きありがとうございます!
なぜレーウィンさんのコードのコピペは動いて自分のは動かないのか。
数時間悩みましたが、jqueryの問題ではなく自分で書いたcssの方の問題でした。。。
アホですね。
今回はアホへの優しい対応、本当に感謝です。
興味のある記事が多いので今後もちょいちょい覗かせてもらいます。
ありがとうございました!
のりさん
レーウィン様
初めまして。
bxsliderからswipeへ以降したく、貴殿の機能解説参考にさせていただいてます!
が見つけられなかった部分が2つあるので、ご教授をお願いしたく思います。
1)基本、自動スライダー使用ですが、
PCでは「マウスON時はスライダー停止」したいと思っています。
(bxsliderの autoHover: true, )
swiperでも、このoptionはありますか?
あるようでしたら、ソースを教えてください。
2)imgを順番通りじゃなく、ランダムに表示させることはできますか?
以上2点です。
ご指導のほどよろしくお願いいたしますm(_ _)m
<現状はこんな感じ↓です>
—–
var swiper = new Swiper(‘.swiper-container’, {
loop: true,
speed: 1500,
autoplay: 1500,
slidesPerView: 3,
spaceBetween: 0,
centeredSlides: true,
grabCursor: true,
simulateTouch: false,
autoplayDisableOnInteraction: false,
pagination: ‘.swiper-pagination’,
nextButton: ‘.swiper-button-next’,
prevButton: ‘.swiper-button-prev’
})
—–
オオサワさん
コメントありがとうございます!早速ですがご質問にお答えいたします!
1) オプションでは存在しませんが、メソッドを使用することで同じことが可能です。(記事では書いてない部分ですみません)
stopAutoplay()と、startAutoplay()を使用すれば自動再生の停止・再生を制御することができます。
2) swiperにランダムに並び替えるオプション及びメソッドはありませんのでjavascriptで並び変えるか、jQueryなどを使用してください。
要素のランダムの並び替えは以下のURLが参考になります。
http://jsfiddle.net/jBzB4/118/
今までの経験からの推測ですが、jQueryではappendではなくhtmlで要素を並び替えたものを追加していった方がいいかもです。試してはいませんけれど、おそらく。
雑なサンプルコードですが、よろしければご参考までに。
要素のランダム並び替え→swiper生成の順番ができていれば大丈夫だと思います。
swiper生成→要素のランダム並び替えとなるとまた工夫が必要そうです。
はじめまして。
非常にわかりやすく解説されており、参考にさせていただいておりますが、どうしても解決できない問題があります。
loop: true,
slidesPerView: ‘auto’,
spaceBetween: 50,
effect: ‘coverflow’,
coverflow: {
rotate: 0,
stretch: 0,
depth: 50,
modifier: 1,
slideShadows : true
},
centeredSlides : true,
pagination: ‘.swiper-pagination’,
paginationClickable: true,
nextButton: ‘.swiper-button-next’,
prevButton: ‘.swiper-button-prev’,
autoplay: 2500,
autoplayDisableOnInteraction: false
1)
上記のようなオプションでswiperを設置し、任意のサイズ以上の時には両サイドに前後の内容が少し見えている状態にしたいと思っています。
現在はナビゲーションボタンで次のスライドへ移動することはできますが、少し見えている次のスライドをクリックすると、そのスライドに設定しているリンクに飛んでしまいます。
これを、前後の少し見えているスライドをクリックした場合は、そのスライドへ移動し、真ん中に表示されているものをクリックした場合に、そのリンク先へ移動するようにはできますでしょうか。
2)
また、現在はブラウザの他のタブを見たあとに、元のページへ戻ると自動再生が止まっており、ページネーションをクリックしたり、スワイプするとまた動き始めるのですが、ナビゲーションボタンをクリックしても全く反応しなくなってしまいます。
ページネーションなどをクリックして自動再生がはじまると、またナビゲーションボタンが反応するようにはなるのですが、どうにかなりますでしょうか。
大変恐縮でございますが、解決できるようでしたら、お手すきの際にご教示いただけますでしょうか。
よろしくお願いいたします。
佐々木さん
コメントありがとうございます!
すみません、試してないのですが、以下の方向性で解決できるかと思います。
1)ちょっとオプションのみでどうこうするのは難しそうですが・・・
javascriptのclickイベントを使ってそれっぽく作れると思います。
jQueryで書くと・・・
で、おそらくいけるかと。
2)別タブ見ている間はjavascriptは止まります。
なので、必然的に自動再生も止まります。
対策しようとする場合はonfocusあたりを使用して、startAutoplay()を使用したらいけるかもしれないです。
レーウィンさん
早速のご対応ありがとうございます。
1)に関してはお教えいただいた内容で解決できました。
本当にご丁寧にありがとうございます。
2)に関して私の知識不足に加え、説明が足りずに申し訳ございません。
自動再生が止まるのは問題ないのですが、止まったスライドを次のスライドに移すのにナビゲーションボタンを押しても反応がないことに困っております。
(1で実装した少し見えている部分をクリックしても同様に反応しなくなります)
ページネーションをクリックした場合は問題なく動くので、これをナビゲーションボタンと1で実装した少し見えている部分をクリックしても同様に動くようにならないかと思っているのですが、知識不足の私ではどうにもできず。
autoplay、もしくはloopを外せば、自動再生が止まった後もナビゲーションボタンをクリックすれば反応してくれるのですが、うまく解決する方法がございましたら、ご教示いただけましたら幸いです。
佐々木さん
すみません、返信遅れました。
思い当たることが見つからないので基本的な部分からですが・・・
1、何かエラーが出ていたりはしますか?ロード時やクリック時にエラーが出ていたりしませんか?
2、clickに対してconsole.logをしこんでみた場合、ちゃんとコンソールに表示されますか?
3、ブログのコメント上でのオプションの文字列をかこっていたコーテーションがシングルでもダブルでもありませんでしたが、そちらは大丈夫ですか?
レーウィンさん
お返事ありがとうございます。
1、特に出ていないかと思います。
2、すみません、知識不足なためやり方がわかりませんでした。
3、シングルコーテーションになっています。(フォントの見え方でしょうか。)
mac safariでの問題でしょうか。
chromeで確認したところ、そもそもchromeの場合は他のタブに移っても自動再生が止まらないので問題ありませんでした。
見ていただいた方が早いかと思いますので、簡単にですが作ってアップしました。
私の知識が足らずご面倒をおかけして申し訳ございませんが、お手隙の際にご確認いただけますでしょうか。
佐々木さん
いろいろ試した結果、safariではバグが発生し、それに対してはオプションで対処するのは難しそうであると判断しました。
なので、jqueryで対処しました。
タブが切り替えが発生したタイミングで強制的に自動再生を止める仕組みです。
これで、こちらで見た環境では大丈夫でした。
もし、safari以外は止めたくない場合は、ブラウザ判定を入れていただければ。
よろしくおねがいします!
レーウィンさん
長々と申し訳ございませんでしたが、お教えいただいた内容で無事解決いたしました。
本当にありがとうございました。
初めまして、参考にさせて頂いておりまして、大変感謝しております。
二段にしてループさせたいのですが、ループせず(一回転したところで止まってしまう)現在悩んでおります。
下記のような記述をしております。
$(function(){
var mySwiper = $(‘.swiper-container-2′).swiper({
mode:’horizontal’,
loop: true,
slidesPerView: 2,
spaceBetween: 20,
autoplay: 5000,
slidesPerColumn: 2,
simulateTouch: true,
followFinger: false,
grabCursor: true,
touchReleaseOnEdges: true,
autoplayDisableOnInteraction: false,
autoplayStopOnLast: false,
});
})
お手隙の際で構いませんので、アドバイスなど頂ければ大変嬉しく思います。
誠に恐れ入りますが、何卒宜しくお願い申し上げます。
中トトロさん
コメントありがとうございます!大トトロとか赤身トトロもいるのでしょうか・・・。
どうやらswiperのバグみたいで、slidesPerColumnが2以上の時、loopがうまくいかないようです(公式には書いてませんでした・・・時間ある時に記事に追記しておきます)
オプションでどうこうするのは難しいので、
swiperは画像以外をスライドさせることができるので、画像を2つ含んでいるdivタグをスライドさせるような形で調整していただければ。
今後ともよろしくおねがいします!
初めまして、スマホサイトの新参者です。
このサイトは大変わかりやすく、色々と参考にさせていただいてます。
ひとつ、質問させてください。
一つのslideに一つのiframeを入れてそのslideの内容を表示していまして、pagination、nextButton、prevButtonとしての動作は問題ないですが、色々いじってみたのですが、どうしてもスワイプができません。T^T
解決策があれば、ご教示いただけますでしょうか。
よろしくお願いします。
awasomeKanaさん
コメントありがとうございます!
すみません、サンプルコードにつきましては私用が忙しいので用意できませんが、解決策のアドバイスとして・・・
http://vltava-design.com/wp/blog/2015/05/09/%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%83%88%E3%81%A7iframe%E3%81%8C%E3%83%95%E3%83%AA%E3%83%83%E3%82%AF%E5%87%BA%E6%9D%A5%E3%81%AA%E3%81%84%E4%BB%B6/
ブルタバデザイン様のページ
もしくは
http://qiita.com/ta__ho/items/904290fa0c8c60b25af1
ta_ho様のページが参考になるのではないかと思います。
iframeをタッチするとiframeで表示しているページを操作している判定になるため、スワイプができなくなっているのかなと。
なので、-webkit-overflow-scrolling及びoverflowの設定を親のdivに設定すれば大丈夫になるのではないかと思われます。お試しくださいませ。
もし、iframe内でスクロールできるようにしつつ、スワイプもできるようにしたい!ということでしたら、iframe(もしくは親のdiv等)に対して左右にtouchmoveした時のみslideNext、slidePrevを行うような記述をjavascriptですればできなくはないですが、操作性はいまいちな気がしますね。。それよりかはpagerやprevbutton、nextbuttonのデザインを変更したり画像のサイズを広げて、押しやすくすることで操作性をあげて、iframe上では左右へのスワイプはできないと説明する方向性の方がいいと思います。選べるなら、ですけど。
今後ともよろしくお願いいたします。
お世話になります。
ご質問させて下さい。
スライドさせる画像にリンクを設定してあるのですが、
1度クリックしてもリンク先に移動してくれないことが多々あります。
preventClicks: false,
preventClicksPropagation: false, などを試したのですが、
これだとスワイプしている最中にリンク先に移動してしまったりします。
現在設定してあるパラメーターは下記の通りです。
pagination: ‘.swiper-pagination’,
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 30,
loop: true,
autoplay: 6000
何かいい解決策があればご教授頂ければ本当に嬉しく思います。
お忙しいところ誠に恐縮ですが、何卒よろしくお願い申し上げます。
ポカホンタスさん
コメントありがとうございます!すみません、私用が忙しく、返信遅れました。
うーん、特別なことをしていなければリンクは正常にされるはずですが・・・もしかしたらswiper以外のことが原因かもしれません。
もし、スマホでそういったことが起こるということでしたら、cssやjsで、リンクに当たっているhoverをはずしてみてください。
参照URL↓
http://satohmsys.info/ios-anchor-link/
PCで、ということでしたら、ちょっと詳細調べないと原因は難しそうです。
一応で、以下のソースお送りしますね。こちら正常に反応していると思います。
よろしくお願いします!
レーウィンさん
お忙しいところご返信頂きまして誠に有難うございます。
そしてアドバイス有難うございます。
css等、もう少し調べてみたいと思います。
引き続き今後とも何卒宜しくお願い申し上げます。
レーウィンさん
お忙しいところ簡単な質問です。
初心者ですが何卒よろしくお願いします。
Swiper設置作業してるんですが、レスポンジヴにPCでウインドウを小さくする分には縮小してくれますが、ウインドウを大きく(横幅)するとスライドが左に固定されたままになります。両サイドのPrev,Nextボタンはウインドウサイズに合わせて自動で移動してくれるんですがスライドの画像部分だけ左に固定されているようです。どのあたりにどのコードを追加または変更すればいいんでしょうか?cssやjsの
container やswiper-wrapperのpositionは全てcenterです。
どうぞよろしくお願いします。
テハさん
コメントありがとうございます!
まず、swiperは基本的に親要素の横幅に依存して、親要素の拡大縮小に合わせて.swiper-slideも拡大縮小します。つまり、初期状態でレスポンシブになっているということですね。
(swiperをダウンロードした時に一緒にあるdemoは基本そうなっていると思います)
レスポンシブにならない原因としては、以下が考えられます。
①swiperのオプションにheight、もしくはwidthを指定している。
この場合は高さと幅はその数値に固定されるので、レスポンシブにならなくなります。(今回は違うとは思いますが)
②CSSの問題
CSSでレスポンシブの何かを阻害している可能性があります。わかりやすい例ですとmax-widthなどです。
③JSのエラー
拡大した時にコンソールにエラーは出ていませんか?
④他のJSと混在している
他のプラグイン・JSなどと一緒においていると、まれに相性が悪くて正常に動作しない場合があります。
もし、上記見直してもわからないようでしたら、再びコメントいただくか、質問投稿サイトに投稿してください。
そのときには、エラーが発生してしまうコードを、可能な限り乗せるか、アップしてください。
以下、サンプル
よろしくお願いいたします!
はじめまして、スワイプをはじめて使ってサイトを作っている者です。
大変恐縮なのですが、スワイパーについて、教えていただければ幸いです。
現在、スライドを、5枚使用しています。
スライドの中身は、htmlで記述しています。
そのうち1つが、どうやっても画面の高さを越えてしまって次のスライドを巻き込んでスライドしてしまうのですが、これは越えてしまう高さの分を別のスライドとして分割するしか方法はないのでしょうか?
にゃごさん
コメントありがとうございます!
>現在、スライドを、5枚使用しています。 スライドの中身は、htmlで記述しています。
>そのうち1つが、どうやっても画面の高さを越えてしまって次のスライドを巻き込んでスライドしてしまうのですが、
>これは越えてしまう高さの分を別のスライドとして分割するしか方法はないのでしょうか?
swiper.jsは各スライドの高さが異なる時、一番高さの大きい要素に合わせてスライダーが形成されます。
なので、高さが想定していた高さよりも大きくなる・巻き込んでスライドされるという状況は、何かしらで不具合が起きていることになります。
実際のコードを見ないと具体的な解決策は出せないですが、修正できる可能性をいくつか・・・
①swiper.min.cssを読んでいない可能性
すみません、今更ながら記事で追加したのですが、swiperを実装するにあたって、swiper.js(swiper.min.js)を読ませるのは書いていましたが、swiper.css(swiper.min.css)も読ませることを記述していませんでした。
swiper.min.cssはswiper.jsをダウンロードした時のzipの中に入ってますので、もし読ませていない場合はそれを読ませるようにしてください。
②htmlの閉じタグがずれている可能性
.swiper-slideで囲まれた要素は特別なオプションを設定しない限り、1枚ずつスライドします。
なので、swiper-slideが1度に2枚スライドする場合は、swiper-slideがうまく閉じれていない可能性があります。
③css・jsの調整の可能性
swiper.jsは一番高い要素に対してスライダーが形成されますが、内部のhtmlにあたっているcssやjsによっては不具合が発生する可能性があります。
(これについてはコードを見ないとなんともですが)
おそらくjsのエラーは出ていないと思うので、上記3点のいずれかだとは予想しています。
また、基本的には一番高い要素に合わせってスライドが形成されますが、高さを指定するオプションもありますので、レスポンシブ等ではない場合はそちらもお試しください。(オプション名:height)
よろしくお願いします!
以下、サンプル
初めまして、ブチです。
現在swiperを使用し画像3枚実装して、動作もしていますが、画像下部に「>」と表示されます。
こちらの非表示の方法をご教授いただけませんでしょうか?
スライドの中身はHTMLとcssで作成しております。
下記にHTMLとCSSのコードを記載いたします。
【HTML】
【css】
宜しくお願いします。
ブチさん
コメントありがとうございます!
すいません、個人的な事情で返信ができませんでした。
ご質問の内容ですが、これはswiper.jsでも、cssでもなくhtmlに原因があります。
が各画像の末尾に書いてあるようですので、それを取ってください。
これは「>」を表示する文字コードですので、これが原因ですね。
もし、テキストエディタで確認してもその表示がない場合は、テキストエディタやCMSの設定がおかしいかもしれないです。別のテキストエディタで確認してみてもいいと思います。
少なくとも、swiperにはgtを追加するような機能はないのは間違いないです。
よろしくお願いいたします!
はじめまして。
swiperのオプションを調べていたらたどり着きました。
わかりやすく説明されていて、とても参考になります。ありがとうございます。
大変恐縮なのですが、動画再生についてお聞きしたく。。。。
画像3枚と4枚目に動画をvideoタグでmp4(15秒程度)で入れたいのですが、4枚目の動画になったとき自動再生なおかつ再生終了後に次のスライド画像に切り替わるように設定したいと考えています。
JS新参者ゆえ途方にくれております。
お手隙の際にでも、ご教授いただければ大変嬉しく思います。
サーモンさん
コメントありがとうございます!
js新参者には少し難しそうなことをしていますね。頑張ってください!
さて、質問の内容について簡単にですがお答えします。
「4枚目の動画になったとき自動再生」ですが、これはもう少し詳細に言葉で説明すると、「スライドが終了した時に、もしそれが4枚目であるなら動画を再生する」となります。
「スライドが終了した時」はswiperのcallbackにある「onSlideChangeEnd」で取得することができます。
「もしそれが4枚目であるなら」はactiveIndexで現在枚数を取得できますので、if文を使えばなんとかなりそうですね。
videoタグの再生はjsでコントロールできます。getElementByIdでvideoタグのidを取得し、play()で再生できそうです。
次に、「再生終了後に次のスライド画像に切り替わる」ですが、
「再生終了後」はaddEventListener(“ended”,function(){…})で取得できそうです。
次のスライドに移動するのはswiperのメソッドにあるslideNext()でいけます。
videoタグの操作については適当に検索かければでてきますので、それを参考にしてみてください。
@grapswiz様の記事→https://qiita.com/grapswiz/items/4ce35afa8bf30d7c0343
(videoタグの挙動については大分うろ覚えなので、間違っていたらごめんなさい)
videoタグは個人的にはかなり不安定なタグという印象があるので、不具合があるかもしれませんが、基本的な考え方は上の通りなので、参考までに。
console.logを使って、どこで間違いが出ているかを確認しながら慎重に作業してみてください。
ではでは
はじめまして。
swiper設置の際はこちらを参考にさせて頂きました。
ありがとうございました。
質問をしてもいいのでしょうか?
NEXTとPREVの矢印ボタンですが、
パソコンで見るとスライド画像の外に表示されてしまいます。
つまり画面の両端から規定値のpx分だけずれたところに表示されます。
これをどの端末でもスライド画像の内側に重なるようにするにはどうしたらいいでしょうか?
お時間ありましたらご回答頂ければ助かります。
くまさん
コメントありがとうございます!
矢印が外に出てしまうとのことですが、以下の原因が考えられます。
1 swiper.css(swiper.min.css)が設置されていない。
2 .swiper-containerのposition: relativeが消えている。
3 矢印(.swiper-button-prev、.swiper-button-next)が.swiper-containerの外にある。
4 矢印(.swiper-button-prev、.swiper-button-next)がposition :fixedになっている。
5 何かしらの原因で.swiper-containerが伸びているのに.swiper-slideの長さは短い。
6 矢印の画像に余白がついている。
こちらはオプションで設定するものではなく、cssの調整でどうにかする範囲になります。
デフォルトの状態であれば.swiper-containerにposition: relativeがあり、その中でposition: absoluteで左右に矢印がある形なので外に出ることはない・・・はずです。
googleの検証ツールで見てみることをオススメします。
もし難しい場合は、もう少し詳しく見ないとわからないのでソースコードを張るなどお願いします。
よろしくお願いします。
レーウィンさん
ご回答ありがとうございます。
さっきhtmlとscriptを貼り付けたら上手く投稿できませんでした。
>5 何かしらの原因で.swiper-containerが伸びているのに.swiper-slideの長さは短い。
これが考えられるのかなと思いました。
ちなみにスマホで見るとスライダー画像内に納まってます。
パソコンだとスライダー画像より画面が大きいのではみ出てる印象です。
スマホは画面とピッタリだから納まってるようです。
何か掲示すればわかりますか?
よろしくお願いします。
くまさん
すみません、説明不足でした。
このブログではSyntaxHighlighter Evolvedを入れているので、下サイト様を参考にしていただければソースコードを貼ることができます。
http://vdeep.net/wp-syntax-highlighter-evolved
[+html+]で開始、[+/html+]で終了です。
もしくは、Git hubなど、ソースコードが見えるサイトに上げていただければ確認できます。
スマホでは収まっているということはrelativeの範囲が広がっていますね。
よろしくお願いします。
補足ですが、間にある+は外してくださいませ。
レーウィンさん
ご回答ありがとうございます。
ちょっと無知なもんでやり方がよくわからなかったです・・・。
知恵袋に貼るとかじゃだめですかね(笑)
どの言語のどの部分とかありますか?
無理言って申し訳ありません。
レーウィンさん
ご回答ありがとうございます。
+取って貼ってみます!
貼れました!
今貼ったのは「CSS」です。
【HTML】【SCRIPT】も貼っておきます。
どうかよろしくお願いします。
【HTML】
【SCRIPT】
くまさん
おそらく再現できました。お手数おかけしました。
原因としてはswiper-slideの幅に対してimgの横幅が足りていないことが原因です。
swiperはswiper-containerに横幅を指定しない限りは横幅100%のスライダーを生成します。
swiper-slideも横幅を指定しない限りはswiper-containerと同じ横幅になります。
ただし、中に入っている要素、今回で言うとimgに関しては同じ横幅にはなりません。
なので、ブラウザの横幅が1100pxを超えると左右に隙間が出てしまいます。
シンプルな解決方法は2通りです。
1 imgにwidth: 100%を入れる。
2 swiper-containerにmax-widthを設定する。
お試しくださいませ~。
レーウィンさん
はんぱないっす!
完璧に直りました。
img100%にするとパソコンで大きくなりすぎるので
max-widthのほうを書きました。
本当に本当に感謝申し上げます。
ありがとうございました!!
くまさん
よかったですー!今後ともよろしくお願いします!
はじめまして。ssanです。
こちらのサイト参考にさせて頂いております。jsについてあまり詳しくないため助かっております。
swiperのスライダーが一枚進むと少し止まってしまうのですが
こちら止まらずに流れていくようにするので詰まっております。
もし可能でしたら、お手隙の際にでも、ご教授いただければ大変嬉しく思います。
ssanさん
コメントありがとうございます!
画像が流れるようにしたいということですが、swiperで行おうとすると少しカスタム要素が必要になるのでちょっと難しいかと思います(出来なくはないと思いますが、手間がかかるかと)
なので、infiniteSlideを使ってみてはいかがでしょうか?ad A Type Inc.様が記事にしてくださってるのでこちら参考に!
http://www.dataplan.jp/blog/jquery/586
もしくは、スライダー系プラグインのslickを使ってみてはいかがでしょうか?こちらはchocolat様が記事にしてくださってます。
https://chocolat5.com/tips/loop-image-animation/
swiperにはeasingを操作するオプションがないのがつらいですね。。
ありがとうございます!2つも例を用意して下さったのですね。。
試してみたのですが、メインの1つめのスライダーのflexsliderとのjsの相性が多分合わないのかjsが効かなくswiperだけやはり効いてるようなのです。メインのスライダーを今度新しく作る時に変えて検証してみます!
初めまして、swiper関連で調べててたどり着きました。
スライダー実装のサイトを作っている時に、
https://digipress.digi-state.com/tech/introducing-swiper-js/
このサイトのカバーフロースライダーを入れてみたのですが、
このスライドしてる画像にリンクは張れないのでしょうか???
張っても動きません。
大変初歩的なご質問で申し訳ありません。
当方素人なものでお教え頂けたら幸いです。
d4cさん
コメントありがとうございます!
ご質問の件についてですが、aタグを張っても反応がないのはaタグの高さが0pxになっている可能性が高いです!
といいますのも、DigPress様のスライダーはdivタグにbackgroundで画像を配置し、absoluteでテキストを配置しています。
absoluteで配置したテキストはaタグは高さ0pxとして認識し、画像も背景画像なので高さを取得できない、aタグはインライン要素ということでaタグの高さが0pxになってしまいます。
一番シンプルな回答としましては、aタグにdisplay: block;とheight: 100%;を追加すれば大丈夫です。
aタグをブロック要素にしてしまい、高さを設定することでクリックできるようにしてます。
お試しくださいませ!
ご返答ありがとうございます。
お教え頂いた通りにタグを入れるとリンクが起動しました。
やはり独学では限界があるんですね、、、
このようなサイトでの書き込みが初めてだったもので
素早いレスポンス、的確なアドバイス感謝いたします。
ありがとうございました。
d4cさん
うまくいったようでよかったです!また、少し緊張されたと思いますが、コメントしていただき大変嬉しいです!
検証方法さえわかれば技術的な部分は独学に限界はないですよー!時間がかかるかかからないかはありますけど、限界はないです!
・・・といっても説得力がないので、自分のやっていることを解説しますね。
それぞれの言語に、自分の思ったことと違うことが起きたとき(エラー)への対処法があります。
htmlとcssならブラウザの検証ツール、javascriptなら検証ツールとconsole.log()を使うことで、どこでエラーが出ているのか知ることができます。
今回のご質問の件も、リンクを設置しても飛ばないという状況を再現した時に、検証ツールで見たらaタグの高さが0だったのがわかったから対処できました。私の場合はこの時点で「あ、displayをblockにするかpositionをabsoluteすればいいな」と経験からわかりますが、経験がなくても原因がわかれば「aタグ 高さ 0」と検索すれば実は私が書いたことと同じことを書いてる人が出てきます。
さらに、この検証ツールを使い続け、何度もエラーを発生→修正をしていると、タグやプロパティのそれぞれの性質を理解することができるようになります。また、javascriptやプラグインなどがどのような処理をしているのかも少しずつ理解できるようになってきます。すると、いつの間にか実力がついていくということです。
ディレクション・営業のような人と接することについては独学は無理ですけど、技術的な部分はとにかくトライ&エラーです!
よき制作ライフを!
少しずつ学んでみます。
検証ツールなるものがあるんですね、使ってみます。
今現在も楽天ページで行き詰っている最中です。
ご相談させて頂くかもしれません。
ありがとうございました。
初めまして。Swiper関連で質問したいことがございます。
スライドの実装をしている時に
スクリプト側で
loop:true,
slidesPerView:3,
spaceBetween:100,
speed: 1000
を実装していてプレビューしてみると、開始位置が
2番目(indexは1)のスライド画像になってしまいます。
現在は
initialSlide:-1
を書いて強制的に1番目(indexは0)の画像にしていますが、
これよりいい方法はございますでしょうか。
もし可能でしたら、ご教授いただければ大変嬉しく思います。
光のプログラマーさん、コメントありがとうございます!
質問の内容についてですが
centeredSlides: true
で解決できます!ちょっと説明がわかりにくかったかもですね。。
お試しくださいませ!
レーウィンさん ご返信ありがとうございます
centeredSlides: true
を追加しましたら、1番目の画像からスライドが始まりました。
ご的確なアドバイスありがとうございました!
初めまして。だしまきと申します。
Swiper.jsについて調べていてこちらにたどり着きました。
Swiper.jsを導入し、2つのスライドA・スライドBを作るまではできたのですが、
AとBに別々のオプションを当てる方法が良く分かりませんでした。
jsにどのような記述を追加したらよいでしょうか?
お手透きのときにでもアドバイスを頂けたら幸いです。
宜しくお願いいたします。
だしまきさん
コメントありがとうございます。
swiperを2つ、別々のオプションで設定するのは変数とクラスを分ければ大丈夫です!
お試しくださいませ!
めちゃくちゃ早い対応ありがとうございます!
本当に悩んでいたところだったので助かりました!!
これからもこちらのブログ見させてもらいたいと思います\(^o^)/
はじめまして。
最近slickからswiperに移行し、
迷った際はいつもこちらのサイトを参考にさせていただいています。
ご質問なのですが、スライダーのレイアウトを
全体が見えている項目+前後の項目がちょっとみえている状態にしたい場合、centeredSlidesで奇数枚設定すればうまくいうことは理解したのですが、
偶数枚を表示することは可能なのでしょうか…
たとえば中心に2枚、前後に見切れている項目が1枚づつ…といった感じです。
突然のご質問すみません。どうしても解決できず
こちらにご質問させていただきました。
ぽんたさん
コメントありがとうございます!
質問の内容ですが、私の知識ではオプションのみでそれらを実装するのは難しいです。
なので、CSSでswiper-containerのwidthを伸ばし、かつマイナスのマージンで解決するのがいいと思います。
詳細の説明は省略しますが、swiper-containerのスタイルと、slidesPerViewを見ていただければなんとなくわかると思います。
widthがはみ出してしまうと思うので、overflow:hiddenを使用してうまく隠してください。
お試しくださいませ!
レーウィンさま
ご返信ありがとうございます。
やはりオプションの機能には無いのですね…
レーウィンさまのご指示どおりcssで調節しましたところ、
思い通りの見た目にすることが出来ました!
助かりました、ありがとうございます。
度々すみません、だしまきと申します。
複数スライドのオプション問題を解決していただきありがとうございます。
Swiper.jsを使っていてまた悩みがあるのですが、
Swiperの機能のオン/オフみたいなのはあるのでしょうか
スマホの場合はスライダーで表示を行い、
PCの場合はスライダーの機能を使用せず、
flexboxなどを利用して画像を表示する可能でしょうか?
もし可能であれば、大雑把でも良いので教えていただけたら幸いです。
宜しくお願いいたします。
申し訳ありません。
上記のようなコメントを残しておきながら、自己解決しました。
if文使って、スマートフォンの時にだけswiperを適応させるだけで済む話でした。
変なコメントを残してすいませんでした。
だしまきさん
自己解決できたようでよかったです!
一応ですが、既に付いてるswiperの機能を全て削除するのはdestroyで可能です。こちらは4.1.6の記事に書いてありますので参考までにどうぞ。
レスポンシブ対応については以下URLの4番が参考になるかと!
https://www.willstyle.co.jp/blog/724/
ではではー!
レーウィンさん
そんな機能があったのですね….
要所要所によってはそちらの方が良さそうなので、活用させてもらいたいと思います!
ありがとうございます!
swiperのwidthとheightについて質問がございます。
swiper-slideの縦幅と横幅を設定したく
パラメータでwidthとheightを設定し比率を4:3にしたいのですが、
テストで
width:560
height:420
を設定したのですが、スライドの横幅が120pxになってしまいました。
swiper-slideの縦幅と横幅を設定するときはCSSで設定した方がいいのでしょうか。
ご教授いただければ大変嬉しく思います。
光のプログラマーさん
コメントまたありがとうございます!
widthとheightに設定した数値は他のオプションに影響します。
例えば、slidesPerView:4とwidth:400を設定した場合、実際のスライドの横幅は400/4の100pxになってしまいます。
なので、他のオプションを考慮した上で数値を入力しなければなりません・・・面倒ですが・・・・。
また、4:3の比率となるとパーセントが一番理想ですが、widthとheightにはpxの入力しかできないのでその要件にはwidthのパラメータは使わずにcssでの調整にした方がいいかもしれません。
レーウィンさん
ご返信ありがとうございます。
パラメータは使わずにCSSで調整したのですが、
widthをpxや%でしたのですが、右にずれてしまいました。
何か良い解決方法はございませんでしょうか。
現在はこのようにCSSを実装しています。
.swiper-slide{
pointer-events: none;
opacity: .3;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
width: 560px !important; //スライドが4:3になるように調整
height: 420px; //スライドが4:3になるように調整
}
.swiper-slide img{
width: 100%;
height: 100%;
object-fit: contain;
}
.swiper-slide-active{
pointer-events: auto;
opacity: 1;
}
光のプログラマーさん
なるほどですね。
こちらの場合はswiperのオプションに対してslidesPerView: ‘auto’,を追記してみてください。
お試しくださいませ!
レーウィンさん
ご返信ありがとうございます。
slidesPerView: ‘auto’にしましたら、画像が中央配置になりました!
ご的確なアドバイスありがとうございます!
slidesPerViewで気になるところがあります。
1画面でスライド画像を3つ表示したい場合
slidesPerViewで3を指定するのと
slidesPerView:”auto”を指定するのとでは
何が違うんでしょうか。
例えば、width:900pxに対してswiperを設置した時に、
SlidePerView:3 にしたらslideのwidthは300pxとして設定されます。
SlidePerView:”auto” にしてslideのwidthをcssで300pxに設定したらSlidePerView:3とほぼ同じ挙動になります。
SlidePerView:”auto” にしてslideのwidthをcssで100pxに設定したらSlidePerView:9とほぼ同じ挙動になります。
SliderPerViewを数値で設定した場合は自動で数値が計算され、SlidePerView:”auto”で設定した場合は手動で数値を決めることができるというわけです。
ただ、4:3の比率という要件でかつ中に入っているものが画像のみである場合はSlidePerViewは数字で設定しつつ、画像をPhotoshop等で4:3でトリミングする方が管理面では楽かもしれませんね。
レーウィンさん
ご返信ありがとうございます。
slidesPerView: ‘auto’にしますとCSS側で調整が効くということなんですね!
今回の要件では、どんなサイズの画像でも比率を4:3にしないといけないということがありましたので、
このような質問をさせていただきました。
素晴らしいアドバイスをありがとうございます!
レーウィンさん
また、ご質問したいことがございます。
スマホでSwiperを使用したい時に、4:3の比率で画像を表示させたいのですが、
高さが不揃いの画像でも、綺麗に4:3に収まる方法はございますでしょうか。
css
————————————————–
//スライドの比率を4:3にする
.swiper-container{
width:100%
}
.swiper-slide{
width:100%
height: calc(100% * 3/4);
}
.swiper-slide img{
object-fit: contain;
}
————————————————–
javascript
————————————————–
breakpoints:{
// 横幅が414px以下なら
414:{
slidesPerView:1,
spaceBetween:20
}
}
————————————————–
に設定しているのですが、何かいい方法ございましたら、ご教示いただけますと幸いです。
また、swiperは複数の画像の横幅・縦幅が揃っているという前提で使うべきなのでしょうか。
光のプログラマーさん
コメントありがとうございます!
質問への回答ですが、swiperそのものにはトリミング機能は存在しないので、CSSで対応するのがよろしいかと!
1:object-fit: cover;を使用する
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
一番簡単な方法ですがIEはobject-fitに対応してない点だけ注意です。
2:画像を背景として使用する
swiper-slideに対して新しくクラスを追加して、それに背景を設定し、background-sizeを使用する方法です。
これならば実現はできますが、ソースを少し変更する必要があります。
3:position:absoluteとtransformを使用する。
画像で4:3よりも横長の画像が存在しない場合はこちら。逆に横長しかない場合はwidthをheightにすれば大丈夫です。
参考になれば幸いです。
swiperに限らず、普通にスライダーを実装したい場合は縦横はそろっている方が管理的にも楽ですね!
レーウィンさん
ご返信ありがとうございます。
1番を中心に対応してみようかと思います。
Swiperで高さ不揃いの画像スライドを流すのは、結構難しいですね(汗)。
素敵なアドバイスありがとうございます!
swiper で
https://www.kopjapan.com/blog/web/jquery%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E5%8F%B3%E3%81%8B%E3%82%89%E5%B7%A6%E3%81%B8%E7%84%A1%E9%99%90%E3%83%AB%E3%83%BC%E3%83%97%E3%81%A7%E6%B5%81%E3%81%97%E7%B6%9A%E3%81%91%E3%82%8B%E3%82%A2
のように連続ループで流し続けることって可能でしょうか?
えんくにさん
コメントありがとうございます!外出中なので簡単な解答で失礼します。
swiperはイージングを操作するのがデフォルトだと難しく、CSSも調整する必要があります。不可能ではないですが、時間と手間がかかるのでその動きをする場合はslickの方が優れてると思います!
コメントありがとうございます。
swiper のほうが使い勝手がなめらかだったので。。
了解しました。
自作を考えます。。
連休中にも関わらず、
いきなりのご質問申し訳ございません。
初心者で大変恐縮なのですが、、
とある案件で、ページ途中にボタンを設置してクリックでスライダーをモーダル表示。左右にスライドさせてマンガみたいに読ませる実装がございます。
しかし、表示はされるのですが、横幅が取得できず、少しリサイズするとswiperが反応してスライド可能になるのですが、原因が分からずでして、教えていただきたく、コメントさせていただきました。
たなかさん
コメントありがとうございます!簡単な返信で失礼します。
原因としてはいろいろ考えられますが、モーダルは基本的にdisplayプロパティを操作したり、DOMを追加したりして実装してると思います。それらはスライダー系プラグインとは実はあまり相性がよくないです。実装する場合はリセット系のオプション等を使用する必要があります。
swiper4の方の記事(この記事の最初に貼ってるリンク)のコメント、ビバ覇権さんへのコメントで返信している、destroyを使用する形でやってみてください。
ボタンを押した後、モーダル生成して、その後にdestroyと再度swiper生成でいけると思います!
ご返信ありがとうございます。
かしこまりました。
一度、教えていただいたことを実践します。
本当にご返信ありがとうございました!
コメント失礼します。
スライド4枚のうち、1枚目に動画をvideoタグで入れ、動画再生後にスライドさせたく、下記を試したのですが、ループで表示された際の時間が正確ではなく違う方法での実装を探しております。
data-swiper-autoplay=”時間”
またスライドはautoplayでスクロールもできる設定で考えております。
もし可能であれば、教えていただけたら幸いです。
宜しくお願いいたします。
コメントありがとうございます!簡単にですが回答させていただきます。
videoタグということはmp4やwebm形式を再生ということで大丈夫でしたでしょうか。その前提での回答になります。
試していただきました通り、スライダー側にvideoの長さと同じ時間をセットするのは失敗します。通信環境でvideoの開始時間が遅れたり、途中で止まったりするのでずれてしまいます。
なので、単純に「動画再生後にスライド」という風にします。
動画再生終了時というのをjsで取得することができます。参考URLはこちら。
https://qiita.com/grapswiz/items/4ce35afa8bf30d7c0343
で取得をして、
でvideo再生終了時にjsを発火させます。
複数videoタグがある場合でしたらjQueryの方が記述が楽かもしれないです。
次に、次のスライドへスライドさせる記述になりますが、これは
で可能です。これを先ほどのendedの中に入れます。
最後に、autoplayですが、
で開始することができます。
まとめますと
こんな感じにすればいけるのではないかと思います。
試してないので少し間違ってる可能性もありますが、コンソール等見て修正してくださいませー!
レーウィンさん
早速のご返信ありがとうございます。
私のやりたかったことが実現できました!
また、追加の質問で申し訳ないのですが、
autoplay以外のスクロールでスライドして1枚目の動画が表示されたとき途中から再生されてしまうことがあるのですが、
どんな場合でも動画を最初から再生させることは可能でしょうか。
お忙しい中恐縮ですがよろしくお願いします。
それでしたら、スライドが0枚目に来た時、動画の再生時間を0秒(スタート地点)にする、というjsを書けば大丈夫です。
まず、スライドの移動終了時の検知ですが、transitionEndで可能です。コールバック関数なので、4.0.0以前のswiperでは
4.0.0以降のswiperでは
と記述します。
次に「もし現在表示されているスライドが0枚目だったら」というjsを中に書きます。
現在表示されているスライドが何番目なのかは
で取得できます。
なので
で「もし現在表示されているスライドが0枚目だったら…の処理をする」jsになります。
最後に、videoを最初の状態にする方法ですが、先ほど参照にとお送りしたURLに「currentTime」というのがあると思います。これは指定した秒数の箇所に動画再生時間を移動させるというものです。これで0を指定すれば0秒目に移動、つまり最初からとなります。
まとめますと
となります。あとは必要に応じてvideo.play()やvideo.stop()等をはさんでいけば大丈夫かと!
スターウィンさん
とてもわかりやすくご説明いただきありがとうございます。
いただきましたコードを試したところ下記のようなエラーが出てしまいます。
TypeError: Cannot read property ‘activeIndex’ of undefined
あ、loopを設定してるんですね。
どうやらloopをtrueにしている時はonの中のtransitionEnd中では取得できないバグ?のようなものがあるみたいですね・・・。
すみません。
これは外に出せば大丈夫っぽいのでこちらお試しください。
あと、loopを設定しているようなのでactiveIndexだった部分をrealIndexにしてください。
activeIndexはloopをtrueにしている場合は正常な数字を取得できなくなります。realIndexでしたらloop時正常な値を取得できます。
お返事ありがとうございます。
いただいたコードを組み込んでみたのですが、
やはりエラーになってしまいます。。。
Uncaught TypeError: Cannot read property ‘on’ of undefined
私のコードは下記なのですが、
どこかおかしいのでしょうか。。。
let swiper;
let video = document.getElementById(‘video’);
window.onload = function(){
swiper = new Swiper(‘.swiper-container’, {
direction: ‘vertical’,
loop: true,
speed: 600,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
paginationClickable: true,
mousewheel: {
forceToAxis: false,
invert: false
},
keyboard: true,
pagination: {
el: ‘.swiper-pagination’,
type: ‘bullets’,
clickable: true
},
mousewheelControl: 1,
});
}
video.addEventListener(‘ended’, function() {
swiper.slideNext();
swiper.autoplay.start();
}, false);
swiper.on(‘transitionEnd’, function () {
if(swiper.realIndex == 0){
video.currentTime = 0;
}
});
すみません、こちらをonloadの中、最後に入れてみてください!
いけました!
ありがとうございます。
試したところ、
autoplayでのスライドで1枚目に戻った時の動画再生は問題ないのですが、
スクロールでのスライドで1枚目に戻った時の動画再生はバラバラになってしまいます。
こちらは解決できないでしょうか。。。
何度も何度も質問してしまい申し訳ありません。
すみません、これ以降の回答は明日にさせてくださいませ~。申し訳ないです!
こちらお試しください!
簡単に解説しますと、loop属性を設定したら1枚目と最後のスライドが複製されます。そのため、idが2つになってしまい正常に動かなくなる・・・といった感じです。
なので、タグでvideoタグを取得し、それぞれを0秒に戻す感じにしてます。
もっと短縮して書けると思いますので、そちらはお任せします。
毎度丁寧なご説明ありがとうございます。
頂きましたコードで試し、
スクロールでの動画再生は問題なくなったのですが、
autoplayでのループで1枚目の動画に戻った時動画が再生されなくなってしましました。
色々と試行錯誤したのですが原因が分からずで苦戦しております。
お忙しいところ申し訳ありませんが、お手隙の際に教えていただけたら嬉しいです。
すみません、返信遅くなりました。
1つ前におきました、
の箇所を
といった風にしてみてください!
お返事ありがとうございます。
無事解決致しました。
お忙しい中教えて頂きありがとうございました。
コメント失礼します。
先日、動画のスライドの件でコメントさせていただいたのものです。
度々の質問で申し訳ないのですが、
動画を20秒くらいのものに差し替えたら、再生後にに再生されなくなってしまい解決策を考えているのですが、なにか方法はないでしょうか…
うーん、ちょっとソースコード全体を見ないとなんともいえないレベルになってきました。。
videoの再生自体はplay();で可能なので、再生したいタイミングで実行すれば大丈夫だとは思います。動画の長さも関係なく。
4.1.6の記事で書いてある「イベント関係」にいろんなタイミングが記載されてあるので、それを見ながらplay()を試してみてください。
すみません!
ご連絡ありがうございます。
オプション設定の以下の部分を消したら、play();が効くようになり動画再生終了後にスライドが実現できました。
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
ただautoplayのループで1枚目に戻った時、動画は再生されたまま3秒程で強制的にスライドしてしまいます。
こちらは下記の部分がうまくいってないような気がするのですが、
どうでしょうか、、
if(swiper.realIndex == 0){
video[0].currentTime = 0;
video[1].currentTime = 0;
}
一度autoplayにすると「autoplayを停止する」というコードを書かない限りずっとautoplay状態になります。
なので、1枚目に戻る度にautoplayを停止する
を実行する必要があります。これをswiper.realIndex == 0の時に実行してみてください!
動画再生終了時には
でautoplayを実行する感じです!
どうもこんにちは。
swiperのloopを使用しているのですが、
最後の枚数になると、次の画像が表示されず、
少しスライドすると表示されます。
右に1枚目が来ても表示されるようにするには
どうしたらいいでしょうか。
とっくりさんコメントありがとうございます!
右に、ということは1画面に2枚以上スライドがある、もしくは左右に次のスライドが半分見えてるようなものを作成してる途中ということでしょうか?
もしそうでしたら、centeredSlidesを、trueにしてみてください!
参考URL https://web改善事例.com/demos/swiper/05.html
お返事ありがとうございます!
そうです。レスポンシブで、PCの場合はディスプレイサイズによりますが、3枚以上は表示されるページです。
そして、centeredSlides入れたのですが、
変わらずPCの方が途中で画像が映らなくなります。。
slidesPerViewはautoか2以上で設定されているということですかね。
もしautoで設定されているようでしたら、loopedSlidesオプションで数値を設定してみてもいいと思います。
上記当てはまらないようでしたらコードを見ないとなんともいえないところですが、現在絶賛風邪中なので詳細の返信は難しいです。teratail等で質問してみてください。申し訳ないです。
はじめまして。
初心者でお恥ずかしいご質問をしたいのですが、
スライドごとにBGMを設定する案件があるのですが、実現可能でしょうか?
最初にオンとオフの選択画面
オンをクリックでスワイパーが表示。
1枚目の音声が流れる。
次のボタンクリックで2枚目の音声が流れるといった仕様になります。。
たなかさん
コメントありがとうございます!
結構複雑な内容ですね…簡単な概要で失礼します。
まず、最初の音声についてはswiperは関係ないので説明は省略させていただきます。で、2枚目に行った時に音声が切り替わる点はslideChangeでタイミングを取得、ifでrealIndexが〇枚目の時音声を切り替えといった感じですね。少し上のコメントの動画関連で近しいことやってます!
はじめまして。
最近slickからswiperに移行しました。
PC時のみswiper起動させたい場合のコードを教えていただけないでしょうか。。。
上記に記載してくださっていたブログみて書き換えたりしてみたのですがうまくいかなくて(TT)
https://www.willstyle.co.jp/blog/724/
しんのすけさん
コメントありがとうございます!すみません、遅くなりました!
一応、方法としては2点あります。デバイスで分けるものと、横幅のpxで切り替えるものですね。
デバイスの分ける方法については以下サイト様参考にしていただければ!
https://manablog.org/sp-pc/
もう1つの横幅のpxで切り替えるものは以下みたいな形で作れば可能です。貼っていただいたurlのものと少しだけ形は違いますが。
896がブレイクポイントなのでその数値については任意に変えて下さい。
swiper.destroy()がswiperの全機能を削除するものになります。
返信ありがとうございます。
横幅のpxで切り替えたかったのでコードコピペしてやっと実装できました><
わかりやすい説明とコードありがとうございます!
いつもお世話になってます!
質問なのですが
swiper-slideの幅を固定にせず、
それぞれの幅でスライドさせるにはどうしたらいいでしょうか。
テキストのスライドなのですが、幅が固定されると
改行されてしまいます。
ご教授いただけますと幸いです。
slidesPerViewで複数枚を動かすときに、フェードのエフェクトを入れたいのですができませんでした。
代替案等はありますでしょうか?
キヅさん
コメントありがとうございます!
結論から書きますと、slidesPerViewはeffectでfade設定時、動作はどうやってもできません。(私個人の知識の限り)
海外の質問サイトでも同様の質問をしてるのを見つけましたが、無理との解答でした。
なので、別のプラグインを探すか自分でコードを書くのがいいと思います。
ただ、これも私の知る限りですが、プラグインでそれを実現できるのは難しそうなので、自作がよろしいかと。
slickにもslidesToShowとfadeのオプションはありますが、同時に設定はできません。他のスライダーは確認してはいませんが・・・。
お返事ありがとうございます!
自作で頑張ってみます・・・
swipeに関してとても詳細にわかりやすく解説されており、
いつも参考にさせていただいておりありがとうございます。
すみません下記の質問をさせてください。
トップページのスライドショーをswipeに変更してみました。
画像は600-200px、40枚程度をfadeでスライドショーしているのですが、だんだん枚数の後半になると1枚前の残像が現在のスライドに重なって見える現象が目立ってきて困っています。
fadeEffect: {
crossFade: true
},
を加えてみたら、程度が大夫よくなりましたが完全には消えません。前のスライドの残像(透過度?)を消す方法があればご教授お願いできないでしょうか。
初めてで唐突な質問申し訳ございません。
どうぞよろしくお願いいたします。
めだめださん
コメントありがとうございます!
うーん、試しに50枚のfadeを見てみましたけど、そういった現象は起きないですね・・・。
試してみたオプションはこんな感じです
他のオプション、javascript、cssが原因の可能性があります。
同じ現象を再現したテストページを見てみないとちょっと何とも言えないですね。。
すみません。
お返事と確認していただきありがとうございます。
こちらのオプションは下記の通りです。
.swiper-containerX {
width: 600px;
height: 200px;
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
}
var swiper = new Swiper (‘.swiper-containerX’, {
loop: true,
speed: 1200,
slidesPerView: 1,
effect: ‘fade’,
fadeEffect: {
crossFade: true
},
autoplay: {
delay: 7000,
}
});
どうも、20枚を過ぎるあたりから重なりが目立ち始めます…
お手数をお掛け致しますがよろしくお願いいたします。
大変申し訳ございません。
まだ原因はわからないのですが、再現しなくなってしまいました…
原因を確認の上、あたらめてご報告させていただきます。
どうも、検索でこちらのサイトを見つけて、質問させていただきます。
var swiper;
jQuery(window).load(function() {
swiper = new Swiper(‘.swiper-container’, {
slidesPerColumn: 2,
slidesPerView: 3,
slidesPerGroup: 6,
});
});
こういう感じで2段にして、1画面あたり6枚の画像を表示させてまして、現状12枚の画像があるので、2ページ分になるのですが、1025px以下のブラウザ幅サイズにすると、下のドットが12個になってしまい、右10個は空表示の状態になってしまいます。
1026px以上ですと、ドットは2個で空のページはないのですが。
ちなみに、ellementorプラグイン(WORDPRESS)のカルーセルでのswiper.jpになります。
解決策ありましたら、どうぞよろしくお願いいたします。
コメントに対する返信遅れました!すみません
下のドットとはpaginationでしょうか?
うーん、こちら試してますがそういったことは起きない
バージョンによる不具合もあるかもしれないので、最新のswiperをお試しください!
よろしくお願いします。