Today, we would like to show you the concept of creating a simple jQuery responsive content slider for your responsive web application.
In large devices, the content is aligned vertically and you can browse through the content by scrolling up or down of the browser’s scroll bar; In small devices, the content will aligned horizontally, and you can swipe left or right to browse through the content.
Here is the demo to shows you how is the content slider works in PC and mobile devices. Resize the demo page window’s size, to simulate large and small screen.
Ok. Let’s start to get our hand dirty!
The HTML
Initially, we will create a meta tag for mobile devices; include jQuery library and the jQuery touch swipe library into our HTML document.
[html]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<title>onlyWebPro | Create jQuery Responsive Content Slider For Mobile In 5 Minutes!</title>
</head>
<body>
</body>
</html>
[/html]
Note: If you would like to find out more about jQuery touch swipe library, please visit jQuery touch swipe library’s official website.
Then we create our HTML structure as shown below:
The main container has the ID = “test”. It contains 3 children of inner boxes or better known it as slides, which we will apply interactivity to it later.
[html]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<title>onlyWebPro | Create jQuery Responsive Content Slider For Mobile In 5 Minutes!</title>
</head>
<body>
<div id="test">
<div class="quest quest1">Quest 1</div>
<div class="quest quest2">Quest 2</div>
<div class="quest quest3">Quest 3</div>
</div>
</body>
</html>
[/html]
The CSS
Our CSS is relatively simple, we just have to create a base CSS styling for PC & mobile, then a customise style for mobile devices.
[css]
<style>
#test {
background-color: #f1f1f1;
margin: 0 auto;
padding: 20px 0;
width: 640px;
}
.quest {
background: #ccc;
display: block;
height: 240px;
margin: 10px auto;
opacity: 1;
width: 320px;
}
.tablet {
height: 280px;
position: relative;
}
.tablet .quest {
position: absolute;
margin-left: -160px;
}
</style>
[/css]
The JavaScript
We will start by initializing a function to check whether the users is load the page with large screen or small screen when the DOM is ready. If users is loaded the page with small screen such as tablet or smartphone, then we will initialize jQUery swipe touch enabled content slider.
Here is the breakdown of codes & explanation:
First, we check the window’s width, if it is smaller than 1200px, then we will start to convert 3 inner boxes of DIV’s styles to tablet,by adding a class “tablet” to the “test” DIV.
[javascript]
$(document).ready(function(){
var $init_slider = function() {
$(‘#test’).addClass(‘tablet’);
}
// When document is ready check the screen size
if($(window).width() < 1200) {
$init_slider();
}
}); // end $(document).ready
[/javascript]
Next, we set the visibility and position of the 3 inner boxes.
[javascript highlight=”5,6-15″]
$(document).ready(function(){
var $init_slider = function() {
$(‘#test’).addClass(‘tablet’);
$(‘.quest’).css({
opacity: 0,
display: ‘none’,
left: ‘100%’
});
$(‘.quest:first-child’).css({
opacity: 1,
display: ‘block’,
left: ‘50%’
});
}
// When document is ready check the screen size
if($(window).width() < 1200) {
$init_slider();
}
}); // end $(document).ready
[/javascript]
Once the layout is converted, we will start enable swiping.
We have defined 5 variables to control how many inner box (slide) to be moved each time; the current slide counter; and the total slide counter.
[javascript highlight=”17,18-23″]
$(document).ready(function(){
var $init_slider = function() {
$(‘#test’).addClass(‘tablet’);
$(‘.quest’).css({
opacity: 0,
display: ‘none’,
left: ‘100%’
});
$(‘.quest:first-child’).css({
opacity: 1,
display: ‘block’,
left: ‘50%’
});
$(function() {
var $count = 1;
var $total = 3;
var $left_bound = ‘10%’;
var $center_bound = ‘50%’;
var $right_bound = ‘90%’;
});
}
// When document is ready check the screen size
if($(window).width() < 1200) {
$init_slider();
}
}); // end $(document).ready
[/javascript]
Ok. Now, we will write a IF ELSE condition to check the direction of swipe. We also utlize the variables that we have defined earlier to check is current slide is the last slide? For instance, if $count is lesser than $total, then we start animate the current slide.
[javascript highlight=”23,24-65″]
$(document).ready(function(){
var $init_slider = function() {
$(‘#test’).addClass(‘tablet’);
$(‘.quest’).css({
opacity: 0,
display: ‘none’,
left: ‘100%’
});
$(‘.quest:first-child’).css({
opacity: 1,
display: ‘block’,
left: ‘50%’
});
$(function() {
var $count = 1;
var $total = 3;
var $left_bound = ‘10%’;
var $center_bound = ‘50%’;
var $right_bound = ‘90%’;
//Enable swiping…
$("#test").swipe( {
//Generic swipe handler for all directions
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
if(direction == ‘left’) {
if($count < $total) {
$(‘.quest’+$count).animate({
left: $left_bound,
opacity: 0
},400, function() {
// animation complete
$(this).hide();
});
$count++;
$(‘.quest’+$count).show().animate({
left: $center_bound,
opacity: 100
},400);
} else {
// do nothing
}
}
else if(direction == ‘right’) {
if($count == 1) {
// do nothing
} else {
$(‘.quest’+$count).animate({
left: $right_bound,
opacity: 0
},400, function() {
// animation complete
$(this).hide();
});
$count–;
$(‘.quest’+$count).show().animate({
left: $center_bound,
opacity: 100
},400);
}
}
}
});
});
}
// When document is ready check the screen size
if($(window).width() < 1200) {
$init_slider();
}
}); // end $(document).ready
[/javascript]
Lastly, we will destroy the tablet styles and swipe function when the screen size is larger than 1200px.
[javascript highlight=”74,75-86″]
$(document).ready(function(){
var $init_slider = function() {
$(‘#test’).addClass(‘tablet’);
$(‘.quest’).css({
opacity: 0,
display: ‘none’,
left: ‘100%’
});
$(‘.quest:first-child’).css({
opacity: 1,
display: ‘block’,
left: ‘50%’
});
$(function() {
var $count = 1;
var $total = 3;
var $left_bound = ‘10%’;
var $center_bound = ‘50%’;
var $right_bound = ‘90%’;
//Enable swiping…
$("#test").swipe( {
//Generic swipe handler for all directions
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
if(direction == ‘left’) {
if($count < $total) {
$(‘.quest’+$count).animate({
left: $left_bound,
opacity: 0
},400, function() {
// animation complete
$(this).hide();
});
$count++;
$(‘.quest’+$count).show().animate({
left: $center_bound,
opacity: 100
},400);
} else {
// do nothing
}
}
else if(direction == ‘right’) {
if($count == 1) {
// do nothing
} else {
$(‘.quest’+$count).animate({
left: $right_bound,
opacity: 0
},400, function() {
// animation complete
$(this).hide();
});
$count–;
$(‘.quest’+$count).show().animate({
left: $center_bound,
opacity: 100
},400);
}
}
}
});
});
}
// When document is ready check the screen size
if($(window).width() < 1200) {
$init_slider();
}
// When window is resize
$(window).resize(function(){
if($(window).width() < 1200) {
$init_slider();
} else {
$(‘#test’).removeClass(‘tablet’);
$("#test").swipe("destroy");
$(‘.quest’).css({
opacity: 1,
display: ‘block’
});
}
});
}); // end $(document).ready
[/javascript]
And save your document and preview it! Try resize your browser, you should able to see the cool responsive content slider!
We hope you enjoyed this tutorial and find it useful!
The Final Code
[html]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<title>onlyWebPro | Create jQuery Responsive Content Slider For Mobile In 5 Minutes!</title>
<style>
#test {
background-color: #eee;
height: 320px;
margin: 0 auto;
width: 640px;
}
.quest {
background: #ccc;
display: block;
height: 240px;
margin: 0 auto;
opacity: 1;
width: 320px;
}
.tablet {
position: relative;
}
.tablet .quest {
position: absolute;
margin-left: -160px;
}
</style>
</head>
<body>
<div id="test">
<div class="quest quest1">Quest 1</div>
<div class="quest quest2">Quest 2</div>
<div class="quest quest3">Quest 3</div>
</div>
<script>
$(document).ready(function(){
var $init_slider = function() {
$(‘#test’).addClass(‘tablet’);
$(‘.quest’).css({
opacity: 0,
display: ‘none’,
left: ‘100%’
});
$(‘.quest:first-child’).css({
opacity: 1,
display: ‘block’,
left: ‘50%’
});
$(function() {
var $count = 1;
var $total = 3;
var $left_bound = ‘10%’;
var $center_bound = ‘50%’;
var $right_bound = ‘90%’;
//Enable swiping…
$("#test").swipe( {
//Generic swipe handler for all directions
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
if(direction == ‘left’) {
if($count < $total) {
$(‘.quest’+$count).animate({
left: $left_bound,
opacity: 0
},400, function() {
// animation complete
$(this).hide();
});
$count++;
$(‘.quest’+$count).show().animate({
left: $center_bound,
opacity: 100
},400);
} else {
// do nothing
}
}
else if(direction == ‘right’) {
if($count == 1) {
// do nothing
} else {
$(‘.quest’+$count).animate({
left: $right_bound,
opacity: 0
},400, function() {
// animation complete
$(this).hide();
});
$count–;
$(‘.quest’+$count).show().animate({
left: $center_bound,
opacity: 100
},400);
}
}
}
});
});
}
// When document is ready check the screen size
if($(window).width() < 1200) {
$init_slider();
}
// When window is resize
$(window).resize(function(){
if($(window).width() < 1200) {
$init_slider();
} else {
$(‘#test’).removeClass(‘tablet’);
$("#test").swipe("destroy");
$(‘.quest’).css({
opacity: 1,
display: ‘block’
});
}
});
}); // end $(document).ready
</script>
</body>
</html>
[/html]