Build a Responsive Slider using Flexslider and Animate.css
20th Feb 2014 | Posted by Eko S. | 2 CommentsDisplay a slideshow in your website is a one way to attract the visitors attention, beside that a slider is a very effective way to display your important content in the limited space. Now, before we start to create our slider, in my opinion there are some important factors to consider:
-
Don’t make your slider run automatically.
For me it’s important, you should give users full control about what they want to see. I wonder what will be done by the visitors when the slide is change automatically? Waiting? How about if the waiting time is too long or too fast? I hope they will not leave your site. -
Make your slider responsive.
With the increasing number of mobile users today, the responsive feature is very important. So your content can access anywhere by using any devices.
Let’s get started!
This tutorial is based our Freebie: 8 Custom Sliders (PSD). And we’ll use flexslider v2.2 (latest version when this tutorial is created). For the caption animation, we’ll use Animate.css. Both – Flexslider and Animate.css is under MIT License.
Tutorial Assets
To complete this tutorial you’ll need the following assets:
- Flexslider by WooThemes (flexslider.css and jquery.flexslider.js)
- Animate.css
- jQuery-1.10.2.js
- Image files (slide1-pink-arrow.png, slider1-bg.png, slider2-bg.png, slider3-bg.png, and span-overlay.png)
Step 1: Create our Folder Structure
The very first step is creating our folder structure, we’ll create one main folder – myslider that there are 3 folders called css, img, and js inside. Beside that we also create index.html and style.css file inside the main folder, see the image below:
Step 2: HTML markup
Let’s start by making a HTML markup then save with the name index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>MySlider</title>
...
</head>
<body>
<div class="container">
<!-- Slide start -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/img/slider1_bg.png" class="img-slides"/>
</li>
<li>
<img src="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/img/slider2_bg.png" class="img-slides"/>
</li>
<li>
<img src="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/img/slider3_bg.png" class="img-slides" />
</li>
</ul>
</div>
</div>
</body>
</html>
Then please add the CSS link below before
<link rel="stylesheet" href="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/css/flexslider.css"/> <link rel="stylesheet" href="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/style.css"/>
And for the jQuery, please add this before
<script src="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/js/jquery_1.10.2.js"></script>
<script src="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/js/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({slideshow: false});
});
</script>
Step 3: CSS style
By using the script above, actually you have a responsive slider, but we need to make it more stylish based our need by add the CSS style below, than give a name style.css
.container{
height: auto;
max-height: 403px;
width: 69.985359%;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top:0;
border: 1px solid #cacaca !important;
padding: 3px !important;
}
.flexslider{
border-radius: 0 !important;
overflow : hidden;
position: relative;
padding: 3px !important;
border: 0 !important;
width: 100%;
margin-left: -3px !important;
margin-top: -3px !important;
}
Step 4: Slide navigation button
By default, Flexslider will display to navigation button: flex-direction-nav and flex-control-nav, as you can see in the image below.
But in this tutorial, we’ll use only flex-direction-nav. To do that you should hide the flex-control-nav by adding the css script below on your style.css file
.flex-control-nav {display: none !important;}
Then we can fix the display of flex-direction-nave button:
.flex-direction-nav a {
width: 66px !important;
height: 66px !important;
margin: 0 -43px 0 -43px !important;
border-radius: 50%;
text-indent: 9999px !important;
-webkit-box-shadow: 0px 4px 0px 0px rgba(51, 50, 50, 0.53);
-moz-box-shadow: 0px 4px 0px 0px rgba(51, 50, 50, 0.53);
box-shadow: 0px 4px 0px 0px rgba(51, 50, 50, 0.53);
opacity: 1 !important;
}
.flex-direction-nav a.flex-prev{
background: #e5e5e5 url(/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/img/slide1_pink_arrow.png) no-repeat right 0 ;
margin-top: 20px !important;
}
.flex-direction-nav a.flex-next{
background: #e5e5e5 url(/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/img/slide1_pink_arrow.png) no-repeat;
margin-top: 20px !important;
}
Then to make the text that still appear on flex-direction-nav is hide, we can add this script:
.flex-direction-nav a:before{content: none !important;}
By default flex-direction-nav only appear is the slider is hover, but we want the button always appear so we need to edit the flexslider.css file on line 67:
.flexslider:hover .flex-prev { opacity: 0.7; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.7; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
Then please change to:
.flexslider .flex-prev { opacity: 0.7; left: 10px; }
.flexslider .flex-next { opacity: 0.7; right: 10px; }
.flexslider .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
Step 5: Adding caption/slider contents
Now we’ll add the content inside the slider. First, make the caption inside
<li>...</li>
then please edit our index.html file like the script below:
<div class="flexslider">
<ul class="slides">
<li>
<img src="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/img/slider1_bg.png" class="img-slides"/>
<div class="flex-caption">
<h1> Unde omnis iste natus error aperiam,</h1>
<span>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<a href="#" class="button pink"> Read More </a>
</span>
</div>
</li>
<li>
<img src="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/img/slider2_bg.png" class="img-slides"/>
<div class="flex-caption">
<h1>Unde omnis iste natus error aperiam,</h1>
<span>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<a href="#" class="button pink"> Read More </a>
</span>
</div>
</li>
<li>
<img src="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/img/slider3_bg.png" class="img-slides" />
<div class="flex-caption">
<h1>Unde omnis iste natus error aperiam,</h1>
<span>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<a href="#" class="button pink"> Read More </a>
</span>
</div>
</li>
</ul>
</div>
Next, we’ll make the content more presentable for flex-caption:
I: Make the overlay with the transparent dark background
.flex-caption{
height: 214px;
width: 100%;
background: rgba(0,0,0,0.3);
z-index: 1;
left: 50%;
margin-left: -50%;
margin-top: -65px;
position: absolute;
top: 50%;
}
II: Set the heading display
.flex-caption h1{
color: #fefefe;
font-family: "Arial", Helvetica Neue, Helvetica, sans-serif;
font-size: 60px;
float: right;
width: 440px;
margin-right: 350px;
line-height: 50px;
text-align: right;
font-weight: 600;
padding: 0;
}
III: Set the span display with green background
.flex-caption span{
height: 166px;
width: 248px;
background: #4cbe83 url(/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/img/span_overlay.png) no-repeat left 0;
display:inline-block;
position: absolute;
float: right;
right: 0;
padding: 24px 48px 24px 18px;
}
.flex-caption span p{
color: #fff;
font-size: 12px;
font-family: "Arial", Helvetica Neue, Helvetica, sans-serif;
line-height: 18px;
text-align:justify;
margin-bottom: 24px;
}
IV: Set the Read More Button display
.button{
width: 92px;
height: 30px;
line-height: 30px;
color: white;
text-decoration: none;
font-size: 12px;
font-family: helvetica, arial;
font-weight: bold;
display: block;
text-align: center;
position: relative;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 0px 1px #fff;
-webkit-box-shadow: inset 0 0px 1px #fff;
box-shadow: inset 0 0px 1px #fff;
}
V: Add the gradient background to button
.pink{
border: 1px solid #d24174;
background: #ef4a84; /* Old browsers */
background: -moz-linear-gradient(top, #ef4a84 0%, #ef4a84 51%, #d74277 51%, #d74277 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ef4a84), color-stop(51%,#ef4a84), color-stop(51%,#d74277), color-stop(100%,#d74277)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ef4a84 0%,#ef4a84 51%,#d74277 51%,#d74277 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ef4a84 0%,#ef4a84 51%,#d74277 51%,#d74277 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ef4a84 0%,#ef4a84 51%,#d74277 51%,#d74277 100%); /* IE10+ */
background: linear-gradient(to bottom, #ef4a84 0%,#ef4a84 51%,#d74277 51%,#d74277 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef4a84', endColorstr='#d74277',GradientType=0 ); /* IE6-9 */
}
VI: Make the gradient button in active condition and hover
.active, a.button:hover{
border: 1px solid #a80077;
background: #cb60b3; /* Old browsers */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#cb60b3), color-stop(0.5, #c146a1), color-stop(0.51, #a80077), to(#db36a4));
background: -webkit-linear-gradient(#cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%);
background: -moz-linear-gradient(#cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%);
background: -o-linear-gradient(#cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%);
background: linear-gradient(#cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4',GradientType=0 ); /* IE6-9 */
}
To make a gradient effect you can use the free tool like colorzilla.
Up here, you can try to resize your browser and see what happen with the caption? The content still fixed not responsive, we’ll make it responsive on step 7.
Step 6: Adding animation with Animate.css
Now is the fun step, we’ll add the animation on the slider content by using animate.css. Before that please add this script before :
<link rel="stylesheet" href="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/css/animate.css"/>
So it will become:
<head>
<meta charset="UTF-8">
<title>MySlider</title>
<link rel="stylesheet" href="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/style.css"/>
<link rel="stylesheet" href="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/css/animate.css"/>
<link rel="stylesheet" href="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/css/flexslider.css"/>
<script src="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/js/jquery_1.10.2.js"></script>
<script src="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/js/jquery.flexslider.js"></script>
...
</head>
To use this animate.css script is very simple, you just add the class and theanimationname inside the element that you’ll give the animation.
For the example:
<h1 class=”animated slideInRight”></h1>
In this tutorial we’ll use this animation name: slideInRight, fadeInLeftBig, slideInLeft. For more animation style, you can look it here, to note that theanimationname are case sensitive.
Take a look the code below, we have added the animation inside our content slider:
<div class="flexslider">
<ul class="slides">
<li>
<img src="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/img/slider1_bg.png" class="img-slides"/>
<div class="flex-caption">
<h1 class="animated slideInRight">...</h1>
<span class="animated fadeInLeftBig"><p>...</p>
<a href="#" class="button pink"> Read More </a></span>
</div>
</li>
<li>
<img src="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/img/slider2_bg.png" class="img-slides"/>
<div class="flex-caption">
<h1 class="animated slideInLeft">...</h1>
<span class="animated fadeInDownBig"><p>...</p>
<a href="#" class="button pink"> Read More </a></span>
</div>
</li>
<li>
<img src="/articles_and_tutorials/building_responsive_slider_flexslider_animate_css/img/slider3_bg.png" class="img-slides" />
<div class="flex-caption">
<h1 class="animated fadeInDownBig">...</h1>
<span class="animated rollIn"><p>...</p>
<a href="#" class="button pink"> Read More </a></span>
</div>
</li>
</ul>
</div>
The problem!
Please the run the slider on your browser, is the animation goes well? Good! but if you push the next slide, the animation will not run perfectly. So, to fix it we’ll add the script below inside the line 741 on jquery.flexslider.js file
// ALLOW CAPTION CSS3 ANIMATION:
var caption = $( ".flex-active-slide .flex-caption" ).detach();
caption.appendTo(".flex-active-slide");
To become:
// SMOOTH HEIGHT:
if (slider.vars.smoothHeight) methods.smoothHeight(slider.vars.animationSpeed);
}
// ALLOW CAPTION CSS3 ANIMATION:
var caption = $( ".flex-active-slide .flex-caption" ).detach();
caption.appendTo(".flex-active-slide");
}
slider.wrapup = function(dimension) {
// SLIDE:
Ta da
Step 7: Make it Responsive
Here, in this step we’ll make our slider with the caption responsive.
Before that, please this meta on our index.html
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
This meta serves to control the slider layout on mobile browser.
Then to make the content/caption slider responsive, please add this script inside your style.css file:
@media screen and (min-width: 0) and (max-width: 319px){
.flex-caption{display:none;}
.container{height: auto; max-height: 51px}
.flex-direction-nav{ display: none !important;}
}
@media screen and (min-width: 320px) and (max-width: 479px){
.flex-caption{display:none;}
.container{height: auto; max-height: 94px}
.flex-direction-nav a.flex-prev{margin-top: -20px !important;}
.flex-direction-nav a.flex-next{margin-top: -20px !important;}
}
@media screen and (min-width: 480px) and (max-width: 599px){
.flex-caption{display:none;}
.container{height: auto; max-height: 141px}
.flex-direction-nav a.flex-prev{margin-top: 0 !important;}
.flex-direction-nav a.flex-next{margin-top: 0 !important;}
}
@media screen and (min-width: 600px) and (max-width: 723px){
.container{ height: auto; max-height: 177px;}
.flex-caption{top: 38%; height: 172px}
.flex-caption span{width: 150px; padding-top: 6px; padding-bottom: 0;}
.flex-caption p {height: 90px; overflow: hidden;}
.flex-caption h1{ width: 180px; font-size: 32px; line-height: 32px; margin-right: 240px;}
}
@media screen and (min-width: 724px) and (max-width: 899px){
.container{ height: auto; max-height: 177px;}
.flex-caption{top: 35%; height: 196px;}
.flex-caption span{width: 200px; padding-top: 6px;}
.flex-caption h1{ width: 220px; font-size: 36px; line-height: 36px; margin-right: 300px;}
}
@media screen and (min-width: 900px) and (max-width: 1023px){
.container{ height: auto; max-height: 177px;}
.flex-caption{top: 35%;}
.flex-caption h1{ width: 265px; font-size: 42px; line-height: 42px;}
}
@media screen and (min-width: 1024px) and (max-width: 1300px){
.container{ height: auto; max-height: 302px;}
.flex-caption{top: 45%;}
.flex-caption h1{ width: 350px; font-size: 48px; line-height:48px}
}
You can test your slider by using these tools:
Conclusion
In this tutorial, I showed you how to create a responsive slider with awesome animation slide effect in very easy way. And both slider and the animation is customizable based your need. Please go to each documentation pages (flexslider and animate.css). I hope you have learned something useful from this tutorial and thanks for reading!
Stay tune with our next tutorial by following us on Twitter.
- Written by Mukhlasin -
About The Author
2 Comments to “Build a Responsive Slider using Flexslider and Animate.css”
Add Comments (+)-
freccia says: Miss demo, where is?
Thanks for the great tutorial Eko! Question… everything starts to fall apart if I switch the Flexslider animation to “slide” and I’m not immediately understanding why. Any thoughts? Your feedback (as well as your work on this tutorial) is greatly appreciated!