Code javascript et Slider

[Nordidi13]

Bonsoir,

MAJ : 1.6.1.13

Website: wow-berry.fr

 

Je souhaiterais simplement transformer mes 3 blocs col-sm-4, en petit slider de mes 3 blocs version mobile ( que je transforme donc en col-xs-12 )

Tout le code fonctionne parfaitement, mise à part le code javascript ou je me retrouve face à 2 possibilités, le code est mal inséré.

Je l'ai mis directement dans le header.tpl et la alors, une erreur le site devient inaccessible. Ensuite directement dans l'editeur de page d'accueil de cette manière :

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

puis également dans le global.js et pas de réponse non plus.

La 2eme solution est que mon code soit mauvais, je vais donc vous fournir le code html/css/JS : 

 

<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="défi foodsrping forward" alt="Défi 30 jours foodspring forward" /></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>
<button tabindex="0">Lire la suite</button></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="défi foodsrping forward" alt="Défi 30 jours foodspring forward" /></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>
<button tabindex="0">Lire la suite</button></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="défi foodsrping forward" alt="Défi 30 jours foodspring forward" /></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>
<button tabindex="0">Lire la suite</button></div>
</article>
</div>
</div>
</div>

CSS : 

.box-slide, .box-slide2 {
	overflow: hidden;
}
.box-slide {
	position: relative;
	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: 450px;
	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
}

.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: 450px;
    text-align: center;

    justify-content: center;
}}

@media (max-width: 766px) {
	.shadw {

	width: 2500px;
}}
.img-wrapper {
	overflow: hidden;
}

JS : 

 

$(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"});
}
}

Merci d'avance pour votre aide !