Personalisation Slider jquery
bonjours à tous,
Je viens a vous car j'ai réalisé le tuto création d'un slider qui fonction bien mais je voudrais encore plus le personnalisé. seulement mes connaissance ne me permette d'arrivé a se que je souhaiterais...
Voici le lien :
MON SITE
et voici voici ce que je souhaiterai obtenir :
RESULTAT SOUHAITAIS
voici mon js :
$(document).ready(function(){
s = new slider ("#galerie");
});
var slider = function(id){
var self=this;
this.div = $(id);
this.slider = this.div.find(".slider")
this.largeurCache = this.div.width();
this.largeur=0;
this.div.find ('a').each (function(){
self.largeur+=$(this).width();
self.largeur+=parseInt($(this).css("padding-left"));
self.largeur+=parseInt($(this).css("margin-left"));
self.largeur+=parseInt($(this).css("padding-right"));
self.largeur+=parseInt($(this).css("margin-right"));
});
this.prec = this.div.find(".prec");
this.suiv = this.div.find(".suiv");
this.saut = this.largeurCache/2;
this.nbEtapes = Math.ceil(this.largeur/this.saut - this.largeurCache/this.saut);
this.courant=0;
this.suiv.click(function(){
if(self.courant<=self.nbEtapes){
self.courant++;
self.slider.animate({
left:-self.courant*self.saut
},1000);
}
});
this.prec.click(function(){
if(self.courant>0){
self.courant--;
self.slider.animate({
left:-self.courant*self.saut
},1000);
}
});
}mon css :
#name_portfolio{ width:100%; height:73px; float:left;}
#name_portfolio img{ width:497px; height:73px; float:right;}
#global_content_portfolio{ width:100%; min-height:50px; background-color:black; float:left;}
#galerie{width:100%; background:red; height:430px; position:relative; overflow:hidden;}
.suiv{width:30px; height:53px; background:url(../images/fleche.png) top right no-repeat; position:absolute; right:0; top:0; cursor:pointer;}
.suiv:hover{ background-position:-48px -70px ;}
.prec{width:30px; height:53px; background:url(../images/fleche.png) top left no-repeat; position:absolute; left:0; top:0; cursor:pointer;}
.prec:hover{ background-position:0 -70px;}
.slider{ width:5000px; height:430px; position:relative;}en vous remerciant
2 réponses
alors bonjour deja
j'ai étudier le mon cas et j'ai adapté leur code au mien seulement j'ai un soucis au lancement du script... il ne se lance pas se qui est un peut embêtant... je ovulais voir si quelqu'un ne voyait pas une erreur dans le code.
merci
jQuery.noConflict();
jQuery(function($) {
//CAROUSSEL BULLEINFO
function expandContainer(){$(this).children("div.texte").slideToggle(300);}
function resetContainer(){$(this).children("div.texte").slideToggle(300);}
$(".bulleinfo").hoverIntent(expandContainer, resetContainer);
//CAROUSSEL
$(".carousel li").fadeTo(0, 0.3);
$("#ref3").fadeTo(0, 1);
$('.newCarousel').each(function(){
var animationActive = false;
var idCarousel = '#'+$(this).attr('id')+' ';
var elementWidth = $(idCarousel + '.carousel li').width();
var numberElements = $(idCarousel + '.carousel li').length;
var c;
var d;
$(idCarousel + '.carousel').css('width', (numberElements*2)*elementWidth).wrap(document.createElement('div')).parent().addClass('jcarousel-clipp');
// Gestion de defilement arriere
$(idCarousel + '.carouselPrev a').bind('click', function(){
//Gestion numero
var numId=parseFloat($("#carouselCompteur").html());
if(numId==1) $("#carouselCompteur").html(numberElements);
else $("#carouselCompteur").html(numId-1);
var numId=parseFloat($("#carouselCompteur").html());
//Grisement
$(".carousel li").fadeTo(300, 0.3);
$("#ref"+numId+"").fadeTo(1000, 1);
if(animationActive != true) {
animationActive = true;
$(idCarousel + '.carousel li:last').clone().insertBefore(idCarousel + '.carousel li:last');
$(idCarousel + '.carousel li:last').insertBefore(idCarousel + '.carousel li:first');
var marginEnd = ($(idCarousel + '.carousel').css('marginLeft'));
var marginBegin = marginEnd.replace(/px/, '');
marginBegin = marginBegin-elementWidth;
marginBegin = marginBegin+'px';
$(idCarousel + '.carousel').css('marginLeft', marginBegin);
$(idCarousel + '.carousel').stop().animate({'marginLeft': marginEnd}, 350, function() {
$(idCarousel + '.carousel li:last').remove();
animationActive = false
});
}
$('.navCarousel li.hidden').removeClass('hidden');
$('.navCarousel ul li:last]').clone().insertBefore('.navCarousel ul li:first');
$('.navCarousel ul li:last]').insertBefore('.navCarousel ul li:first');
$('.navCarousel ul li:last]').addClass('hidden');
return false;
});
// Gestion de defilement avant
$(idCarousel + '.carouselNext a').bind('click', function(){
//gestion numero
var numId=parseFloat($("#carouselCompteur").html());
if(numId==numberElements) $("#carouselCompteur").html(1);
else $("#carouselCompteur").html(numId+1);
var numId=parseFloat($("#carouselCompteur").html());
//Grisement
$(".carousel li").fadeTo(300, 0.3);
$("#ref"+numId+"").fadeTo(1000, 1);
if(animationActive != true) {
animationActive = true;
$(idCarousel + '.carousel li:first').clone().insertAfter(idCarousel + '.carousel li:first');
$(idCarousel + '.carousel li:first').insertAfter(idCarousel + '.carousel li:last');
var marginEnd = ($(idCarousel + '.carousel').css('marginLeft'));
var marginBegin = marginEnd.replace(/px/, '');
marginBegin = marginBegin-elementWidth;
marginBegin = marginBegin+'px';
$(idCarousel + '.carousel').stop().animate({'marginLeft': marginBegin}, 350, function() {
$(idCarousel + '.carousel').css('marginLeft', marginEnd);
$(idCarousel + '.carousel li:first').remove();
animationActive = false
});
}
return false;
});
});
});