挙動不審なSwiper対策

閲覧数: 89(0)

ここのトップページで「おすすめ記事」をスライダー形式で表示してくれているのが「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年5月12日

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

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

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

マイナーチェンジ
blank
2020年3月23日

かれこれ一年近くほったらかしだったので、気合をいれて「テーマ変更」と思っていたのですが、、、いろいろ  続きを読む

6月の検索ワードまとめ
blank
2019年6月30日

6月の検索ワードのまとめです。 意外なところで「zabbixダウングレード」が複数回検索され、単独の  続きを読む

アクセシビリティ対策
blank
2019年6月23日

テーマカスタマイズの一環で、トップページに一覧表示されている「写真を左右交互に表示する」ようにした際  続きを読む

dockerとproxy
blank
2019年6月18日

dockerやdocker-composeをプロキシ環境下で使うのに苦労したので忘れないようにメモし  続きを読む

コメントを残す

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