Sujet Précédent Sujet Suivant

Jquery : slide effect

Résolu/Fermé
tete0148 Messages postés 413 Date d'inscription mercredi 19 décembre 2012 Statut Membre Dernière intervention 15 juin 2017 - 11 mai 2013 à 15:38
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 12 mai 2013 à 18:26
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

Réponse 1 / 2
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 11/05/2013 à 16:02
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
tete0148 Messages postés 413 Date d'inscription mercredi 19 décembre 2012 Statut Membre Dernière intervention 15 juin 2017 89
11 mai 2013 à 16:12
Et ça marche si je remplace les images par des div
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
11 mai 2013 à 22:49
Et si tu testais ? xD
0
tete0148 Messages postés 413 Date d'inscription mercredi 19 décembre 2012 Statut Membre Dernière intervention 15 juin 2017 89
12 mai 2013 à 08:50
Pas bête
0
tete0148 Messages postés 413 Date d'inscription mercredi 19 décembre 2012 Statut Membre Dernière intervention 15 juin 2017 89
12 mai 2013 à 09:04
ça marche mais je vois tous les contenus des div dans la premiere et les autres sont vides. Mais le slide fonctionne
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 mai 2013 à 10:16
Tu peux me montrer ton code actuel ?
0
Réponse 2 / 2
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 mai 2013 à 12:09
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>
0
tete0148 Messages postés 413 Date d'inscription mercredi 19 décembre 2012 Statut Membre Dernière intervention 15 juin 2017 89
12 mai 2013 à 18:18
ok merci de ton aide, on peut mettre autant de div qu' on veut ?
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 mai 2013 à 18:26
Vui!
0

Discussions similaires

jquery: refresh element enfant après ajax
snipchain -
snipchain -

2 réponses
jQuery & Regex
ameb2908 -
Whismeril -

3 réponses
Redirection Jquery onclick
Vitaly58 -
Vitaly58 -

4 réponses
Refresh div
Utilisateur anonyme -
Utilisateur anonyme -

11 réponses
A quoi sert jquery.min.map?
le_joker_fou -
le_joker_fou -

4 réponses