Jquery : slide effect

Résolu/Fermé
Signaler
Messages postés
411
Date d'inscription
mercredi 19 décembre 2012
Statut
Membre
Dernière intervention
15 juin 2017
-
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
-
Bonjour, je souhaiterais savoir comment faire un effet de slide ou de déroulement pour des div.
Je voudrais qu' elle puissent glisser de la gauche vers la droite, comme un diaporama.

2 réponses

Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
430
Hello,

Voici un exemple, il suffit de cliquer sur l'image pour lancer le défilement:

<html> 
 <head> 
  <title></title> 
  <style type="text/css"> 
   .global{ 
    padding: 10px; 
    background-color: #ccc; 
    border-radius: 20px; 
    margin:0 auto; 
    width: 600px; 
    height:400px; 
    overflow: hidden; 
    margin-top: 100px; 
   } 
   .container{ 
    overflow: hidden; 
    width: 999999px; 
   } 
   img{ 
    cursor: pointer; 
   } 
  </style> 
 </head> 
 <body> 
  <div class="global"> 
   <div class="container"> 
    <img src="http://placehold.it/600x400"/> 
    <img src="http://placehold.it/600x400"/> 
    <img src="http://placehold.it/600x400"/> 
    <img src="http://placehold.it/600x400"/> 
   </div> 
  </div> 
 </body> 
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 <script type="text/javascript"> 
  var slider = { 
   imgWidth: 600, 
   currentImg:0, 
   nbPicts: 0, 
   _initialize: function(){ 
    this.nbPicts = $('img').length; 
    this.listeners(); 
    return this; 
   }, 
   listeners: function(){ 
    var me = this; 
    $('img').click(me.move); 
   }, 
   move: function(){ 
    var me = sliderInstance; 
    if(me.currentImg + 1 < me.nbPicts){ 
     $('.container').animate({'margin-left': - (me.imgWidth * (me.currentImg + 1))}, 1000); 
     me.currentImg++; 
    }else{ 
     $('.container').animate({'margin-left': 0}, 1000); 
     me.currentImg = 0; 
    } 
   } 
  } 
  var sliderInstance = slider._initialize(); 
 </script> 
</html> 
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41989 internautes nous ont dit merci ce mois-ci

Messages postés
411
Date d'inscription
mercredi 19 décembre 2012
Statut
Membre
Dernière intervention
15 juin 2017
88
Pas bête
Messages postés
411
Date d'inscription
mercredi 19 décembre 2012
Statut
Membre
Dernière intervention
15 juin 2017
88
ça marche mais je vois tous les contenus des div dans la premiere et les autres sont vides. Mais le slide fonctionne
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
430
Tu peux me montrer ton code actuel ?
Messages postés
411
Date d'inscription
mercredi 19 décembre 2012
Statut
Membre
Dernière intervention
15 juin 2017
88
j' ai juste remplacer les img par des div et j' ai remplacer le truc ou tu prend le nombre d' images, j' ai mis a la place de img : div.slide ( celles qui ont un id 'slide")
Messages postés
411
Date d'inscription
mercredi 19 décembre 2012
Statut
Membre
Dernière intervention
15 juin 2017
88
<html>
<head>
<title></title>
<style type="text/css">
.global{
padding: 10px;
background-color: #ccc;
border-radius: 20px;
margin:0 auto;
width: 600px;
height:400px;
overflow: hidden;
margin-top: 100px;
}
.container{
overflow: hidden;
width: 999999px;
}
img{
cursor: pointer;
}
</style>
</head>
<body>
<div class="global">
<div class="container">
<div class="slide">a</div>
<div class="slide">b</div>
<div class="slide">c</div>
<div class="slide">d</div>
</div>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var slider = {
imgWidth: 600,
currentImg:0,
nbPicts: 0,
_initialize: function(){
this.nbDiv = $('div.slide').length;
this.listeners();
return this;
},
listeners: function(){
var me = this;
$('div.slide').click(me.move);
},
move: function(){
var me = sliderInstance;
if(me.currentImg + 1 < me.nbDiv){
$('.container').animate({'margin-left': - (me.imgWidth * (me.currentImg + 1))}, 1000);
me.currentImg++;
}else{
$('.container').animate({'margin-left': 0}, 1000);
me.currentImg = 0;
}
}
}
var sliderInstance = slider._initialize();
</script>
</html>
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
430
Voila avec des divs:

<html> 
<head> 
<title></title> 
<style type="text/css"> 
.global{ 
padding: 10px; 
background-color: #aaa; 
border-radius: 20px; 
margin:0 auto; 
width: 600px; 
height:400px; 
overflow: hidden; 
margin-top: 100px; 
} 
.container{ 
overflow: hidden; 
width: 999999px; 
height: 400px;
} 
.slide{ 
	cursor: pointer; 
	width: 580px;
	padding: 10px;
	height: 380px;
	float: left;
	margin-right:20px;
	text-align: justify;
} 
img{
	float: left;
	margin-right: 10px;
}
</style> 
</head> 
<body> 
<div class="global"> 
<div class="container"> 
<div class="slide">
	<p><img src="http://placehold.it/150x300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non enim lorem, ac imperdiet turpis. Donec malesuada tortor sit amet tellus malesuada quis porta enim luctus. Nulla consequat ornare lorem, in sodales tellus accumsan ut. Maecenas euismod feugiat mi, sed facilisis quam venenatis id. Nam nunc metus, malesuada nec ultricies ut, viverra et diam. Aliquam turpis risus, laoreet ac lacinia ut, ultricies non odio. Integer et ligula eu felis mattis facilisis. Sed rutrum pharetra ligula, a sagittis nunc volutpat porttitor. In vestibulum congue leo in ultrices. Pellentesque rhoncus aliquam dui, vel pharetra odio sollicitudin id. Quisque lacus sem, venenatis sit amet commodo vel, dictum nec diam. Mauris vel ante ligula, vitae ultrices lorem.</p>

	<p>Mauris auctor leo congue erat cursus vel laoreet diam venenatis. Integer non nisl eros. Proin lacinia iaculis mauris. Phasellus at sapien felis. Mauris tincidunt magna sed massa hendrerit condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec luctus dolor eget justo ultrices in imperdiet turpis rutrum. Fusce et lectus mi.</p>
</div> 
<div class="slide">b</div> 
<div class="slide">c</div> 
<div class="slide">d</div> 
</div> 
</div> 
</body> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript"> 
var slider = { 
imgWidth: 620, 
currentImg:0, 
nbPicts: 0, 
_initialize: function(){ 
this.nbDiv = $('.slide').length; 
this.listeners(); 
return this; 
}, 
listeners: function(){ 
var me = this; 
$('div.slide').click(me.move); 
}, 
move: function(){ 
var me = sliderInstance; 
if(me.currentImg + 1 < me.nbDiv){ 
$('.container').animate({'margin-left': - (me.imgWidth * (me.currentImg + 1))}, 1000); 
me.currentImg++; 
}else{ 
$('.container').animate({'margin-left': 0}, 1000); 
me.currentImg = 0; 
} 
} 
} 
var sliderInstance = slider._initialize(); 
</script> 
</html>
Messages postés
411
Date d'inscription
mercredi 19 décembre 2012
Statut
Membre
Dernière intervention
15 juin 2017
88
ok merci de ton aide, on peut mettre autant de div qu' on veut ?
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
430
Vui!