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-->
Demo Page for Swipe-Compatible Image Slider Using jquery.flexslider.js
Demo of displaying a swipe-compatible image slider using jquery.flexslider.js
Swiping is essential for smartphones and tablets, right?
Source：FlexSlider
※ Use it at your own risk.
Do not use the Google Analytics tag within the demo page tags.
