挙動不審なSwiper対策

閲覧数: 138(18)

ここのトップページで「おすすめ記事」をスライダー形式で表示してくれているのが「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,
	},
});
【最終更新日: 2019年5月26日】
カテゴリーIT閑話, 公開タグ, , , ,
検索精度を高める
2020年11月1日

検索ネタを連発するのはElasticsearchやElasticPresがバージョンアップした時のお  続きを読む

ElasticPress日本語設定2020年版
blank
2020年10月29日

ElasticsearchをWordpressで利用するためのプラグインであるElasticPres  続きを読む

ElasticPress 3.5
blank
2020年10月22日

Elasticsearch用のプラグインであるElasticPressがメジャーバージョンアップ(3  続きを読む

Elasticsearch 6.8.11
blank
2020年10月2日

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

パンくずリスト詳細
blank
2020年5月12日

テーマの「マイナーチェンジ」に伴って「パンくずリスト」の仕様を若干変更しました。一つ前のテーマではパ  続きを読む

カテゴリーを制限する
blank
2020年5月11日

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

コメントを残す

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