Slice Carousel

Examples

  1. fixed
  2. responsive

Documentation

Animation smoothness depends from operating system, browser, and image size / weight
recommended size would be not grater than 1000px x 1000px and 200kb - 300kb

To add SliceCarousel to your page:
	<!-- sliceCarousel CSS -->
	<link rel="stylesheet" type="text/css" href="../sliceCarousel/sliceCarousel.css">
	
	<!-- jQuery library -->
	<script src="../sliceCarousel/jquery-1.9.1.min.js"></script>
	
	<!-- sliceCarousel plugin -->
	<script src="../sliceCarousel/sliceCarousel-min.js"></script>
	
Add javascript to enable SliceCarousel when document is ready
	<script type="text/javascript">

		$(document).ready(function() {
			
			$('#carouselSlices').sliceCarousel({
				refresh: 5000,
				animateTime: 350,
				imageDelay: 100,
				imageDelayOffset: 0,
				textDelay: 150
			});
			
		});
	
	</script>
	
Add an UL list with images, mobile image (optional), title (optional) and link (optional)
	<ul id="carouselSlices" style="display: none;">
		<li data-img="photo/1.jpg" data-mimg="photo/1-thumb.jpg"></li>
		<li data-img="photo/2.jpg" data-mimg="photo/2-thumb.jpg" data-title="Title here"></li>
		<li data-img="photo/3.jpg" data-mimg="photo/3-thumb.jpg"></li>
		<li data-img="photo/4.jpg" data-mimg="photo/4-thumb.jpg" data-link="http://www.dev4web.it/"></li>					
	</ul>
	

Options

Name Default Description
refresh 1800 time, in milliseconds, before next image
pauseOnClick false true or false, pause if next or prev clicked
mouseOnScroll true true or false, scroll with mouse
animateTime 300 time, in milliseconds, for image animation
imageDelay 200 time, in milliseconds, before side image move
imageDelayOffset 0.3 a latency for last image in %
textDelay 150 time, in milliseconds, for text to appear / disappear
textIfEmpty "hide" "hide" if no text is available on images title, "show" keep text background visible even on images without title
linkTarget "self" link target: "self" same page, "blank" new page
direction "rtl" direction of carousel: "ltr" left to right, "rtl" right to left
overLayer "" id of custom overlay (ex. "#my-id"), it fades out when carousel is ready
leftSliceW 15 left slice %
rightSliceW 15 right slice %
imgCounter true true or false, show image counter
disableDrag true true or false, disable image drag