Simple Responsive Slider With Javascript And CSS

Simple Responsive Slider With Javascript And CSS

Bola Hero Gawai

Simple Responsive Slider With Javascript And CSS

Simple Responsive Slider With Javascript And CSS
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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×