挙動不審なSwiper対策

閲覧数: 1,015(3)

ここのトップページで「おすすめ記事」をスライダー形式で表示してくれているのが「Swiper」です。これまで使ってきたテーマは全て無料テーマで「おすすめ記事」を「固定ページ」から選択する仕様でした。でもやっぱり「おすすめ記事」は「投稿」から選びたいのが人情、、、でも有料テーマは使わないポリシーなので、無い知恵を絞って悪戦苦闘して実装したのが「おすすめ記事」です。さらに「SWIPERでSLIDER」では「投稿」から選べるようになった「おすすめ記事」をスライダー形式で表示するようにしました。手軽で強力なスライダー機能である「Swiper」は一方で機能があり過ぎて思った仕様に設定がハマるまでは試行錯誤するしかありません。

簡単にここの仕様をおさらいすると、まず「おすすめ記事」を「投稿」から最大5まで選ぶ事が出来てパソコンのブラウザではそのうち3投稿がスライド表示される設定(slidesPerView: 3)です。そして効果(effect: ‘coverflow’)で重なりと傾きを指定しているので実際にはスライド形式で3枚表示した両端にそれぞれ前後のスライドの一部が表示されています。「loop: true」は最後のスライドから先頭のスライドに戻るかどうかの指定です。ここを「true」にすると「カルーセル」のようにグルグル回ります。スライドが5枚あるのでグルグル回して確認してみたところ、2周目以降で最後のスライドが表示されている時に次のスライドが表示されない現象が発生しました。この時は「centerdSlides: true」というオプションが解決してくれそうだったので指定してみました。「centredSlides」が指定されていない場合、先頭のスライドは「slidesPerView」で指定したスライド数の一番左側に来ます。ここでは3枚表示を指定しているので3枚のうち一番左側に先頭スライドが来ます。
「centredSlides」が指定されていると先頭スライドは2枚目に表示されます。左側からの並びで言えば3枚目、1枚目、2枚目の順となります。これで一見すると問題が解決したように見えたのですが、カルーセルを逆に回してみたところ最後のスライドから突然2枚目のスライドへワープする現象が発生してしまいました。元の現象より悪化してしまっています。順送りはOKになったのに逆送りが破滅してしまいました。逆送り破滅状態はWindowsでは発生しますがOSXでは発生しませんでした。かなり環境依存度(OSやブラウザとCSS)の高い障害です。

振り出しに戻りまた山のようなオプションから解決してくれそうなパラメータを選びます。そもそも「ループする時に最後のスライドの後に空白が来てしまう」という現象だったので「loopAdditionalSlides: 1」と言うのを指定してみました。これが大当たりでループの最後のスライドに来た時ちゃんと次のスライドをちょっとだけ表示するようになりました。そして恐る恐るカルーセルを逆に回してみたところ例のワープ現象も起きず、どうやら問題は解決したようでした。現在の仕様は以下の通りです。

var mySwiper = new Swiper ('.swiper-container', {
		loop: true,
		loopAdditionalSlides: 1,
		speed: 600,
		slidesPerView: 3,
		grabCursor: true,
		direction: 'horizontal',
		effect: 'coverflow',
		breakpoints: {
			480: {
				slidesPerView: 1,
			},
			812: {
				slidesPerView: 2,
			}
		},
	pagination: {
		el: '.swiper-pagination',
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	scrollbar: {
		el: '.swiper-scrollbar',
	},
	coverflowEffect: {
		rotate:         20,
		stretch:        0,
		depth:          200,
		modifier:       1,
		slideShadows:   false,
	},
	mousewheel: {
		invert: false,
	},
});
【最終更新日: 2021年4月4日】
カテゴリー公開, 閑話(IT)タグ, , , ,
最近の更新

3月の初投稿は、ネタが無いのでIT閑話でw mediawikiのバージョン制限で、しばらくElast  続きを読む

dockerとiptables
blank

クラウドサーバーを利用する場合、ファイアウォール(Firewalld/iptables)の設定に失敗  続きを読む

トリミング
blank

mediawikiのextensionsの一つに、Dynamic Page List(3rd Par  続きを読む

Elasticsearch 6.8.11
blank

2017年末に「2.4.6」から「5.6.5」へバージョンアップして以来の大幅バージョンアップです。  続きを読む

関連記事の大原則
blank

ググったりしてあるページにたどり着いた閲覧者に対して、それに関連する記事を提示して少しでもサイトの滞  続きを読む

子テーマ化詳細
blank

子テーマ化にあたって具体的に修正した部分の説明をします。まずは「header.php」から。サイトの  続きを読む

スポンサーリンク

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください