Jump to content
Lactor

[ASTUCE]Modification du carousel[RESOLU]

Recommended Posts

Bonjour,

 

J'ai envie de modifier le module du homeslider, et mettre un carousel customisé à la place.

Suis-je obligée de passer par le développement d'un module, ou puis-je balancer mon code en modifiant les fichiers concernés ?

Ca a l'air bourrin, dit comme ça, mais j'ai déjà développé mon carousel, et je n'ai pas envie de le re-modifier pour en faire un module prestashop (du moins, pas pour le moment)... : |

Merci d'avance pour vos réponses !

 

 

Bonne soirée,

Okar

Edited by okar (see edit history)

Share this post


Link to post
Share on other sites

Bonjour,

Bien sur !

Il vous faut modifier le ou les tpl des pages concernées :)

Share this post


Link to post
Share on other sites

Bonjour 2FR3,

 

En effet, c'est ce que j'ai fini par faire.

J'ai repris le template du slider, ainsi que son css et js associé, et j'ai modifié directement dedans. En farfouillant, j'ai trouvé aussi des petites choses plutôt sympathiques.

Par exemple, sur le slider je voulais rajouter des flèches de défilement, je pensais qu'elles n'existaient pas, et en fait, il y avait une ligne de js à changer (si je peux me permettre de donner l'astuce, si d'autres personnes veulent customiser leur slider) :

 changer controls : false; à true. Et ensuite changer le css associé aux controls, parce de base, elles apparaissent en bas à gauche et collées.

[EDIT] en passant à true on les affiche, donc si on veut les enlever, il suffit simplement de passer à false. Après, pour gérer leur position, leur couleur et tout, c'est au niveu du css (les class sont nommées ainsi :

.bx-prev et .bx-next pour les flèches, et pour changer le tout, ce sont les class nommées .bx-controls-* (* = d'autres class, auto, direction, ...).

[/EDIT]

Dois-je marquer le topic en résolu, ou puis-je mettre [astuce] ?

 

Bonne journée,

 

Okar

Edited by okar (see edit history)

Share this post


Link to post
Share on other sites

Vous pouvez mettre les deux :)

Ceci dit, pour une astuce, je vous recommande de donner les sources aux membres :)

Share this post


Link to post
Share on other sites

Bah, les sources, c'est un truc que j'ai trouvé par moi-même, donc ça va être compliqué ^^' Je veux bien copier des bouts de code, mais c'est tout ce que j'aurai en source.

if (!!$.prototype.bxSlider)
		$('#homeslider').bxSlider({
			mode:'fade',
			useCSS: false,
			maxSlides: 1,
			slideWidth: homeslider_width,
			infiniteLoop: homeslider_loop,
			hideControlOnEnd: true,
			pager: true,
			autoHover: true,
			auto: homeslider_loop,
			speed: 1000,
			pause: homeslider_pause,
			controls: true
		});

Dans themes/montheme/js/modules/homeslider/js/homeslider.js, à la ligne 52, controls indique si les flèches de navigation sont activées (true) ou désactivées (false). Il suffit de changer ce paramètre pour faire apparaître ou disparaître les lfèches.

Pour pouvoir modifier par la suite la "beauté" de ces flèches, il faut se rendre dans themes/montheme/css/modules/homeslider/homeslider.css (les noms de fichiers sont explicites, c'est cool) :

#homepage-slider .bx-wrapper .bx-prev {
  left: -95px; }
  #homepage-slider .bx-wrapper .bx-prev:after {
    content: "\f053"; }
#homepage-slider .bx-wrapper .bx-next {
  right: -95px; }
  #homepage-slider .bx-wrapper .bx-next:after {
    content: "\f054"; }
#homepage-slider .bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 270px;
  outline: 0;
  width: 70px;
  height: 70px;
  text-indent: -9999px;
  z-index: 9999;
  /*border: 2px solid grey; */
  border-radius : 15px;}
  #homepage-slider .bx-wrapper .bx-controls-direction a:before {
    height: 70px;
    width: 70px;
    display: block;
    background: #660083;
	/* border: 2px solid grey; */
  border-radius : 15px;
    content: ".";
    opacity: 0.14;
	    color: #660083;
    text-indent: -9999px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1; }
  #homepage-slider .bx-wrapper .bx-controls-direction a:after {
    display: block;
    width: 70px;
    height: 70px;
    color: #660083;
	  /*border: 2px solid grey; */
  border-radius : 15px;
    text-indent: 0;
    text-align: center;
    font-size: 30px;
    font-family: "FontAwesome";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 25px; }
  #homepage-slider .bx-wrapper .bx-controls-direction a:hover:before {
    background: #660083;
	color : #fff;
    opacity: 0.83; }
#homepage-slider .bx-wrapper .bx-controls-direction a.disabled {
  display: none; }
#homepage-slider .bx-wrapper .bx-controls-auto {
  text-align: center; }
#homepage-slider .bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url(images/controls.png) -86px -11px no-repeat;
  margin: 0 3px; }
#homepage-slider .bx-wrapper .bx-controls-auto .bx-start:hover,
#homepage-slider .bx-wrapper .bx-controls-auto .bx-start.active {
  background-position: -86px 0; }
#homepage-slider .bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url(images/controls.png) -86px -44px no-repeat;
  margin: 0 3px; }
#homepage-slider .bx-wrapper .bx-controls-auto .bx-stop:hover,
#homepage-slider .bx-wrapper .bx-controls-auto .bx-stop.active {
  background-position: -86px -33px; }
#homepage-slider .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%; }
#homepage-slider .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px; }

à partir de la ligne 133 on peut modifier l'apparence des flèches. Le code ci dessus est un code que j'ai modifié (couleur, taille, position).
Voilà pour l'astuce !

[EDIT] DAns themes/montheme/css/modules/homeslider/ il y a aussi un dossier images, qui contient les images de fond des flèches et du "loading". Vous pouvez les changer à votre gré, si vous ne changez pas les noms (sinon, le js et le css ne détecteront plus les fichiers, à moins d'aller faire uen manip' en plus, changer les noms des fichiers aux bons endroits ^^ ) [/EDIT]
En espérant que ça puisse aider quelqu'un d'autre (:

 

Okar

Edited by okar (see edit history)

Share this post


Link to post
Share on other sites

Ou est-ce que je peut trouver le bouton du home slider? j'aimerais changer just sur l'une de mes images au lieu de acheter maintenant je veut mettre jouer maintenant 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

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