Simple Responsive Slider With Javascript And CSS

Ditulis oleh: Adhy Suryadi

Ditulis pada: 1/14/2016

Sampai saat ini slider masih menjadi element web yang masih banyak digunakan untuk menampilkan konten-konten utama atau konten-konten terbaru dari sebuah web. Banyaknya jenis slider baik dari desain maupun kode pembentuknya, menuntut para webmaster untuk pintar-pintar memilih slider agar tidak menjadi beban loading blog namun dapat serasi dengan tampilan web atau blog.

Kali ini saya akan sharing sebuah slider yang sederhana dan sudah responsive yang dibuat menggunakan css dan javascript sehingga tidak akan memberatkan loading blog dibandingkan dengan slider yang menggunakan jquery.


Untuk mencoba responsive-nya, silahkan resize browser Anda. Bagaimana, ingin mencobanya? Silahkan gunakan kode-kode di bawah ini:

1. Kode CSS

@font-face {

  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 400;

  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')

}



@font-face {

  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 700;

  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')

}



#slide {

  height: auto;

}



#pager {

  width: auto;

  margin: 0px auto;

  text-align: center;

}



#pager > span {

  display: inline-block;

  width: 10px;

  height: 10px;

  margin: 24px 5px 30px;

  background: rgba(0, 0, 0, .2);

  text-align: center;

  border-radius: 100%;

  font-size: 17px;

  text-decoration: none;

  transition: background 0.3s linear 0s;

  cursor: pointer;

}



#slidecontent {

  margin: 0px auto;

  transition: opacity 0.3s linear 0s;

  color: #AAA;

  background: #ffffff;

  border: solid 1px #dedede;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;

  border-radius: 3px;

  position: relative;

  overflow: hidden;

  min-height:350px;

}



.slidepanel {

  width: 30%;

  padding: 30px;

  float: left;

  -moz-box-sizing: border-box;

  word-wrap: break-word;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  text-align: left;

}



.slidepanel > h2 {

  font-size: 26px;

  font-weight: 700;

  line-height: 1.2em;

  color: #333;

  margin: 0 auto 10px;

  font-family: 'Open Sans', Helvetica, Arial, sans-serif;

  text-transform:capitalize;

}



.slidepanel > p,.slidepanel > span {

  font-size: 16px;

  font-weight: 400;

  line-height: 1.5em;

  color: #777;

  margin:0!important;

  font-family: 'Open Sans', Helvetica, Arial, sans-serif;

}



.slidepanel a {

  color: #333;

  text-decoration: none;

  font-weight: 700;

}



.slidepanel a:hover {

  color: #000;

}



.slideimage {

  width: 70%;

  height: 100%;

  margin: 0;

  padding: 0;

  position: absolute;

  right: 0;

  top: 0;

  bottom: 0;

}



.slideimage img {

  width: 100%;

  height: 100%

}



.clear {

  clear: both

}

@media screen and (max-width:880px){

.slidepanel {

  width: 100%;

  float: none;

}

.slideimage {

  width: 100%;

  height: auto;

  position: relative;

}

.slideimage img {

  height: auto;

}

.center{

  width: 100%;

}

}

2. Kode HTML

<div id="slide">

  <div id="slidecontent">

      <div class="slideimage"><img alt="Lorem ipsum dolor sit amet" height="350" src="URL IMAGE" width="750"/></div><div class="slidepanel"><h2><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci mi, in pharetra ligula. Nulla facilisi. Nulla facilisi.</p></div><div class="clear"></div>

    <script>

      //<![CDATA[

      var bca = [

        '<div class="slideimage"><img alt="Lorem ipsum dolor sit amet" height="350" src="URL IMAGE" width="750"/></div><div class="slidepanel"><h2><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci mi, in pharetra ligula. Nulla facilisi. Nulla facilisi.</p></div><div class="clear"></div>',

        '<div class="slideimage"><img alt="Mauris convallis venenatis massa" height="350" src="URL IMAGE" width="750"/></div><div class="slidepanel"><h2><a href="#" title="Mauris convallis venenatis massa">Mauris convallis venenatis massa</a></h2><p>Mauris convallis venenatis massa, quis <a href="#">consectetur</a> felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui.</p></div><div class="clear"></div>',

        '<div class="slideimage"><img alt="Proin nec orci et elit" height="350" src="URL IMAGE" width="750"/></div><div class="slidepanel"><h2><a href="#" title="Proin nec orci et elit">Proin nec orci et elit</a></h2><p>Proin nec orci et elit semper ultrices. <a href="#" target="_blank">Cum sociis natoque</a> penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div><div class="clear"></div>',

        '<div class="slideimage"><img alt="Sed quis urna mi, ac dignissim mauris." height="350" src="URL IMAGE" width="750"/></div><div class="slidepanel"><h2><a href="#" title="Sed quis urna mi, ac dignissim mauris.">Sed quis urna mi, ac dignissim mauris.</a></h2><span>Sed quis urna mi, ac dignissim mauris. <a href="#">Quisque mollis ornare mauris</a>.<br>Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere</span></div><div class="clear"></div>'

      ];

      //]]>

    </script>

  </div>

  <div id="pager">

    <span onClick="pager(0); clearInterval(intrvl);" style="background:rgba(0,0,0,.7);"></span>

    <span onClick="pager(1); clearInterval(intrvl);"></span>

    <span onClick="pager(2); clearInterval(intrvl);"></span>

    <span onClick="pager(3); clearInterval(intrvl);"></span>

  </div>

</div>

Perhatikan yang saya marking! Harus sama, untuk tampilan awal sebelum javascript-nya berjalan. Banyaknya pager sesuaikan dengan banyaknya konten. Untuk kontennya silahkan sesuaikan dengan konten yang ingin Anda tampilkan.

3. Kode Javascript
Simpan kode javascript di bawah ini di atas kode </body>

<script>

//<![CDATA[

  function _(x) {

    return document.getElementById(x);

  }

  var ba, bi = 0,

    intrvl;

  function pager(bi) {

    _("slidecontent").style.opacity = 0;

    for (var i = 0; i < ba.length; i++) {

      ba[i].style.background = "rgba(0,0,0,.2)";

    }

    ba[bi].style.background = "rgba(0,0,0,.7)";

    setTimeout(function() {

      _("slidecontent").innerHTML = bca[bi];

      _("slidecontent").style.opacity = 1;

    }, 300);

  }



  function bubbleSlide() {

    bi++;

    if (bi == ba.length) {

      bi = 0;

    }

    pager(bi);

  }

  window.addEventListener("load", function() {

    ba = _("pager").children;

    intrvl = setInterval(bubbleSlide, 7000);

  });

  //]]>

</script>

Selamat mencoba....

Credit to: developphp.com