Comment customiser le carousel par défaut ?

Une fois votre carousel correctement inséré dans votre page vous pouvez évidemment le customiser pour qu'il corresponde au mieux au design de votre boutique. Pour cela, connectez-vous à votre interface d'administration, sélectionnez l'onglet "aspect" puis "Style CSS". Ajoutez à vos styles le code exemple suivant que vous adapterez en fonction de vos besoins :

div.jMyCarousel{
	border:2px solid #000;
	margin:20px 45px 5px 0px;
	padding-bottom:25px;
	background: #333;
	display:block;		
}

Comment aller plus loin dans la customisation ?

Pour ceux vraiment à l'aise avec le langage CSS, voici le style complet du carousel par défaut. Vous pouvez surcharger ces styles pour créer vos propres styles.

/*Bouton previous*/
div.jMyCarousel .prev{
	background: url('images/left.png') center center no-repeat;
	width:47px;
	height:61px;
	border:0px;
}

/*Bouton next*/
div.jMyCarousel .next{
	background: url('images/right.png') center center no-repeat;
	width:40px;
	height:61px;
	border:0px;
}

/*Bouton up, cas d'un carousel vertical*/
div.jMyCarousel .up{
	background: url('images/up.png') center center no-repeat;
	width:61px;
	height:40px;
	border:0px;
}

/*Bouton down, cas d'un carousel vertical*/
div.jMyCarousel .down{
	background: url('images/down.png') center center no-repeat;
	width:47px;
	height:61px;
	border:0px;
}

div.reflection ul li{
	margin:0px;	
	line-height:0px;
	padding-bottom: 50px;
}


div.jMyCarousel ul li{
	margin:0px;	
	line-height:0px;
	padding-bottom: 50px;
}

div.jMyCarousel ul li a{ /* in case of link */
	display:block;
}


div.jMyCarousel ul li img{
	display:block;
	height : 85px;
	width : 85px;
	border:0px;	
}

div.jMyCarousel ul li img:hover{
	cursor:pointer;
}

Si vous avez des problèmes pour customiser votre carousel, vous trouverez de l'aide sur le forum. Vous pouvez également contacter notre support technique.