Cara Membuat Slider Dengan Framework Skitter

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

sedikit mencari cari sebuah slider yang menarik dan indah untuk di liat, semoag teman teman tertarik jika tertarik kita mulai sekarang, perlu kita perhatikan untuk menjalankan slider dari skitter teman teman perlu mendownloadnya terlebih dahulu, oke langsung saja hal hal yang perlu diperhatikan.
1. Install/download framework dari skitter di https://skitter-slider.net/install.html
2. Buka hasil extractkan tadi lalu copy folder folder berikut

3. Lalu buat 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="<script>" title="<script>" />
	  <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="<script>" title="<script>" />
	  <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="<script>" title="<script>" />
<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>

Jika sudah coba save dan jalankan dibrowsernya, cukup menarik bukan, sekian tutorial tentang Bagaimana Cara Membuat Slider Dengan Framework Skitter. Sampai bertemu diartikel selanjutnya dan sampai jumpa .

#KeepLearn

#IsmetMA