11487 sujets

JavaScript, DOM et API Web HTML5

Slider jQuery

Bonjour j'aimerais savoir la démarche à suivre pour programmer mon slider avec la librairie jQuery. http://show.toogy.fr/giriad/

J'aimerais que les slides arrivent par deux, que les flèches se bloquent lorsqu'on arrive au bout de la liste des images (à gauche ou à droite)

Enfin j'aimerais que dans le html une simple boucle php suffise pour les afficher, donc que seulement ceci se répète : 
<div class="item">
	<a href="show.php" class="slide-show"></a>
	<img src="data/img/slide-item-sample.png" />
</div>
Finalement j'ai réussi tout seul comme un grand ^^

jQuery().ready(function(){
	
	$('.slide-show').hide();
	
	$('.twoitems > .item').hover(function(){
		$(this).find('.slide-show').show();
	},function(){
		$(this).find('.slide-show').hide();
	});
	
	$('.goto-left').addClass('disabled');
	
	var n = $('.twoitems').size();
	if(n > 1){
		$('.slide-content > .twoitems:first').addClass('visible').show();
		
		$('.goto-right').removeClass('disabled').addClass('activate');
		
		$('.goto-right').click(function(){
		
			if($(this).hasClass('activate')){ 
				
				$('.twoitems.visible').removeClass('visible').fadeOut('1000').next('.twoitems').addClass('visible').fadeIn('1000');
				
				if($('.slide-content > .twoitems:first').hasClass('visible')){
					$('.goto-left').removeClass('activate').addClass('disabled');
				}
				else{
					$('.goto-left').removeClass('disabled').addClass('activate');
				}
				
				if($('.slide-content > .twoitems:last').hasClass('visible')){
					$('.goto-right').removeClass('activate').addClass('disabled');
				}
				else{
					$('.goto-right').removeClass('disabled').addClass('activate');
				}
				
			}
		
		});
		
		$('.goto-left').click(function(){
		
			if($(this).hasClass('activate')){
				$('.twoitems.visible').removeClass('visible').fadeOut('1000').prev('.twoitems').addClass('visible').fadeIn('1000');
				
				if($('.slide-content > .twoitems:first').hasClass('visible')){
					$('.goto-left').removeClass('activate').addClass('disabled');
				}
				else{
					$('.goto-left').removeClass('disabled').addClass('activate');
				}
				
				if($('.slide-content > .twoitems:last').hasClass('visible')){
					$('.goto-right').removeClass('activate').addClass('disabled');
				}
				else{
					$('.goto-right').removeClass('disabled').addClass('activate');
				}
			}
		
		});
		
	}
	else if(n == 1){
		$('.goto-right').removeClass('activate').addClass('disabled');
	}
	else if(n == 0){
		$('.goto-left, .goto-right').removeClass('activate').addClass('disabled');
		$('.slide-content').append('<div class="noitem">Oops ! Aucun item trouvé !</div>');
	}

});
Sujet clos
Aller à