How To Make a Simple and Responsive Flat Slideshow (HTML/CSS)
In this tutorial we’ll create a super simple slideshow with flat design style. Featured with fully responsive and zooming effect if image hover. Perfect for your photo gallery or portfolio.
The slideshow design is from our Free Flat Slider PSD template. And we’ll be using WooThemes FlexSlider since it has GPL license, also very easy to customize. So, let’s get started!
The Assets
Please download the FlexSlider first, here. If you’ve downloaded, there are 2 files: flexslider.css and jquery.flexslider-min.js. Copy the both files to your working folder.
The Markup
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Flat Sliders</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="css/flexslider.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
<body>
<div class="container">
<h1>SLIDER</h1>
<div id="custom" class="flexslider">
<ul class="slides">
<li>
<a href="#">
<img src="img/imgslide1.png" class="img-slides"/>
</a>
</li>
<li>
<a href="#">
<img src="img/imgslide2.png" class="img-slides"/>
</a>
</li>
<li>
<a href="#">
<img src="img/imgslide1.png" class="img-slides" />
</a>
</li>
<li>
<a href="#">
<img src="img/imgslide2.png" class="img-slides"/>
</a>
</li>
</ul>
<div class="block"></div>
</div>
</div>
</body>
</html>
From the script above, first we’ll put the flexslider library that needed for the slide. We also need the style.css file for customization purpose in the next step.
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="css/flexslider.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
And to run the flexslider, we need to call the javascript file on our head html section. Note the class or ID from your slide block. In this tutorial, we use class .flexslider.
Here, you also can change the animation style, just change the animation value. Since by default is “slide”.
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider(animation: "slide");
});
</script>
The following is the main structure of your slide.
<div class="container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/imgslide1.png"/>
</li>
...
</ul>
</div>
</div>
Let’s add some style.
The CSS
To make the design conform to our wishes, please put the script below inside your style.css file:
body{
background: #ccc;
}
.container{
width:100% !important;
max-width: 457px !important;
height:auto !important;
max-height: 295px !important;
bottom: 80px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top:0;
}
For the title, we use css-pseudo element :before and :after to create the bullet object
h1{
text-align: center;
font-family: "HelveticaCYPlain", Myriad Pro, serif;
font-weight: 100;
color: #fff;
font-size: 24px;
text-shadow: 5px 3px 0 #b7b7b7;
letter-spacing: 2px;
margin-bottom: 36px;
}
h1:before,h1:after{
content: "\2022";
font-size: 38px;
margin: -10px 15px 12px -35px !important;
position: fixed;
}
h1:after{
margin: -10px 15px 0 25px !important;
}
The next, we’ll form the dimension of the slider
.flexslider, .flex-viewport{
border-radius: 0 !important;
border: 0 !important;
overflow : hidden;
position: relative;
width:100% !important;
max-width: 457px !important;
height:auto !important;
max-height: 295px !important;
}
Adjust the image slide, adjust the image dimension, at once give the zoom effect if hover by using element transition.
.img-slides{
width:100% !important;
max-width: 457px !important;
height:auto !important;
max-height: 240px !important;
border:none !important;
display: block;
position: relative;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.img-slides:hover{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
Then at the bottom of the image slide there are navigation section. Here, the css style for the background of that navigation. For the use in HTML, we’ll add <div class=”block”></div>
.block{
width: 100%;
height: 42px;
background: #2e3137;
border-bottom: 10px solid #272a2e !important;
z-index: 9;
position: relative;
-webkit-box-shadow: inset 0px -1px 0px 0px rgba(58, 65, 67, 0.75);
-moz-box-shadow: inset 0px -1px 0px 0px rgba(58, 65, 67, 0.75);
box-shadow: inset 0px -1px 0px 0px rgba(58, 65, 67, 0.75);
}
The next step is to organize the slide navigation, there are 2 navigation types in our flat slider: bullet nav and arrow nav (next and prev)
Bullet Navigation
.flex-control-paging li a{
background: #5f6672 !important;
-webkit-box-shadow: 0 2px 0 0 #25272c !important;
box-shadow: 0 2px 0 0 #25272c !important;
width:9px !important;
height:9px !important;
margin: -4px !important;
}
.flex-control-paging li a.flex-active,.flex-control-paging li a:hover{
background: #ff8b45 !important;
}
.flex-control-nav{
z-index: 10 !important;
bottom: 18px !important;
}
Arrow Navigation (next and prev)
.flex-direction-nav a {
width: 44px !important;
height: 42px !important;
text-indent: 9999px !important;
opacity: 1 !important;
}
.flex-direction-nav a:hover{
opacity: 0.5 !important;
}
.flex-direction-nav a.flex-prev{
background: #fff url(img/slide6-custom-arrow.png) no-repeat left 0;
margin-top: 20.8% !important;
left: 80.5% !important;
}
.flex-direction-nav a.flex-next{
background: #fff url(img/slide6-custom-arrow.png) no-repeat right 0;;
margin-top: 20.8% !important;
margin-right: -10px !important;
}
.flex-direction-nav a:before{content: none !important;}
By default the arrow navigation is only appear if hover. So we’ll make it always appear, by adding this css style
/*custom for always show arrow*/
#custom.flexslider .flex-prev { opacity: 0.7; left: 10px; }
#custom.flexslider .flex-next { opacity: 0.7; right: 10px; }
#custom.flexslider .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
And the final step is responsive feature.
By default, FlexSlider is come with responsive feature but we need some adjustment so it will be in accordance with our flat slider design.
/*responsive*/
@media screen and (max-width: 480px){
.flex-direction-nav a.flex-prev,.flex-direction-nav a.flex-next{
display: none;
}
.flexslider, .flex-viewport{
margin-left: 15px !important;
margin-right: 15px !important;
width: 90% !important;
}
}
Let’s try by yourself
And that’s it, we have created a super simple flat slider featured with fully responsive and zooming effect. I hope you enjoy this tutorial and find it useful!
If you are struggling to do your HTML, CSS and JavaScript Project then you can use CodingZap’s HTML Homework Help Services.
1 Comment
[…] How To Make a Simple and Responsive Flat Slideshow (HTML/CSS) […]