[FlexSlider 2] How to show a peek of the slides on both sides

Sample

When viewed on a PC, you can see a peek of the slides on both sides.

<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>

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

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

By changing "max-width" on line 5 as appropriate, you can also support squares and other shapes.

Notes

When viewed on smartphones, seeing just a peek of both sides can look strange.

In this case, if the slider width falls below 640px, it will look like this, so

It might be a good idea to limit it to screen widths where the slider width is 640px or more using media queries.

@media screen and (min-width: 660px) { /*Screen width where the slider width is 640px or more*/
	.flexslider_wrap {
		overflow: hidden;
	}
	.flexslider_wrap .flexslider {
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
	}
	.flexslider_wrap .flexslider .flex-viewport {
		overflow: visible!important;
	}
}