Blog Details

For those of you looking for a simple and lightweight Image Carousel for your Mobile App you have come to the right place.

One of the requirements for one of our recent projects was to create an Image Carousel for a Mobile Web App. At first you would think this is an easy task. I assure you it is not easy to find something that does what you want it to do. Increasing amounts of sample code is flooding the net. Most of which is badly written, buggy, impossible to customize and impossible to style. That is why I decided to start from the bare essentials and build on that.

What you will need

  • jQuery library
  • jSwipe Plugin for jQuery

(Included in the sample code)

Download   or   View Demo

 

Note: View the demo on a mobile device. The swipe functionality does not work on desktop browsers.

The Code

The jQuery Code

	$(document).ready(function (){
		var ImagesItems = 0;
		var CurrentItem = 0;
		var scrollwidth = parseInt(jQuery('.ImagesFrame').width());
		var i = 0;
		
		jQuery('.ImagesItem').each(function(index){
			jQuery(this).attr("id", "ImagesItem_" + index);
			jQuery('.ImagesItem').css('width', scrollwidth);
			jQuery(this).css("opacity", "1");
			ImagesItems = ImagesItems + 1;
		});
		
		jQuery('.ImagesScroller').width(scrollwidth * ImagesItems);
		
		jQuery('.ImagesScroller').swipe({
			threshold: {x: 80, y: 100},
			swipeLeft: function() {
				if (CurrentItem < (ImagesItems - 1))
				{
					jQuery('.ImagesScroller').stop(true, true);
					CurrentItem = CurrentItem + 1;
					jQuery('.ImagesScroller').animate({"margin-left": "-=" + scrollwidth + "px"}, 300, function (){jQuery('.ImgIndicator').removeClass("Active");jQuery('#ImgInd_' + CurrentItem).addClass('Active');});
				}
			},
			swipeRight: function() {
				if (CurrentItem > 0)
				{
					jQuery('.ImagesScroller').stop(true, true);
					CurrentItem = CurrentItem - 1;
					jQuery('.ImagesScroller').animate({"margin-left": "+=" + scrollwidth + "px"}, 300, function (){jQuery('.ImgIndicator').removeClass("Active");jQuery('#ImgInd_' + CurrentItem).addClass('Active');});
				}
			},
			preventDefaultEvents: false
		});
		
		if (ImagesItems > 1)
		{
			for (i = 0; i < ImagesItems; i++)
			{
				if (i == 0)
				{
					jQuery('.ImageIndicators').append('
'); } else { jQuery('.ImageIndicators').append('
'); } } jQuery('.ImageIndicators').css("display", "block"); } jQuery(window).resize(function(){ scrollwidth = parseInt(jQuery('.ImagesFrame').width()); jQuery('.ImagesItem').css('width', scrollwidth); jQuery('.ImagesScroller').width(scrollwidth * ImagesItems); jQuery('.ImagesScroller').css({"margin-left": "-" + (scrollwidth * CurrentItem) + "px"}); }); });

 

The HTML

	

 

The CSS

	.ImagesMain {
		display:block;
		position:relative;
		margin:0px;
		padding:10px;
		}
	.ImagesFrame {
		display:block;
		margin:0px;
		padding:0px;
		overflow:hidden;
		}
	.ImagesScroller {
		display:block;
		margin:0px;
		padding:0px;
		}
	.ImagesItem {
		display:block;
		margin:0px;
		padding:0px;
		opacity:0;
		filter:alpha(opacity=0);
		zoom:1;
		}
	.ImagesItem img {
		width:100%;
		}
	.ImageIndicators {
		display:none;
		margin:0px;
		padding:4px 0px 0px 0px;
		text-align:center;
		}
	.ImgIndicator {
		display:inline-block;
		margin:0px;
		padding:0px;
		width:18px;
		height:15px;
		background:url(ImgIndicator.png) center top no-repeat;
		}
	.ImgIndicator.Active {
		background:url(ImgIndicator.png) center bottom no-repeat;
		}
	

 

Download   or   View Demo

 

Note: View the demo on a mobile device. The swipe functionality does not work on desktop browsers.

The beauty of it is that it is fully customizable. You can add, remove or edit any part of it. This should only be a starting point of your final build. Use and abuse at your own will. Enjoy!

Recommended For You

Information Requested is Not Found