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!

How To Make a Slideshow

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.

For the slide image, you can download on or the other free stock photos websites.

The Markup


        Flat Sliders




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.


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”.

The following is the main structure of your slide.

  • ...

Let’s add some style.


To make the design conform to our wishes, please put the script below inside your style.css file:

    background: #ccc;

    width:100% !important;
    max-width: 457px !important;
    height:auto !important;
    max-height: 295px !important;
    bottom: 80px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;    

For the title, we use css-pseudo element :before and :after to create the bullet object

    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;

    content: "\2022";
    font-size: 38px;    
    margin: -10px 15px 12px -35px !important;
    position: fixed;
    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.

    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;

    -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 */

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>

    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;

    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.

@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;

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!

Tags :

1 Comment