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

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

I wrote the code of Slide Carousel.
You can see a preview and download it for free.

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