esportazione dati     developer     GSA     developer     siti web Novara     WEB     GSA     importazione dati     web developer     esportazione dati     Novara     Milano     siti internet Novara     Novara     siti web     Google Search Appliance     sviluppo     web developer     siti Novara     PHP     iPhone     e-commerce     siti web Novara     webmaster     ecommerce     esportazione dati     intranet     Milano     applicativi intranet     siti Novara     Google Search Appliance     WEB     webmaster     siti Novara     intranet     esportazione dati     mobile     siti internet     intranet     iPhone     siti web     e-commerce     siti Novara     PHP     siti internet     jQuery     MySQL     web sites     web sites     importazione dati     web developer     mobile     internet     applicativi intranet     siti web     e-commerce     tool internet     jQuery     sviluppatore     sviluppatore     ecommerce     siti internet     mobile     siti internet Novara     intranet     PHP     internet     iPhone     importazione dati     webmaster     developer     Novara     WEB     Milano     siti web Novara     web sites     ecommerce     tool internet     importazione dati     GSA     iPhone     jQuery     ecommerce     iPhone     siti internet Novara     MySQL     jQuery     siti internet     siti internet Novara     developer     WEB     applicativi intranet     GSA     webmaster     web developer     importazione dati     tool internet     sviluppo     intranet     internet     jQuery     GSA     siti internet     intranet     sviluppo     siti internet     Milano     tool internet     siti internet     siti internet Novara     web developer     intranet     PHP     siti web Novara     web sites     siti web     siti Novara     siti web Novara     Google Search Appliance     internet     tool internet     sviluppatore     siti internet     siti web     Piemonte     intranet     webmaster     applicativi intranet     MySQL     e-commerce     mobile     sviluppo     internet     MySQL     intranet     e-commerce     PHP     sviluppo     mobile     intranet     ecommerce     siti internet     Google Search Appliance     sviluppatore     Novara     MySQL     esportazione dati     WEB     Google Search Appliance     siti internet     web sites     developer     applicativi intranet     sviluppatore  

SLICE CAROUSEL jQuery responsive carousel

SliceCarousel

SliceCarousel is a 3 slices responsive jQuery carousel.

Can use horizontal and vertical image mix.
Add links.
Allow to specify different mobile image for lower data transfer.
Preload next and previous image only.
Customizable sides percentage.

slicecarousel


The carousel preload only the 3 main images and the next image coming in.
Once it does a full cycle it doesn't download the images anymore.

Documentation

To add SliceCarousel to your page:
  • download the plugin and unzip it
  • copy sliceCarousel folder to your website
  • include jQuery javascript (.js) if you don't already use one, need to be version 1.7 or greater
  • include javascript (.js) and stylesheet (.css) in your document
							<!-- 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: 250,
										imageDelay: 100,
										imageDelayOffset: 0,
										imageProportion: "auto",
										textDelay: 150
									});
									
								});
							
							</script>
							
Add an UL list with images, title (optional) and link (optional)
							<ul id="carouselSlices" style="display: none;">
								<li data-img="photo/1w.jpg"></li>
								<li data-img="photo/2w.jpg" data-title="Title here"></li>
								<li data-img="photo/3w.jpg"></li>
								<li data-img="photo/4w.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

Plugin version 0.7.3
Developed on jQuery 1.9.1
Works with jQuery 1.7 or higher.
The plugin is provided "AS IS" without warranty of any kind, express or implied.
Browser support
chrome safari firefox opera ie
tested on major modern browsers
Chrome 25, Safari 6, Firefox 19, Opera 12 and Internet Explorer 7+
Devices
tested on iOS 6 (iPad, iPhone)
tested on Android (Android and Chrome)
License
This plugin is licensed under Creative Commons Attribution-NoDerivs 3.0 Unported , you can use it in all you projects even commercial ones.

You may not alter, transform, or build upon this work.
creativecommons

Alain Franzoni   Viale Dante   28100 Novara (NO) Italy     cell. +39 370 3292977     email info@dev4web.it   P. IVA 01855800031