挙動不審なSwiper対策

閲覧数: 329(26)

ここのトップページで「おすすめ記事」をスライダー形式で表示してくれているのが「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閑話, 公開タグ, , , ,
ページナビのテキスト
2021年4月1日

記事ページの下部に前後の記事(投稿)へのリンクが表示される仕様なのだが、「カテゴリーに制限」をかけて  続きを読む

閲覧数まとめ
blank
2021年3月25日

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

閃きは大事だw
blank
2021年3月23日

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

ElasticPress 3.5.6
blank
2021年3月19日

マイナーバージョンアップにも関わらず、検索スコアリングのパラメータが微調整された結果、期待する検索結  続きを読む

管理画面を制限する
blank
2021年2月22日

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

検索精度を高める
blank
2020年11月1日

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

スポンサーリンク

コメントを残す

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