<DIV ECOM>

Formation | assistance | analyse de site web via DrTech

Espace formation

<DIV ECOM>

Formation | assistance | analyse de site web via DrTech

Espace formation

Créer un slider image pour les pages produits

Vous voulez créer un slider pour les images produits ? Que vous soyez sur WooCommerce ou Dr Tech, vous êtes au bon endroit ! 

Ne cherchez pas plus loin, aujourd’hui nous allons apprendre à modifier cette présentation : 

Pour créer ce type de slider :

Retrouvez tous les codes nécessaires juste en dessous de la vidéo ! Bon cours 📖💻

CODE

<style>
.flex-control-thumbs{
width:66%;
margin: auto !important;
margin-top:20px !important;
z-index:500;
}
#buttonright{
position : absolute;
right:0;
transform:rotate(270deg)
}
#buttonleft{
position : absolute;
transform:rotate(90deg);
margin-left:1px;
}

.flex-control-nav li{
border: 1px #bcbcbc solid;
}

</style>

<script>
jQuery(window).load(function(){
var nbphotos = jQuery("li").find("img").length;
var photosHeight = jQuery("li").find("img").height();
var photosWidth = jQuery('.flex-control-nav li').width();
jQuery('.flex-control-nav').css({height: photosHeight+5});
jQuery('.flex-control-nav').css('overflow','hidden');

var paddingtop = parseInt(jQuery('.woocommerce div.product div.images.woocommerce-product-gallery').css('margin-bottom'))+(photosHeight)+4;
var paddingimg = parseInt(jQuery('.flex-control-nav li').css('margin-left'))+parseInt(jQuery('.flex-control-nav li').css('margin-right'));

jQuery('#buttonleft').css('margin-top','-'+ paddingtop+'px');
jQuery('#buttonright').css('margin-top','-'+ paddingtop+'px');
jQuery('#buttonright').width(photosWidth).height(photosHeight);
jQuery('#buttonleft').width(photosWidth).height(photosHeight);
jQuery('#buttonleft').css('margin-right',4*photosWidth+4*paddingimg+'px');

if(nbphotos>4){
jQuery("#buttonleft").click(function() {
event.preventDefault();
jQuery('.flex-control-nav').animate({left: + photosWidth}, 0, function () {
jQuery('.flex-control-nav li:last-child').prependTo('.flex-control-nav');
jQuery('.flex-control-nav').css('left', '');
});
});

jQuery("#buttonright").click(function() {
event.preventDefault();
jQuery('.flex-control-nav').animate({left: - photosWidth}, 0, function () {
jQuery('.flex-control-nav li:first-child').appendTo('.flex-control-nav');
jQuery('.flex-control-nav').css('left', '');
});
});
}
});
</script>

FELICITATION !

Si vous avez besoin de service ou la moindre question, n’hésitez pas à me contacter.

Suivez-moi sur Youtube pour plus de tutoriels :