Discussion :

[nordidi]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[nordidi]

Je vous laisse ici mon code HTML et CSS

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

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

[nordidi]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[NoSmoking]

Il me semble qu'il y ait des erreurs dans ton code !
• Point #1

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

alors que tu as dans le code HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="shadw">  <!-- ici c'est une classe -->

• Point #2

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ne s'agirait-il pas plutôt de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

• Point #3

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

• Point #4

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
reset: function() {
    slider.elem.css({
        marginLeft: 0
    });
},

Je pense avoir fait le tour !

[nordidi]

Un grand merci à toi, simple et efficace