How to Display a Swipe-Compatible Image Slider Using jquery.flexslider.js｜DAD UNION

Here, I will introduce how to display an image slider that supports swiping on smartphones and tablets using jquery.flexslider.js.

CSS for Swipe-Compatible Image Slider

※ Load the flexslider.css file. The .flexslider class represents the image slider area. Modify as needed.

<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	padding: 0;
	margin: 0;
}
h1{
	font-size:18px;
	line-height:1.6em;
	text-align:center;
	font-weight:normal;
	padding:10px 0;
}
.clWrap{
	width:800px;
	margin:0 auto;
	text-align:left;
}
.flexslider{
	width:300px;
	height:300px;
	margin:0 auto;
}
</style>

JavaScript for Swipe-Compatible Image Slider Using jquery.flexslider.js

※ Load the jquery.min.js and jquery.flexslider.js files. Set the animation method for the image slider area (.flexslider) using $(‘.flexslider’).flexslider({options}).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script defer src="jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
	$('.flexslider').flexslider({
		animation: "slide",
		start: function(slider){
			$('body').removeClass('loading');
		}
	});
});
</script>

HTML for Swipe-Compatible Image Slider

※ Within the image slider area class=”flexslider”, prepare multiple images to slide using li tags as child elements of class=”slides”.

<div class="clWrap">
    <h1>Multiple images slide left and right.<br />Swipe left or right on smartphones to slide the images.</h1>

        <div class="flexslider">
          <ul class="slides">
            <li><img src="i1.jpg" alt="Image 1" /></li>
            <li><img src="i2.jpg" alt="Image 2" /></li>
            <li><img src="i3.jpg" alt="Image  3" /></li>
            <li><img src="i4.jpg" alt="Image 4" /></li>
            <li><img src="i5.jpg" alt="Image 5" /></li>
          </ul>
        </div>

</div><!--/clWrap-->