Création d'un slideshow comportement différent avec UI
Bonjour a tous,
Tout d'abord merci de l'intérêt que vous porter a mon sujet.
Je vais essayer d'être le plus clair possible dans le cas contraire merci de me le faire savoir.
J'essaye donc de réaliser un slideshow avec mes petites mains, oui je sais qu'il en existe déjà de tout fait.
J'ai donc un code fonctionnel qui fonctionne grâce a des "fadeIn" "fadeOut".
Mais des que je les remplace par des "show('bounce')" ou "hide('bounce')", mon code se met a faire n'importe quoi je ne passe plus dans les condition de mon if
Code:
if(!$("li.zsl_active").is(":last-child"))
Et donc cela met le bazar, le plus parlant je pense est de vous mettre mon code.
Voici le html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div class="zsl_wrapper">
<div class="zsl_icon_prev"><i class="fa fa-chevron-circle-left"></i></div>
<div class="zsl_icon_next"><i class="fa fa-chevron-circle-right"></i></div>
<ul>
<li class="zsl_imgSLide"><img src="./images/chaz.jpg" alt="" width="200" height="200" /></li>
<li class="zsl_imgSLide"><img src="./images/dave.jpg" alt="" width="200" height="200" /></li>
<li class="zsl_imgSLide"><img src="./images/elcholo.jpg" alt="" width="200" height="200" /></li>
<li class="zsl_imgSLide"><img src="./images/fred.jpg" alt="" width="200" height="200" /></li>
<li class="zsl_imgSLide"><img src="./images/mack.jpg" alt="" width="200" height="200" /></li>
<li class="zsl_imgSLide"><img src="./images/mike.jpg" alt="" width="200" height="200" /></li>
<li class="zsl_imgSLide"><img src="./images/ivy.jpg" alt="" width="200" height="200" /></li>
<li class="zsl_imgSLide"><img src="./images/nick.jpg" alt="" width="200" height="200" /></li>
</ul>
</div>
<input type="hidden" id="etatSlide" value="true"> |
Voici mon JS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| $(document).ready(function(){
var dataForm = '';
$.ajax({
type: "POST",
processData: true,
url: 'zsl_conf.php',
data: dataForm,
dataType: 'json'
})
.done(function( Data ) {
zsl_diaporama(Data);
})
.fail(function(Data) {
console.log("erreur load config ");
});
});
function zsl_diaporama(Init){
$("li").first().show();
$("li").first().addClass("zsl_active");
if(Init.timer == true){
setInterval(function() {
console.log('je boucle');
if($('#etatSlide').val() == 'true'){
zsl_next();
}
}
, Init.delay);
}
function zsl_prev(){
$("li.zsl_active").fadeOut(Init.animationSpeed);
//$("li.zsl_active").hide();
//$("li.zsl_active").hide('explode',Init.animationSpeed);
if(!$("li.zsl_active").is(":first-child")){
$("li.zsl_active").removeClass("zsl_active").prev().addClass("zsl_active");
$("li.zsl_active").fadeIn(Init.animationSpeed);
//$("li.zsl_active").show();
//$("li.zsl_active").show('explode',Init.animationSpeed);
}
else{
$("li:last-child").addClass("zsl_active").fadeIn(Init.animationSpeed);
$("li:first-child").removeClass("zsl_active");
}
}
function zsl_next(){
console.log('next ->');
//$("li.zsl_active").fadeOut(Init.animationSpeed);
$("li.zsl_active").hide('bounce');
if(!$("li.zsl_active").is(":last-child")){
console.log('pas le dernier enfant');
$("li.zsl_active").removeClass("zsl_active").next().addClass("zsl_active");
//$("li.zsl_active").fadeIn(Init.animationSpeed);
$("li.zsl_active").show('bounce');
}
else{
console.log('dernier enfant');
//$("li:first-child").addClass("zsl_active").fadeIn(Init.animationSpeed);
$("li:first-child").addClass("zsl_active");
$("li:last-child").removeClass("zsl_active");
//$("li.zsl_active").fadeIn(Init.animationSpeed);
$("li.zsl_active").show('bounce');
}
}
$('.zsl_icon_prev').on('click',function(){
//console.log('preview');
zsl_prev();
});
$('.zsl_icon_next').on('click',function(){
//console.log('next');
zsl_next();
});
}
$('.zsl_wrapper').hover(function(){
//console.log('souris entre');
$('#etatSlide').val('false');
$('.zsl_icon_next').show();
$('.zsl_icon_prev').show();
},function(){
//console.log('souris sort');
$('#etatSlide').val('true');
$('.zsl_icon_next').hide();
$('.zsl_icon_prev').hide();
}); |
Et voici le tableau de paramètre que je récupère en Ajax :
Code:
1
2
3
4
5
6
7
8
| <?php
$init = array(
"animationSpeed" => "slow"
,"delay" => 2000
,'timer' => false
);
echo json_encode($init);
?> |
Voila pour faire une synthèse d'utilisation, je recupère en ajax mon tableau de paramètre
puis je lance un "setInterval" qui appel la fonction zsl_next().
lorsque le curseur rentre dans la div je bloque le timer, et j'affiche les bouton pour faire suivant précédant a la main.
Je voulais rajouter une option dans mon tableau de paramètre pour permettre de choisir son effet et des que je rajout un effet (a la main).
Tout plante.
Voila j'espère avoir été clair.
Je vous remercie par avance pour vos lumières.
