Jump to content

Recommended Posts

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

 

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More