11496 sujets

JavaScript, DOM et API Web HTML5

Plusieurs sliders dans la même page.

Bonjour,

J'ai utilisé la fonction recherche mais les résultats ne m'ont pas du tout éclairé. Je précise que je suis novice. Je suis étudiant en graphisme et je réalise mon portfolio, j'ai appris à créer un slider simple avec un peu d'easing en cours, cependant je souhaite l'appliquer plusieurs fois dans la même page. J'espère que vous allez réussir à m'éclairer, je ne pense pas que ce soit sorcier pour des gens confirmés. Merci ! Smiley smile 


<head>
<script language="javascript" src="js/jquery-1.10.2.min.js"></script>
<script language="javascript" src="js/jquery.easing.min.js"></script>
<script language="javascript" src="js/jquery.slideLicence.js"></script>
<script language="javascript">
	$(document).ready(function(){
		slidorama( $('#slider1'), $('#slider2'), $('#back1'), $('#next1'), $('#back2'), $('#next2'));
	});
</script>
</head>

<body>
	<div id="slider1">
		<ul>
    			<li><img src="img/neobright1.jpg" /></li>
        		<li><img src="img/neobright2.jpg" /></li>
        		<li><img src="img/neobright3.jpg" /></li>
    		</ul>
		</div>
                <div id="next1">NEXT ></div>
    		<div id="back1">< BACK</div>

	<div id="slider2">
		<ul>
    			<li><img src="img/neobright1.jpg" /></li>
        		<li><img src="img/neobright2.jpg" /></li>
        		<li><img src="img/neobright3.jpg" /></li>
    		</ul>
		</div>
                <div id="next2">NEXT ></div>
    		<div id="back2">< BACK</div>
</body>




ul, li { margin: 0; padding: 0; list-style: none; }

#slider1 { width: 777px; height: 468px; margin-top: 45px; margin-left: auto; margin-right: auto; }
#slider2 { width: 777px; height: 468px; margin-top: 45px; margin-left: auto; margin-right: auto; }

li img { width: 100%; }

#next1 { }
#back1 { }

#next2 { }
#next2 { }




// SLIDORAMA

function slidorama(cible, btnprec, btnsuiv){

	var numeroDePage = 1;
	var nombreDePages = cible.find('li').length;

	cible.css('overflow', 'hidden'),
	cible.find('ul').css({
		'width': (nombreDePages*100)+'%',
		'position': 'relative',
		'margin': 0,
		'padding': 0
	});
	cible.find('li').css({
		'width': (100/nombreDePages)+'%',
		'float': 'left',
		'margin': 0,
		'passing': 0
	});
	
	cible.add(btnsuiv).click(function(){
		if( numeroDePage == nombreDePages) {
			cible.add(btnsuiv).find('ul').animate({'left': '0'}, 800, 'easeOutBack');
			numeroDePage = 1;
			
		} else {
			cible.add(btnsuiv).find('ul').animate({'left': '-=100%'}, 800, 'easeOutBack');
			numeroDePage ++;
		}
	});
		
	btnprec.click(function(){
		if( numeroDePage == 1) {
			cible.find('ul').animate({'left': (-100*(nombreDePages-1))+'%'}, 800, 'easeOutBack');
			numeroDePage = nombreDePages;
			
		} else {
			cible.find('ul').animate({'left': '+=100%'}, 800, 'easeOutBack');
			numeroDePage --;
		}
	});
}


Dans l'état actuel : le premier slider fonctionne mais uniquement avec la balise "back", le second ne fonctionne pas du tout et les images du slider se succèdent verticalement.
Modifié par El_Guirineco (02 Feb 2014 - 12:47)
Sujet clos
Aller à