Carrousel pour mon homepage

Résolu
chaima.abdouli Messages postés 121 Statut Membre -  
chaima.abdouli Messages postés 121 Statut Membre -
Bonjour ,

Je veux mettre en place un carrousel pour faire défiler des images dans le homepage de mon site !

il était fonctionnel et la aucune image ne défile juste une seule qui est plutot figée !
Est ce que quelqu'un peut me trouver l'erreur ? 

<center>
 <div width="754px">
  <a href="http://www.blabla.net/dmd-m-67.html?osCsid=17e822078daac2749b1bc410fb0f4a01"><img width="752px" src="DMD-05.png"></a>
 </div> <br />

<div id="slide">
  <div id="entries">
  
    <div class="entry"> <a href="http://www.blabla.net/hedon-c-55_237.html" title="Casques Hedon">
  <img border="0" style="margin-bottom:5px;" src="banner4.png" alt="Casques Hedon"></a>
      <div class="entry-inner"></div>
    </div>
 
 
 <div class="entry"> <a href="http://www.blabla.net/bell-c-55_133.html" title="Casques Bell">
  <img border="0" style="margin-bottom:5px;" src="banner2.png" alt="Casques Bell"></a>
      <div class="entry-inner"></div>
    </div>
 
 <div class="entry"> <a href="http://www.blabla.net/matchless-c-56_233.html" title="Collection Matchless">  <img border="0" style="margin-bottom:5px;" src="banner3.png" alt="Collection Matchless"></a>
 <div class="entry-inner"></div>  
 </div>  
     
  </div>

</div>
</center>
<script type="text/javascript">
 var automove = 1;
 var moveinterval = 3600;
 var movespeed = 1000;
 var moveeffectforward = "easeInOutExpo";
 var moveeffectforward_automove = "easeInOutExpo";
 var moveeffectbackward = "easeInOutExpo";
 var _to = 0;
 var _currententry = 0;
 var _nbentries = $("#entries > div").length;
 var _entrywidth = parseInt($("#entries").css("width"))/_nbentries;

 function move(i) {
  if(i>=_nbentries) { $('#entries').stop().animate({marginLeft:"0px"}, movespeed, moveeffectbackward); i=0; }
  else $('#entries').stop().animate({marginLeft:(-_entrywidth*i)+"px"}, movespeed, automove ? moveeffectforward_automove : moveeffectforward);
  _currententry = i;
  if(automove) _to = setTimeout("move(_currententry+1)",moveinterval);
  $('#thumbs li').removeClass("current");
  $('#thumbs li:eq('+(i%_nbentries)+')').addClass("current");
 }
 
 $(document).ready(function() {
  $("#thumbs li").each(function(i) {
   i==0 ? $(this).addClass("current") : 0;
   $(this).mouseover(function() {
    clearTimeout(_to);
    automove = 1;
    move(i);
   });
  })
  if(automove) _to = setTimeout("move(1)",moveinterval);
 });
 
</script>
A voir également:

1 réponse

Réponse 1 / 1
Pitet Messages postés 2845 Statut Membre 527
 
Salut,

Dans ton code tu initialises le slider avec le sélecteur "#thumbs li", or tu n'as aucun élément avec cet id dans ton html.

Il semble également que tu es besoin d'inclure jQueryUI pour faire fonctionner ton code.

Où as tu trouvé ce code ? La documentation devrait t'en dire plus.
0
chaima.abdouli Messages postés 121 Statut Membre 2
 
Oui je me suis rendu compe apres donc j'ai changé de code qui n'utilise pas javascript mon probleme avec ce code qu'il n'accepte que deux images seulement la banniere2 et la banniere4 je ne sais pas pk il n'accepte pour les autres images qui doivent défiler aussi 


<center>
<div width="754px">
		<a href="http://www.motoblabla.net/dmd-m-67.html?osCsid=17e822078daac2749b1bc410fb0f4a01"><img width="752px" src="DMD-05.png"></a>
	</div>	<br />
<div id="slideshow">

 <ul id="sContent">

  <li><a href="http://www.motoblabla.net/hedon-c-55_237.html" title="Casques Hedon" class="vueS" style="background-image:url('http://www.motoblabla.net/banner2.png')" ></a></li>

  <li><a href="http://www.motoblabla.net/bell-c-55_133.html" title="Casques Bell" class="vueS" style="background-image:url('http://www.motoblabla.net/banner3.png')" ></a></li>

  <li><a href="http://www.motoblabla.net/matchless-c-56_233.html" title="Collection Matchless" class="vueS" style="background-image:url('http://www.motoblabla.net/banner2.png')" ></a></li>

   <li><a href="http://www.motoblabla.net/matchless-c-56_233.html" title="Collection Matchless" class="vueS" style="background-image:url('http://www.motoblabla.net/banner1.png')" ></a></li>

 </ul>

</div>
</center>
<style type="text/css">
 #slideshow {
  background-image:url('http://www.motoblabla.net/banner4.png');

  background-repeat:repeat-x;;

  background-position:center center;

  width: 751px;

  height: 150px;

  display: block;

  float: left;

  margin:  0px;

  padding: 0px;

  overflow: hidden;

  position: relative;

  border: 1px solid gray;

  margin-bottom: 10px;

  margin-left: 60px;
 }

 .vueS{

  width: 636px;

  height: 150px;
0
chaima.abdouli Messages postés 121 Statut Membre 2
  
 .vueS{

  width: 636px;

  height: 150px;

  display:block;

  background-position:center center;

 }

 #sContent li {

  display: inline;

  left:0px;;

 }

 #sContent {

  position: absolute;

  width: 636px;

  top: 0;

  left: 0;

  margin: 0;

  padding: 0;

  margin-bottom:5px; 
  
 }



 @-webkit-keyframes AutoSlide { 0%, 15%, 100% {left: 0px;} 16%, 31% {left: -282px;} 33%, 48% {left: -564px;} 50%, 65% {left: -846px;} 66%, 81% {left: -1128px;} 83%, 98% {left: -1410px;}  }

 @-moz-keyframes AutoSlide { 0%, 15%, 100% {left: 0px;} 16%, 31% {left: -282px;} 33%, 48% {left: -564px;} 50%, 65% {left: -846px;} 66%, 81% {left: -1128px;} 83%, 98% {left: -1410px;}  }

 @keyframes AutoSlide { 0%, 15%, 100% {left: 0px;} 16%, 31% {left: -282px;} 33%, 48% {left: -564px;} 50%, 65% {left: -846px;} 66%, 81% {left: -1128px;} 83%, 98% {left: -1410px;}  }

 #sContent {

  -webkit-animation-name: AutoSlide; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out;

  -moz-animation-name: AutoSlide; -moz-animation-duration: 5s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out;

  animation-name: AutoSlide; animation-duration: 5s; animation-iteration-count: infinite; 
</style>
0

Discussions similaires

Enlever les fond d'ecran carousel auto du tel XIAMI 14
Joo2795 -
MPMP10 -

1 réponse
Fond d'écran carousel xiaomi
Thomasg -
Albator -

3 réponses