Carrousel pour mon homepage

Résolu

chaima.abdouli Messages postés 94 Date d'inscription Statut Membre Dernière intervention -
chaima.abdouli Messages postés 94 Date d'inscription Statut Membre Dernière intervention - 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>

Afficher la suite

A voir également:

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

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 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.

chaima.abdouli Messages postés 94 Date d'inscription Statut Membre Dernière intervention 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;

chaima.abdouli Messages postés 94 Date d'inscription Statut Membre Dernière intervention 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>

Discussions similaires

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

Fond d'écran carousel xiaomi

Fond d'écran à mon carousel

Votre réponse

Discussions similaires