Carrousel pour mon homepage

Résolu/Fermé

chaima.abdouli Messages postés 94 Date d'inscription mercredi 17 juin 2015 Statut Membre Dernière intervention 3 septembre 2015 - Modifié par chaima.abdouli le 3/09/2015 à 09:38
chaima.abdouli Messages postés 94 Date d'inscription mercredi 17 juin 2015 Statut Membre Dernière intervention 3 septembre 2015 - 3 sept. 2015 à 12:51

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:

Comment enlever le fond d'écran carrousel
Double ecran - Guide
Comment mettre une vidéo en fond d'écran - Guide
Capture d'écran samsung - Guide
Comment enlever une page sur word - Guide
Capture d'écran whatsapp - Accueil - Messagerie instantanée

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
3 sept. 2015 à 12:30

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.

chaima.abdouli Messages postés 94 Date d'inscription mercredi 17 juin 2015 Statut Membre Dernière intervention 3 septembre 2015 2
3 sept. 2015 à 12:49

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;

chaima.abdouli Messages postés 94 Date d'inscription mercredi 17 juin 2015 Statut Membre Dernière intervention 3 septembre 2015 2
3 sept. 2015 à 12:51

 .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>

Discussions similaires

Fond d'écran aléatoire : comment supprimer le diaporama d'image?

Problème fond d'ecran de verrouillage sur Xiaomi mi 8 lite

Impossible de changer mon fond d'écran

comment supprimer un fond d'écran

Fond d'écran rogné et zoomé