挙動不審なSwiper対策

閲覧数: 463(2)

ここのトップページで「おすすめ記事」をスライダー形式で表示してくれているのが「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閑話, 公開タグ, , , ,
検索精度を高める

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

閲覧数まとめ
blank

閃きついでに総合計と週合計をフラグで制御する方式に変更してみた。これまではベタに関数をまるまるコピー  続きを読む

緊急事態宣言で外出自粛になり...
blank

せっかくのゴールデンウィークなのに、2年連続で緊急事態宣言下となり、外出自粛中。暇なので小ネタで遊ぶ  続きを読む

管理画面を制限する
blank

このサイトではネット上のさまざまな攻撃からの防御のため、Wordfenceプラグインの無料版を使用し  続きを読む

タイトルを抜粋する
blank

関連記事プラグインを使って、記事本文の下に「関連記事」を表示している。情報としては、タイトル、画像、  続きを読む

閃きは大事だw
blank

このサイトは、あくまでもCMSであるWordPressの構築やクラウドであるAWSの運用ノウハウ取得  続きを読む

スポンサーリンク

コメントを残す

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