Slideshow -jQuery强大的支持触摸屏的响应式轮播图插件

沈永贞
2023-12-01
		<div class="htmleaf-demo center">
		  <a href="index.html" class="current">Standart Slideshow</a>
		  <a href="sample-standart-pagination-vertical.html">Standart Slideshow Vertical</a>
		  <a href="sample-standart-pagination-fade.html">Standart Slideshow Fade</a>
		  <a href="sample-text-pagination.html">Text Pagination</a>
		  <a href="sample-text-pagination-vertical.html">Text Pagination Vertical</a>
		  <a href="sample-image-pagination.html">Image Pagination</a>
		  <a href="sample-show-next-prev-slide.html">Show Next and Previous Slide</a>
		  <a href="sample-video-html5.html">Sample Video Background</a>
		  <a href="sample-textbox.html">Sample Textbox</a>
		  <a href="sample-api-button.html">Slideshow with API button</a>
		</div>
	</header>
	<div class="htmleaf-content bgcolor-3">
		<div class='sangar-slideshow-container' id='sangar-example'>
			<div class='sangar-content-wrapper'>
				<div class='sangar-content'>
					<img src='images/slide-1.jpg' />
					<a href='http://www.htmleaf.com' target="_blank"></a>
				</div>
				<div class='sangar-content'>
					<img src='images/slide-2.jpg' />
					<a href='http://www.htmleaf.com'></a>
				</div>				
				<div class='sangar-content'><div class="sslider-bg-content" style="background-color:rgb(144, 27, 27);"></div></div>
				<div class='sangar-content'><img src='images/slide-4.jpg' /></div>
				<div class='sangar-content'><img src='images/slide-5.jpg' /></div>
			</div>
		</div>
	</div>

</div>

<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="assets/js/imagesloaded.min.js"></script>
<!-- jQuery Sangar Slider -->
<script type="text/javascript" src="assets/js/sangarSlider/sangarBaseClass.js"></script>
<script type="text/javascript" src="assets/js/sangarSlider/sangarSetupLayout.js"></script>
<script type="text/javascript" src="assets/js/sangarSlider/sangarSizeAndScale.js"></script>
<script type="text/javascript" src="assets/js/sangarSlider/sangarShift.js"></script>
<script type="text/javascript" src="assets/js/sangarSlider/sangarSetupBulletNav.js"></script>
<script type="text/javascript" src="assets/js/sangarSlider/sangarSetupNavigation.js"></script>
<script type="text/javascript" src="assets/js/sangarSlider/sangarSetupSwipeTouch.js"></script>
<script type="text/javascript" src="assets/js/sangarSlider/sangarSetupTimer.js"></script>
<script type="text/javascript" src="assets/js/sangarSlider/sangarBeforeAfter.js"></script>
<script type="text/javascript" src="assets/js/sangarSlider/sangarLock.js"></script>
<script type="text/javascript" src="assets/js/sangarSlider/sangarResponsiveClass.js"></script>
<script type="text/javascript" src="assets/js/sangarSlider/sangarResetSlider.js"></script>
<script type="text/javascript" src="assets/js/sangarSlider/sangarTextbox.js"></script>
<script type="text/javascript" src="assets/js/sangarSlider.js"></script>
<script type='text/javascript'>
	jQuery(document).ready(function($) {
		$('#sangar-example').sangarSlider({
			timer : true, // true or false to have the timer
			width : 850, // slideshow width
			height : 500 // slideshow height
		});
	})		
</script>
 类似资料: