【slick.js】ページャーをドットの両脇にくっつける方法

やり方

CSSに以下を追記してください｡
(もしくは「slick.css」と「slick-theme.css」の該当箇所を以下のように書き換えてください｡)

.slider {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.slider .slick-list {
	order: -1;
	width: 100%;
}

.slider .slick-prev,
.slider .slick-next {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	transform: none;
}

.slider .slick-next {
	order: 1;
}

.slider .slick-dots {
	position: relative;
	bottom: 0;
	width: auto;
	max-width: calc(100% - 70px);
}

スライダー部分全体を「Flexbox」にし､子要素の順番を「order」を使って以下のように変更｡

1. スライダー
2. ページャー(前へ)
3. ドット
4. ページャー(次へ)

そしてページャーとドットの「position: absolute;」を解除しています｡

すると､ページャーがドットの両サイドに配置され､ドットの増減に対応できます！

コメント

「できました！」などの報告もお待ちしております｡