AnAwesomejQCarousel

Transition Towards: Down Up

Start Transition Stop Transition Previous Next

1 2 3 4 5 6

Code Which Makes this awesomeness!!!

HTML:

		
<div class="image_carousel">
	<div id="foo1">
		<div class="row">
			<div class="rotaion">
				<b>Transition Towards:</b>
				<label class="radio-inline">
					<input type="radio" name="transitionTowards"  value="left" checked="checked">Down
				</label>
				<label class="radio-inline">
						  <input type="radio" name="transitionTowards" value="right">Up
				</label>
		</div>
					
				<div class="col-xs-2 transitionInterval">
					<input type="text" class="form-control" name="transitionInterval" placeholder="Transition Interval" value="5000">
		 </div>
		 <div class="clearfix"></div>
		</div>
		<br/>
		<div class="row">
			<center>
				<div class="col-centered">
					<a href="javascript:void(0)" class="starttransition btn btn-primary btn-sm">Start Transition</a>
					<a href="javascript:void(0)" class="stoptransition btn btn-primary btn-sm">Stop Transition</a>
					<a href="javascript:void(0)" class="acarousel-prev btn btn-primary btn-sm">Previous</a>
					<a href="javascript:void(0)" class="acarousel-next btn btn-primary btn-sm">Next</a>
				</div>
				<div class="nav-buttons">
					<a href="javascript:void(0)" class="btn btn-default btn-xs slidto">1</a>
					<a href="javascript:void(0)" class="btn btn-primary btn-xs slidto">2</a>
					<a href="javascript:void(0)" class="btn btn-primary btn-xs slidto">3</a>
					<a href="javascript:void(0)" class="btn btn-primary btn-xs slidto">4</a>
					<a href="javascript:void(0)" class="btn btn-primary btn-xs slidto">5</a>
					<a href="javascript:void(0)" class="btn btn-primary btn-xs slidto">6</a>
				</div>
			</center>
		</div>
		<div class="clearfix"></div>
		<img src="http://lorempixel.com/320/200/sports/1/" alt="1" width="320" height="320" />
		<img src="http://lorempixel.com/320/200/sports/2/" alt="2" width="320" height="320" />
		<img src="http://lorempixel.com/320/200/sports/3/" alt="3" width="320" height="320" />
		<img src="http://lorempixel.com/320/200/sports/4/" alt="4" width="320" height="320" />
		<img src="http://lorempixel.com/320/200/sports/5/" alt="5" width="320" height="320" />
		<img src="http://lorempixel.com/320/200/sports/6/" alt="6" width="320" height="320" />
	</div>
	<div class="clearfix"></div>
</div>
		
        

JS:

		
			
var foo1anAwesomejQCarousel
$(document).ready(function(){
	$('input[name="transitionTowards"],input[name="transitionInterval"]').on('focusout change',function(){
			var transitionInterval= $('input[name="transitionInterval"]').val()
			if($.trim($('input[name="transitionInterval"]').val())==='')
				transitionInterval=5000;
				foo1anAwesomejQCarousel.updatesettings({rotation:$('input[name="transitionTowards"]:checked').val(),interval:transitionInterval});
	});
	var transitionInterval= $('input[name="transitionInterval"]').val()
	if($.trim($('input[name="transitionInterval"]').val())==='')
		transitionInterval=5000;
	 foo1anAwesomejQCarousel=$('#foo1').anAwesomejQCarousel({
																rotation:$('input[name="transitionTowards"]:checked').val(),
																interval:transitionInterval,
																callBackAfterEachSlide:function(curel,prevel){
																	$('.slidto.btn-default').addClass('btn-primary').removeClass('btn-default');
																	$('.slidto:contains("'+$(curel).attr('alt')+'")').addClass('btn-default').removeClass('btn-primary');
																}});
	$('#foo1 .starttransition').on('click',function(){
		foo1anAwesomejQCarousel.startTransition();
	});
	$('#foo1 .stoptransition').on('click',function(){
		foo1anAwesomejQCarousel.stopTransition();
	});
	$('#foo1 .slidto').on('click',function(){
		var selector = $(this).text();
		foo1anAwesomejQCarousel.slideTo($('img[alt="'+selector+'"]'));
	});
});