besoin d'aide svp

Bonjour tout d'abord je me présente je suis étudiant en 1er année informatique et suite a un projet on ce dois de créer un site mais je suis bloqué cela fais un bout de temps sur un slider au faite je voudrais un défilement fluide est étant assez débutant si vous pourriez m'aider a éclaircir mon code merci d'avance

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet"  href="style/style0.css">
	<title>
		projet web
	</title>
</head>
<body>
 
	

	<div id="accueil">
		<nav>
		<ul>	
			<li><a href="#accueil">ACCUEIL</a></li>
			<li><a href="#tutorial">TUTORIAL</a></li>
			<li><a href="#templates">TEMPLATES</a></li>
			<li><a href="#equipe.html">EQUIPES</a></li>
		</ul>
		</nav>

	<div class="centralText">
	<h1>Create your CV</h1>
	<img src="images/LOGO.jpg " width="400px">
	<img class="bas" src="images/bas.png" width="80px" alt="bas">
	</div>

	</div>


	<div id="tutorial">
		<div class="choose">
			<h2>choose</h2>
		</div>

		<div class="edit">
			<h2>edit</h2>
		</div>
		<div class="admire">
			<h2>admire</h2>
		</div>
		<img class="bas" src="images/bas.png" width="80px" alt="bas">
	</div>



	<div id="templates">

<div class=".carrousel">	
	<nav id="buttons">
		<ul>
			<li><button class="left"><p><img src="images/left-arrow.png" alt="left arrow" /><img class='red' src="images/left-arrow-red.png" alt="left red arrow" /></p></button></li>
			<li><button class="right"><p><img src="images/right-arrow.png" alt="right arrow" /><img src="images/right-arrow-red.png" alt="right red arrow" /></p></button></li>
		</ul>
	</nav>


		<nav class="slide-nav">
			<ul>
				<li><a href="#item0">1</a></li>
				<li><a href="#item1">2</a></li>
				<li><a href="#item2">3</a></li>
				<li><a href="#item3">4</a></li>
			</ul>
		</nav>

<div class="cv">
	<div class="slider" id="item0">
		<img src="images/cv.png" width="1000px">
		<div class="cv1">
			<h3>Thinder theme</h3>
			<p> DIV 0</p>
		</div>
		</div>


		<div class="slider" id="item1">
		<img src="images/cv.png" width="1000px">
		<div class="cv1">
			<h3>Thinder theme</h3>
			<p> DIV 1 </p>
		</div>
		</div>


		<div class="slider" id="item2">
		<img src="images/cv.png" width="1000px">
		<div class="cv1">
			<h3>Thinder theme</h3>
			<p>DIV 2</p>
		</div>
		</div>


		<div class="slider" id="item3">
		<img src="images/cv.png" width="1000px">
		<div class="cv1">
			<h3>Thinder theme</h3>
			<p> DIV 3</p>
		</div>
</div>
</div>
	<!-- footer -->
<footer>
	
</footer>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="javascript/main0.js"></script>
<script src="javascript/main1.js"></script>

</body>
</html>

(function ($){

	var $carrousel = $('.carrousel'),
    $div = $('.slider'),
    indexdiv = $div.length - 1, 
    i = 0
    $currentdiv = $div.eq(i)

    $div.css('display','none')
    $currentdiv.css('display', 'block')

// bouton droite //
    $('.right').click(function(){
    	i++;
    if( i <= indexdiv ){
    $div.hide(600,'linear'); 
    $currentdiv = $div.eq(i);
    $currentdiv.show(600,'linear');
     }
      else{
        i = indexdiv;
    }


});

// bouton gauche //
	$('.left').click(function(){
		  i--;
      if( i >= 0 ){
       $div.hide(600,'linear');
       $currentdiv.show(600,'linear');
       $currentdiv = $div.eq(i);
      }
      else{
        i = 0;
    } 
 });



})(jQuery);

-
Edité par albrh 26 mai 2017 à 14:10:15

albrh

26 mai 2017 à 13:40:42

AbcAbc6

26 mai 2017 à 14:00:02

Bonjour ,

Je t'invite à éditer ton premier message afin d'en modifier le titre de ton sujet, car «problème a résoudre urgent svp» n'est pas explicite de la problématique que tu rencontres. Sous peine de voir ton sujet fermer. Et rien n'est urgent ici.

Et pour insérer du code sur ce forum, merci d'utiliser le bouton code </> prévu à cet effet, en choisissant le bon langage. Cela permet entre autre de pouvoir copier/coller ton code pour tester.

slider

besoin d'aide svp

Supprimer

Modérer

Signaler le message aux modérateurs