gros blocage javascript

[Nordidi13]

Bonjour à tous,

 

version 1.6.1.13

Siteweb : wow-berry.fr

Suite à des 10aines d'essaies et 2 post sur ce forum, 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 - 350px et quand on clique sur la flèche de gauche, un margin left de 350px.7

CODE HTML : 

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

 

.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
}

Pour le code javascript, après plusieurs essaie, rien ne fonctionne. merci d'avance !!

 

 

[Nordidi13]

Voila le code JavaScript que je tente d'insérer, il y a les CDATA car je l'insère directement dans l'éditeur de page d'accueil, lorsque je met se code dans le header, le site plante, et dans le global.js aucune réponse ne met renvoyer... je ne comprend plus ...

<script>// <![CDATA[
$(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>

 

[Nordidi13]

petit up