Cara Membuat Slider Dengan Framework Skitter

Membahas sebuah tampilan memang tak ada habisnya yah, apalagi semakin hari semakin banyak hal hal yang baru dari dunia IT khususnya di dunia blog, nah di kesempatan kali ini saya akan membahas mengenai Bagaimana Cara Membuat Slider Dengan Framework Skitter

sedikit mencari cari sebuah slider yang menarik dan indah bagi di liat, semoag teman teman tertarik bila tertarik kita mulai sekarang ini, perlu kita perhatikan bagi menjalankan slider dari skitter teman teman perlu mendownloadnya terlebih dahulu, oke seketika saja hal hal yang perlu diperhatikan.

1. Install/unduh framework dari skitter di https://skitter-slider.net/install.html

2. Buka hasil extractkan tadi lalu copy folder folder berikut

3. Lalu bikin file index.html

4. Kemudian copykan scriptnya dibawah sini :

<link href=dist/skitter.css type=text/css media=all rel=stylesheet />
  <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
  <!-- Skitter JS -->
  <img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data-wp-preserve=%3Cscript%20type%3D%22text%2Fjavascript%22%20language%3D%22javascript%22%20src%3D%22js%2Fjquery-2.1.1.min.js%22%3E%3C%2Fscript%3E data-mce-resize=false data-mce-placeholder=1 class=mce-object width=20 height=20 alt=Membahas sebuah tampilan memang tak ada habisnya yah Cara Merancang Slider Dengan Framework Skitter title=Cara Merancang Slider Dengan Framework Skitter />
  <img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data-wp-preserve=%3Cscript%20type%3D%22text%2Fjavascript%22%20language%3D%22javascript%22%20src%3D%22js%2Fjquery.easing.1.3.js%22%3E%3C%2Fscript%3E data-mce-resize=false data-mce-placeholder=1 class=mce-object width=20 height=20 alt=Membahas sebuah tampilan memang tak ada habisnya yah Cara Merancang Slider Dengan Framework Skitter title=Cara Merancang Slider Dengan Framework Skitter />
  <img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data-wp-preserve=%3Cscript%20type%3D%22text%2Fjavascript%22%20language%3D%22javascript%22%20src%3D%22dist%2Fjquery.skitter.min.js%22%3E%3C%2Fscript%3E data-mce-resize=false data-mce-placeholder=1 class=mce-object width=20 height=20 alt=Membahas sebuah tampilan memang tak ada habisnya yah Cara Merancang Slider Dengan Framework Skitter title=Cara Merancang Slider Dengan Framework Skitter />
<div class=container>
<div class=row>
<div class=col-md-12>
<div class=skitter-large-box>
        <div class=skitter skitter-large with-thumbs>
          <ul>
            <li>
            <a href=#cube>
            <img src=images/slide-1.jpg class=cubeHide />
            </a>
            <div class=label_text>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            <a href=#see-more class=btn btn-small btn-yellow>See more</a>
            </p>
            </div>
            </li>
            <li>
            <a href=#cubeRandom>
            <img src=images/slide-2.jpg class=cubeSize />
            </a>
            <div class=label_text>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore officiis voluptatum reprehenderit vitae amet beatae dolorem labore dignissimos nesciunt. Harum, blanditiis suscipit beatae unde id non, necessitatibus praesentium nisi quidem.
            <a href=# class=btn btn-small btn-yellow>See more</a>
            </p>
            </div>
            </li>
            <li>
            <a href=#cubeStop>
            <img src=images/slide-3.jpg class=cube />
            </a>
            <div class=label_text>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eos nihil corrupti inventore id culpa repellat molestiae quam at molestias.
            <a href=# class=btn btn-small btn-yellow>See more</a>
            </p>
            </div>
            </li> 
          </ul>
        </div>
      </div>
    </div>
</div>
</div><span id=mce_marker data-mce-type=bookmark data-mce-fragment=1>​</span>

<script type=”text/javascript” language=”javascript”>

$(document).ready(function() {

$(‘.skitter-large’).skitter({

thumbs: true,

dots: false

});

});

</script>

Kalau telah coba save dan jalankan dibrowsernya, lumayan menarik bukan, demikian panduan mengenai Bagaimana Cara Membuat Slider Dengan Framework Skitter. Hingga bertemu diartikel berikutnya dan hingga jumpa .

#KeepLearn

#IsmetMA

 

 

 

Sumber https://kursuswebsite.org