【FlexSlider 2】両サイドのスライドをチラ見せする方法

2023-09-09

jQueryのスライダープラグイン「FlexSlider 2」でスライドの両サイドをチラ見せするサンプルをご紹介｡

サンプル

PCで見ると､左右のスライドがチラ見えしています｡

HTML

FlexSliderを <div class="flexslider_wrap"> で囲みます｡

<div class="flexslider_wrap">
	<div class="flexslider">
		<ul class="slides">
			<li><img src="img01.jpg"></li>
			<li><img src="img02.jpg"></li>
			<li><img src="img03.jpg"></li>
			<li><img src="img04.jpg"></li>
		</ul>
	</div>
</div>

JS

ごく普通にFlexSliderを実行します｡

$(".flexslider").flexslider({
	animation: "slide"
});

CSS

以下のようなCSSを書きます｡
5行目の「max-width」は適宜変更してください｡

.flexslider_wrap {
	overflow: hidden;
}
.flexslider_wrap .flexslider {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.flexslider_wrap .flexslider .flex-viewport {
	overflow: visible!important;
}

5行目の「max-width」を適宜変更すれば､正方形などにも対応できます｡

注意点

スマホなどで見ると､両サイドが少しだけ見えて逆に変な感じがします｡

FlexSlider 2 スマホ

今回の場合､スライダーの幅が640pxを下回るとこのような状態になってしまうので

メディアクエリでスライダーの幅が640px以上になるような画面幅に限定するといいかもしれません｡

@media screen and (min-width: 660px) { /*スライダーの幅が640px以上になる画面幅*/
	.flexslider_wrap {
		overflow: hidden;
	}
	.flexslider_wrap .flexslider {
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
	}
	.flexslider_wrap .flexslider .flex-viewport {
		overflow: visible!important;
	}
}