Créer un slide show contrôlable

Version imprimable

Bonjour à tous,

Utilisateur de prestashop

version 1.6.1.13

Siteweb : wow-berry.fr

Suite à des 10aines d'essaies, il me reste impossible de transformer mon bloc en slider.

Lorsque je passe en mobile mes blocs qui sont en col-lg-4 se mettent en col-xs-12.

Et je souhaiterais que lorsque l'on clique sur la flèche de droite, les bloc fasse un marginleft de - 340px et quand on clique sur la flèche de gauche, un margin left de 350px.

voici mon code actuel qui ne fonctionne pas ..
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script> $(document).ready(function() { slider.init(); }); slider = { init: function() { slider.elem = $("#shadw"); slider.nbSlide = slider.elem.find("article").lenght; slider.current = 0; $("fleche_droite").click(function() { slider.next(); }); }, next: function() { slider.current++; slider.elem.animate({ marginLeft: -slider.current * 420 + "px" }); } } ></script>
Merci d'avance pour votre aide !

Suite du code

Je vous laisse ici mon code HTML et CSS :)

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
<div class="box-slide" id="boxslide">
<div id="fleche_droite"><img src="https://wow-berry.fr/img/rightarrow.svg" /></div>
<div id="fleche_gauche"><img src="https://wow-berry.fr/img/leftarrow.svg" /></div>
<div class="box-slide2">
<div class="shadw">
<article class="artimgtxt col-xs-12 col-sm-4" aria-hidden="false" tabindex="0">
<div class="img-wrapper"><img src="/img/mangersainement4.jpg" class="img-wrapp" title="Expérience" alt="Une expérience gustative" /></div>
<div class="txt-wrapper">
<h3>Vivre une expérience gustative</h3>
<p><strong>Réaliser une expérience ludique.</strong> Comment animer vos dîners, soirées et réceptions avec une dégustation stupéfiante de fruits, boissons et desserts.</p>
<a href="https://www.wow-berry.fr/baie-du-miracle/17-baie-du-miracle.html"><button tabindex="0">Lire la suite</button></a></div>
</article>
<article class="artimgtxt col-xs-12 col-sm-4" aria-hidden="false" tabindex="0">
<div class="img-wrapper"><img src="/img/mangermieu.jpg" class="img-wrapp" title="Manger mieux" alt="Manger mieux" /></div>
<div class="txt-wrapper">
<h3>Manger sainement</h3>
<p><strong>Manger mieux pour mieux vivre.</strong> Dire adieu aux sucres ajoutés, aux édulcorants et à l'impression de mal s'alimenter.</p>
<a href="https://www.wow-berry.fr/baie-du-miracle/17-baie-du-miracle.html"><button tabindex="0">Lire la suite</button></a></div>
</article>
<article class="artimgtxt col-xs-12 col-sm-4" aria-hidden="false" tabindex="0">
<div class="img-wrapper"><img src="/img/adoucir.jpg" class="img-wrapp" title="Adoucir" alt="Adoucir les aliments" /></div>
<div class="txt-wrapper">
<h3>Adoucir le goût de vos aliments</h3>
<p><strong>Retrouver la saveur des aliments.</strong> DIfférencier les goûts, se passer des traitements médicamenteux et reprendre du plaisir.</p>
<a href="https://www.wow-berry.fr/baie-du-miracle/17-baie-du-miracle.html"><button tabindex="0">Lire la suite</button></a></div>
</article>
</div>
</div>

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
.box-slide, .box-slide2 {
	overflow: hidden;
}
.box-slide {
	position: relative;
	max-width: 1700px;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media ( max-width: 766px){
.box-slide {
	width: 100%
}}
@media ( min-width: 1100px){
.box-slide2 {
	width: 90%
}}
 
 
 
 
@media ( max-width: 766px) {
.box-slide2 {
	width: 340px;
	float: left;
}}
 
@media ( max-width: 766px){
.box-slide2>* {
	float: left;
}}
 
#fleche_droite {
	background: url("https://wow-berry.fr/img/rightarrow.svg");
	position: absolute;
	right: 0;
	height: 40px;
	top:50%;
	width: 40px;
	z-index: 9;
	float: right;
}
 
#fleche_gauche {
	background: url("../../../img/leftarrow.svg") no-repeat left;
	position: absolute;
	float: left;
	left: 0;
	top: 50%;
	height: 40px;
	width: 40px
}
#fleche_droite img {
	height: 40px;
	width: 40px;
}
 
#fleche_gauche img {
	height: 40px;
	width: 40px
}
 
@media (min-width: 767px) {
	#fleche_gauche, #fleche_droite {
		display: none;
	}
}
 
.artimgtxt {
	padding-left: 8px;
	padding-right: 8px;
	margin-bottom: 16px;
	display: block;
	float: left;
	height: 100%;
	min-height: 1px
}
 
 
@media (max-width: 766px) {
.artimgtxt {
	max-width: 340px;
    text-align: center;
}}
 
@media (max-width: 766px) {
	.shadw {
	width: 2500px;
}}
.img-wrapper {
	overflow: hidden;
}
.img-wrapp {
	width: 100%;
    max-height: 245px;
    height: auto;
    display: block
}

Merci beaucoup

15/10/2019, 11h51
NoSmoking

Bonjour,
c'est quoi ce > qui traine en fin de code ?

Merci

Bonjour j'ai actualisé le code à l'instant, quelques erreurs de syntaxe, malheureusement maintenant le slider ne s'arrête jamais vers la gauche ou la droite, je souhaiterais que, arrivé à la 3eme slide, il reparte a 0.. et que a la slide = 0 on ne puisse pas retourner en arrière...
Merci et voici le code :

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
<script>
$(document).ready(function() {
    slider.init();
});
slider = {
    init: function() {
        slider.elem = $("#shadw");
        slider.nbSlide = slider.elem.find("article").lenght;
        slider.current = 0;
        $("#fleche_droite").click(function() {
            slider.next();
        });
        $("#fleche_gauche").click(function() {
            slider.prev();
        });
 
    },
    next: function() {
        slider.current++;
        slider.elem.animate({
            marginLeft: -slider.current*340 + "px"
        });
       },
        prev: function() {
        slider.current--;
 
        slider.elem.animate({
            marginLeft: -slider.current*340 + "px"
        });
    }
}
</script>

15/10/2019, 18h18
NoSmoking
Il me semble qu'il y ait des erreurs dans ton code !
• Point #1

Code:

slider.elem = $("#shadw"); // ici c'est une ID

alors que tu as dans le code HTML

Code:

<div class="shadw"> 

• Point #2

Code:

slider.elem.find("article").lenght;

ne s'agirait-il pas plutôt de

Code:

slider.elem.find("article").length;

• Point #3

Citation:

arrivé à la 3eme slide, il reparte a 0

Il te suffit de faire un test sur slider.current.
Code:

1 2 3 4 slider.current++; if (slider.current == slider.nbSlide) { slider.current = 0; }
• Point #4

Citation:

la slide = 0 on ne puisse pas retourner en arrière

Il te suffit de faire un test sur slider.current.
Code:

1 2 3 if (slider.current > 0) { slider.current--; }
• Point #5
Il te faut également prévoir une fonction de reset pour le retour à la normale de la largeur de l'écran qu'il faut appeler sur le resize du document.
Code:

1 2 3 4 5 reset: function() { slider.elem.css({ marginLeft: 0 }); },
Je pense avoir fait le tour !
15/10/2019, 18h38
nordidi

Un grand merci à toi, simple et efficace