Anoslide v1.0 - Ultra lightweight responsive jQuery carousel demo
Download Anoslide v1.0 Documentation

1. Mixed content demo (One visible item)Resize your browser to review responsive effect


$('.carousel ul').anoSlide(
{
	items: 1,
	speed: 500,
	prev: 'a.prev',
	next: 'a.next',
	lazy: true,
	auto: 4000
})





	
	
    
		
  • Content goes here
    • 
		
  • Content goes here
    • 
		
  • Content goes here
    •

2. Multiple itemsResize your browser to review responsive effect


$('.carousel[data-mixed] ul').anoSlide(
{
	items: 5,
	speed: 500,
	prev: 'a.prev[data-prev]',
	next: 'a.next[data-next]',
	lazy: true,
	delay: 100
})





	
	
    
		
  • 
			
    
		
    • 
		
  • 
			
    
		
    • 
		
  • 
			
    
		
    • 
		
  • 
			
    
		
    • 
		
  • 
			
    
		
    • 
		
  • 
			
    
		
    • 
		
  • 
			
    
		
    •

3. PagingAnoslide is designed to provide suitable hooks in the form of callback functions allowing you to easily extend the plugin without updating it's core.


$('.carousel ul').anoSlide(
{
	items: 1,
	speed: 500,
	prev: 'a.prev[data-prev-paging]',
	next: 'a.next[data-next-paging]',
	lazy: true,
	onConstruct: function(instance)
	{
		var paging = $('<div/>').addClass('paging fix').css(
		{
			position: 'absolute',
			top: 1,
			left:50 + '%',
			width: instance.slides.length * 40,
			marginLeft: -(instance.slides.length * 40)/2
		})
		
		/* Build paging */
		for (i = 0, l = instance.slides.length; i < l; i++)
		{
			var a = $('<a/>').data('index', i).appendTo(paging).on(
			{
				click: function()
				{
					instance.stop().go($(this).data('index'));
				}
			});
			
			if (i == instance.current)
			{
				a.addClass('current');
			}
		}

		instance.element.parent().append(paging);
	},
	onStart: function(ui)
	{
		var paging = $('.paging');
		
		paging.find('a').eq(ui.instance.current).addClass('current').siblings().removeClass('current');
	}
})





	
	
    
		
  • Content goes here
    • 
		
  • Content goes here
    • 
		
  • Content goes here
    •

3. Captions exampleCheck out the example below and see how a captions can be added without changing anoSlide's code at all. It's really fun.


$('.carousel.captions ul').anoSlide(
{
	items: 1,
	speed: 500,
	prev: 'a.prev[data-prev-caption]',
	next: 'a.next[data-next-caption]',
	lazy: true,
	onStart: function(ui)
	{
		/* Remove existing caption in slide */
		ui.slide.element.find('.caption').remove();
	},
	onEnd: function(ui)
	{
		/* Get caption content */
		var content = ui.slide.element.data('caption');
		
		/* Create a caption wrap element */
		var caption = $('<div/>').addClass('caption').css(
		{
			position: 'absolute', 
			background: 'rgb(0,0,0)',
			color: 'rgb(255,255,255)',
			textShadow: 'rgb(0,0,0) -1px -1px',
			opacity: 0.5,
			top: -100,
			left: 50,
			padding: 20,
			webkitBorderRadius: 5,
			mozBorderRadius: 5,
			borderRadius: 5
		}).html(content);
		
		/* Append caption to slide and animate it. Animation is really up to you. */
		caption.appendTo(ui.slide.element).animate(
		{
			top:50
		});
	}
})



<div class="carousel captions">
	<a class="prev" data-prev-caption></a>
	<ul>
		<li data-caption="Adding captions is really easy">
			<figure><img data-src="images/slides/1.jpg" src="" /></figure>
		</li>
		<li data-caption="anoSlide's callback functions can be used for adding Captions">
			<figure><img data-src="images/slides/2.jpg" src="" /></figure>
		</li>
		<li data-caption="<span style='color:#00f0ff'>HTML - No problem</span><br /><br />It's really up to You to decide whether to use HTML or not.">
			<figure><img data-src="images/slides/3.jpg" src="" /></figure>
		</li>
		<li>
			<figure><img data-src="images/slides/4.jpg" src="" /></figure>
		</li>
		<li>
			<figure><img data-src="images/slides/5.jpg" src="" /></figure>
		</li>
		<li>
			<figure><img data-src="images/slides/6.jpg" src="" /></figure>
		</li>
		<li>
			<figure><img data-src="images/slides/7.jpg" src="" /></figure>
		</li>
	</ul>
	<a class="next" data-next-caption></a>
	<a class="badge"></a>
</div>