» » » Create Easy And Simple Slider Using CSS

Create Easy And Simple Slider Using CSS

Posted by Cloud VPS Labels: Blog , Tutorial 10:01 AM


Slider Using CSSThere are many version of slider / slideshow on Internet and commonly displayed using JQuery, but not only JavaScript code can do this, the transition and transform in the CSS style can also do this while it's not as perfect as JQuery. And this posting will try to show you how to create with easy simple slider using CSS. This slider may have a few transition effect such as slide fast and fade. In the manual add post featured with image, this slider is pure using CSS but if you want add the newest posts automaticaly then you have to add some JavaScript to call this recent posts.


Probably this slide function is one of the ways to make the homepage more stylish, dynamic, simple and not so bad at all. Stylish with title, caption, image transition effects and has a pause function when mouse hover but unfornately this slider not works properly in Internet Explorer yet, but works great in other major modern browsers such as Chrome, Firefox, Safari and Opera.


Although it was not works in IE but it is a great start, because sometimes the normal JavaScript slider can be very heavy to load and you should know a little bit about JavaScript to be able to tweak or minify the size, modify it to the desired look and other functionality. Pure CSS looks great for a slider and one of best things is that very lightweight only about 7kb in size for this version to make the slideshow works.

Add Slider

Give it a try and you can always customize the styles with some basic knowledge about the transform and add this function within a few minutes. Here are the step by step to apply:

1. Add the following code above ]]></b:skin> or </style> in CSS style section.

CSS Slider

#slider {
    width: 100%;
    height: 350px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: visible;
    background-color: #181818;
    -webkit-transition: all 150ms ease-in;
    -moz-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
    -ms-transition: all 150ms ease-in;
    transition: all 150ms ease-in;
    position: relative;
}

#mask {
    overflow: hidden;
}
#slider:hover #pause {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#slider:hover #progress {
    background-color: rgba(255, 255, 255, 0.0);
}
#slider:hover ul, #slider:hover #progress {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    -ms-animation-play-state: paused;
    animation-play-state: paused;
}
#pause {
    width: 100%;
    height: 350px;
    position: absolute;
    top: 0;
    opacity: 0;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9uzNOOCySW5kVFD7tmV1nrh5C1H7fYq-AHJ-rGxK6R1d5_dJ5yDsWOvYXu-RzyLBwD-p7jXYD928feqpBURL4VVuYKvSrlqB_orXJFQe4y0_t4b_RhUiCvJG_6LFXmwh42Q3u6TNrgivM/s128/pause.png");
    background-position: 10px 10px;
    background-repeat: no-repeat;
    pointer-events: none;
    -webkit-transition: all 150ms ease-in;
    -moz-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
    -ms-transition: all 150ms ease-in;
    transition: all 150ms ease-in;
}
#progress {
    position: absolute;
    top: 5px;
    width: 1px;
    height: 1px;
    border-bottom: 1px solid #444;
    background-color: #ffd000;
    -webkit-animation: progress 25s infinite;
    -moz-animation: progress 25s infinite;
    -o-animation: progress 25s infinite;
    -ms-animation: progress 25s infinite;
    animation: progress 25s infinite;
}
#slider ul {
    width: 500%;
    height: 350px;
    list-style: none;
    padding: 0;
    margin: 0;
    -webkit-animation: slide-animation 25s infinite;
    -moz-animation: slide-animation 25s infinite;
    -o-animation: slide-animation 25s infinite;
    -ms-animation: slide-animation 25s infinite;
    animation: slide-animation 25s infinite;
    position: relative;
    left: 0px;
}
#slider li {
    display: inline;
    width: 20%;
    height: 350px;
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjH6aiPNCn8k_0Q8N18naEEkrqVQO72NdAf29K2TyiaZ-DG1Z665KtRSnX3xMJbrbJ0GQ4HPoII8qX0oy9zHhCyV1DnI4l4NOrvEUUyc-UANNqVv9AkUKKMceTHjotixc0WrHhuooryQ2L/s128/loading.gif");
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
#slider li img{
    width: 100%;
    height: 450px;
    margin: 0;
    padding: 0;
}
#slider li:last-of-type {
    background-color: #000;
}
#slider li a {
    display: block;
    text-decoration: none;
}
#slider li .easytitledes { 
    width:70%; 
    display: block; 
    position: absolute; 
    bottom: 10px; 
    left: 10px; 
    background: rgba(36, 36, 36, 0.7);
    padding: 10px 15px; }
#slider li .easytitledes a { 
    color: #15E3FF; 
    font: 14px sans-serif; 
    text-transform: uppercase; 
    font-weight: bold; 
}
#slider li .easytitledes a:hover { 
    color:#29FF00 
}
#slider li .easytitledes p { 
    color: #fff; 
    font: 12px Arial; 
}
#slider ul li span h2 {
    font:bold 16px "Arial narrow", sans-serif;
    color: #fff; 
    margin:0; 
    padding:0;
}
@-webkit-keyframes slide-animation {
    0% {opacity:0;}
    1.5% {opacity:1;}
    15% {left:0px; opacity:1;}
    16% {left:0px;opacity:0;}
    16.5% {left:-100%; opacity:0;}
    19% {left:-100%; opacity:1;}
    37.5% {left:-100%; opacity:1;}
    38% {left:-100%; opacity:0;}
    38.5% {left:-200%; opacity:0;}
    40.5% {left:-200%; opacity:1;}
    61.5% {left:-200%; opacity:1;}
    62% {left:-200%;opacity:0}
    62.5% {left:-300%; opacity:0;}
    64.5% {left:-300%; opacity:1;}
    84% {left:-300%; opacity:1;}
    84.5% {left:-300%; opacity:0;}
    85% {left:-400%; opacity:0;}
    87% {left:-400%; opacity:1;}
    98% {left:-400%; opacity:1;}
    98.5% {left:-400%;opacity:0;}
    100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
    0% {opacity:0;}
    1.5% {opacity:1;}
    15% {left:0px; opacity:1;}
    16% {left:0px;opacity:0;}
    16.5% {left:-100%; opacity:0;}
    19% {left:-100%; opacity:1;}
    37.5% {left:-100%; opacity:1;}
    38% {left:-100%; opacity:0;}
    38.5% {left:-200%; opacity:0;}
    40.5% {left:-200%; opacity:1;}
    61.5% {left:-200%; opacity:1;}
    62% {left:-200%;opacity:0}
    62.5% {left:-300%; opacity:0;}
    64.5% {left:-300%; opacity:1;}
    84% {left:-300%; opacity:1;}
    84.5% {left:-300%; opacity:0;}
    85% {left:-400%; opacity:0;}
    87% {left:-400%; opacity:1;}
    98% {left:-400%; opacity:1;}
    98.5% {left:-400%;opacity:0;}
    100% {left:0px; opacity:0;}
}
@-o-keyframes slide-animation {
    0% {opacity:0;}
    1.5% {opacity:1;}
    15% {left:0px; opacity:1;}
    16% {left:0px;opacity:0;}
    16.5% {left:-100%; opacity:0;}
    19% {left:-100%; opacity:1;}
    37.5% {left:-100%; opacity:1;}
    38% {left:-100%; opacity:0;}
    38.5% {left:-200%; opacity:0;}
    40.5% {left:-200%; opacity:1;}
    61.5% {left:-200%; opacity:1;}
    62% {left:-200%;opacity:0}
    62.5% {left:-300%; opacity:0;}
    64.5% {left:-300%; opacity:1;}
    84% {left:-300%; opacity:1;}
    84.5% {left:-300%; opacity:0;}
    85% {left:-400%; opacity:0;}
    87% {left:-400%; opacity:1;}
    98% {left:-400%; opacity:1;}
    98.5% {left:-400%;opacity:0;}
    100% {left:0px; opacity:0;}
}
@keyframes slide-animation {
    0% {opacity:0;}
    1.5% {opacity:1;}
    15% {left:0px; opacity:1;}
    16% {left:0px;opacity:0;}
    16.5% {left:-100%; opacity:0;}
    19% {left:-100%; opacity:1;}
    37.5% {left:-100%; opacity:1;}
    38% {left:-100%; opacity:0;}
    38.5% {left:-200%; opacity:0;}
    40.5% {left:-200%; opacity:1;}
    61.5% {left:-200%; opacity:1;}
    62% {left:-200%;opacity:0}
    62.5% {left:-300%; opacity:0;}
    64.5% {left:-300%; opacity:1;}
    84% {left:-300%; opacity:1;}
    84.5% {left:-300%; opacity:0;}
    85% {left:-400%; opacity:0;}
    87% {left:-400%; opacity:1;}
    98% {left:-400%; opacity:1;}
    98.5% {left:-400%;opacity:0;}
    100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
    0% {width:0px;opacity:0;}
    1% {width:0px;opacity:1;}
    13% {width:100%;opacity:1;}
    13.5% {width:100%;opacity:0;}
    14% {width:0px;}
    17% {width:0px;opacity:1;}
    35.5% {width:100%;opacity:1;}
    36% {width:100%;opacity:0;}
    37% {width:0px;}
    41% {width:0px;opacity:1;}
    58% {width:100%;opacity:1;}
    58.5% {width:100%;opacity:0;}
    59% {width:0px;}
    63% {width:0px;opacity:1;}
    80% {width:100%;opacity:1;}
    80.5% {width:100%;opacity:0;}
    81% {width:0px;}
    85% {width:0px;opacity:1;}
    98% {width:100%;opacity:1;}
    98.5% {width:100%;opacity:0;}
    99% {width:0px;}
    100% {width:0px;opacity:0;}
}
@-moz-keyframes progress {
    0% {width:0px;opacity:0;}
    1% {width:0px;opacity:1;}
    13% {width:100%;opacity:1;}
    13.5% {width:100%;opacity:0;}
    14% {width:0px;}
    17% {width:0px;opacity:1;}
    35.5% {width:100%;opacity:1;}
    36% {width:100%;opacity:0;}
    37% {width:0px;}
    41% {width:0px;opacity:1;}
    58% {width:100%;opacity:1;}
    58.5% {width:100%;opacity:0;}
    59% {width:0px;}
    63% {width:0px;opacity:1;}
    80% {width:100%;opacity:1;}
    80.5% {width:100%;opacity:0;}
    81% {width:0px;}
    85% {width:0px;opacity:1;}
    98% {width:100%;opacity:1;}
    98.5% {width:100%;opacity:0;}
    99% {width:0px;}
    100% {width:0px;opacity:0;}
}
@-o-keyframes progress {
    0% {width:0px;opacity:0;}
    1% {width:0px;opacity:1;}
    13% {width:100%;opacity:1;}
    13.5% {width:100%;opacity:0;}
    14% {width:0px;}
    17% {width:0px;opacity:1;}
    35.5% {width:100%;opacity:1;}
    36% {width:100%;opacity:0;}
    37% {width:0px;}
    41% {width:0px;opacity:1;}
    58% {width:100%;opacity:1;}
    58.5% {width:100%;opacity:0;}
    59% {width:0px;}
    63% {width:0px;opacity:1;}
    80% {width:100%;opacity:1;}
    80.5% {width:100%;opacity:0;}
    81% {width:0px;}
    85% {width:0px;opacity:1;}
    98% {width:100%;opacity:1;}
    98.5% {width:100%;opacity:0;}
    99% {width:0px;}
    100% {width:0px;opacity:0;}
}
@keyframes progress {
    0% {width:0px;opacity:0;}
    1% {width:0px;opacity:1;}
    13% {width:100%;opacity:1;}
    13.5% {width:100%;opacity:0;}
    14% {width:0px;}
    17% {width:0px;opacity:1;}
    35.5% {width:100%;opacity:1;}
    36% {width:100%;opacity:0;}
    37% {width:0px;}
    41% {width:0px;opacity:1;}
    58% {width:100%;opacity:1;}
    58.5% {width:100%;opacity:0;}
    59% {width:0px;}
    63% {width:0px;opacity:1;}
    80% {width:100%;opacity:1;}
    80.5% {width:100%;opacity:0;}
    81% {width:0px;}
    85% {width:0px;opacity:1;}
    98% {width:100%;opacity:1;}
    98.5% {width:100%;opacity:0;}
    99% {width:0px;}
    100% {width:0px;opacity:0;}
}

Note: Try first without editing.
Blue color is link for pause image and loading, and you should change this link with your own links.

2. Add following code somewhere in HTML body, usually after <div class="main-wrapper"> or <div id="main-wrapper"> or similar.

There are 2 methods, manual and automatic publish the most recent post.

Method 1 Manual

HTML

    <div id="slider">
        <div id="mask">
        <ul>
        <li ><a href="..post-link1.html" ><img src="..images-link1.jpg" /></a>
<div class="easytitledes"><a href='..post-link1.html'>Post Title 1</a><p>Caption 1</p></div>
        </li>
        <li ><a href="..post-link2.html" ><img src="..images-link2.jpg" /></a>
<div class="easytitledes"><a href='..post-link2.html'>Post Title 2</a><p>Caption 2</p></div>
        </li>
        <li ><a href="..post-link3.html" ><img src="..images-link3.jpg" /></a>
<div class="easytitledes"><a href='..post-link3.html'>Post Title 3</a><p>Caption 3</p></div>
        </li>
        <li  ><a href="..post-link4.html" ><img src="..images-link4.jpg" /></a>
<div class="easytitledes"><a href='..post-link4.html'>Post Title 4</a><p>Caption 4</p></div>
        </li>
        <li ><a href="..post-link5.html" ><img src="..images-link5.jpg" /></a>
<div class="easytitledes"><a href='..post-link5.html'>Post Title 5</a><p>Caption 5</p></div>
        </li>
        </ul>
        </div>
    <div id="progress"></div>
    <div id="pause"></div>
    </div>

If you use manual method, then you have to add post link (blue), image link (orange) and caption (pink) one by one as appropriate.


Method 2 Automatic

If you want to use the automatic function then you have to add some JavaScript to call the newest post, and if you are using Blogger Platform, follow the steps below.

Add the following JavaScript code above the </head>

Javascript Recent Posts

<script type='text/javascript'>
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJWlSHyK7Of0w3lwNjN6SFBMyNPxEcNFZwFu2CaMNCZamptbegYPovpeXOB96dK3vJZhnBR0_54ddtSuOIMIAeX40f4vN0lXYDxmIIbPB8fCvTg8GL_sjZHFaCsabad3AIk-eNlcyNKM/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=150;summaryTitle=25;numposts=5;function removeHtmlTag(f,e){var h=f.split("<");for(var g=0;g<h.length;g++){if(h[g].indexOf(">")!=-1){h[g]=h[g].substring(h[g].indexOf(">")+1,h[g].length)}}h=h.join("");h=h.substring(0,e-1);return h}function showrecentposts(x){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<div class="css-slider">');if(numposts<=x.feed.entry.length){maxpost=numposts}else{maxpost=x.feed.entry.length}for(var n=0;n<maxpost;n++){var v=x.feed.entry[n];var g=v.title.$t;var f;var o;if(n==x.feed.entry.length){break}for(var l=0;l<v.link.length;l++){if(v.link[l].rel=="alternate"){o=v.link[l].href;break}}for(var l=0;l<v.link.length;l++){if(v.link[l].rel=="replies"&&v.link[l].type=="text/html"){f=v.link[l].title.split(" ")[0];break}}if("content" in v){var q=v.content.$t}else{if("summary" in v){var q=v.summary.$t}else{var q=""}}postdate=v.published.$t;if(j>imgr.length-1){j=0}img[n]=imgr[j];s=q;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[n]=d}var p=[1,2,3,4,5,6,7,8,9,10,11,12];var w=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var t=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var r=postdate.split("-")[0];for(var e=0;e<p.length;e++){if(parseInt(h)==p[e]){h=w[e];break}}var u='<li><a href="'+o+'"><img src="'+img[n]+'"/></a><div class="easytitledes"><a href="'+o+'">'+g+"</a><p>"+removeHtmlTag(q,summaryPost)+"... </p></div></li>";document.write(u);j++}document.write("</div>")};
</script>

Note: Try first without editing.
Blue color is link image if there is no image in post page, and you should change this link with your own.

The following code usually Add after <div class="main-wrapper"> or <div id="main-wrapper"> or similar, but you can also add after header section.

HTML and Script

    <div id="slider">
        <div id="mask">
        <ul>
<script type='text/javascript'>
document.write(" <script src=\"/feeds/posts/default/?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
        </ul>
        </div>
    <div id="progress"></div>
    <div id="pause"></div>
    </div>

Done, Save the template and see the results.