Github - slider kit

 

jquery.sliderkit.1.9.2.zip

다운로드

 

<!-- jQuery library -->
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>

<!-- jQuery Plugin scripts -->
<script type="text/javascript" src="/sliderkit/lib/js/external/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="/sliderkit/lib/js/external/jquery.mousewheel.min.js"></script>

<!-- Slider Kit scripts -->
<script type="text/javascript" src="/sliderkit/lib/js/sliderkit/jquery.sliderkit.1.9.2.pack.js"></script>  
<script type="text/javascript" src="/sliderkit/lib/js/sliderkit/addons/sliderkit.delaycaptions.1.1.pack.js"></script>
<script type="text/javascript" src="/sliderkit/lib/js/sliderkit/addons/sliderkit.counter.1.0.pack.js"></script>
<script type="text/javascript" src="/sliderkit/lib/js/sliderkit/addons/sliderkit.timer.1.0.pack.js"></script>
<script type="text/javascript" src="/sliderkit/lib/js/sliderkit/addons/sliderkit.imagefx.1.0.pack.js"></script>

<!-- Slider Kit styles -->
<link rel="stylesheet" type="text/css" href="/sliderkit/lib/css/sliderkit-core.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/sliderkit/lib/css/sliderkit-demos.css" media="screen, projection" />

<!-- Slider Kit compatibility -->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/sliderkit/lib/css/sliderkit-demos-ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/sliderkit/lib/css/sliderkit-demos-ie7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="/sliderkit/lib/css/sliderkit-demos-ie8.css" /><![endif]-->

<!-- Site styles -->
<!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'> -->
<link rel="stylesheet" type="text/css" href="/sliderkit/lib/css/sliderkit-site.css" media="screen, projection" />

<script type="text/javascript">
$(window).load(function() {
	$("#standardPhotosgallery").sliderkit({
		mousewheel:true,
		shownavitems:4,
		// navfx:"none",
		panelbtnshover:true,
		auto:false,
		circular:true,
		navscrollatend:true,
		counter:true
	});
});
</script>

<!-- Start photosgallery-std -->
<div id="standardPhotosgallery" class="sliderkit photosgallery-std">
	<div class="sliderkit-nav">
		<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a rel="nofollow" href="#" title="Previous line"><span>Previous line</span></a></div>
		<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="Next line"><span>Next line</span></a></div>
		<div class="sliderkit-nav-clip">
			<ul>
				<li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/images/photos/mini/sample-01.jpg" alt="[Alternative text]" /></a></li>
				<li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/images/photos/mini/sample-02.jpg" alt="[Alternative text]" /></a></li>
				<li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/images/photos/mini/sample-03.jpg" alt="[Alternative text]" /></a></li>
				<li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/images/photos/mini/sample-04.jpg" alt="[Alternative text]" /></a></li>
			</ul>
		</div>
	</div>
  
	<div class="sliderkit-panels">
		<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous"><span>Previous</span></a></div>
		<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next"><span>Next</span></a></div>

		<div class="sliderkit-count sliderkit-count-items">
			<span class="sliderkit-count-current"></span><span class="sliderkit-count-sep">/</span><span class="sliderkit-count-total"></span>
		</div>

		<div class="sliderkit-panel">
			<img src="../lib/images/photos/sample-01.jpg" alt="[Alternative text]" />
		</div>
		<div class="sliderkit-panel">
			<img src="../lib/images/photos/sample-02.jpg" alt="[Alternative text]" />
		</div>
		<div class="sliderkit-panel">
			<img src="../lib/images/photos/sample-03.jpg" alt="[Alternative text]" />
		</div>
		<div class="sliderkit-panel">
			<img src="../lib/images/photos/sample-04.jpg" alt="[Alternative text]" />
		</div>
	</div>
</div>
<!-- // end of photosgallery-std -->

출처 : http://www.kyrielles.net/sliderkit/sliderkit_en.html