[RÉSOLU] Problème configuration Carrousel (taille et durée)

[Laurent NODOVA]

Bonjour tout le monde,

Je viens vers vous car j'ai un petit soucis pour paramétrer le Carrousel (ou Image Slider) sur ma homepage.

Pour info, je suis sous Prestashop 1.7.1.2, et Carrousel est dans sa dernière version v2.1.1.

 

1) Premièrement, je n'arrive pas à paramétrer la durée d'affichage de mes slides. Les images de mon Carrousel défilent relativement vite, environ 4s (en tout cas trop vite pour correctement lire un texte si elles en affichent). Quand j'essaye de les configurer, quelque soit la durée que je met dans Prestashop (ex.: 20000ms), rien ne change.

J'ai essayé de jouer sur la durée dans les fichiers du module ("homeslider.js", pas osé trop toucher à "responsiveslides.min.js") mais pas de changement visible non plus.

 

2) Egalement, comme vous pouvez voir sur le premier screenshot, l'option "pause au survol" est activée. Mais elle ne marche pas du tout sur le site. J'imagine que c'est modifiable via la ligne 33 dans "homeslider.js", mais je ne suis pas sûr de ce qu'il faut changer.

 

3) Et enfin, là c'est plus cosmétique, je n'arrive pas à savoir où je peux paramétrer la largeur du Carrousel (pour être par exemple 80% de la largeur de la page, et non 100% comme actuellement). L'option n'est pas présente dans le module, et j'avoue ne pas trop savoir où le changer dans les fichiers css.

 

Si quelqu'un pouvait m'aider ce serait génial.

 

Merci beaucoup

 

Edited February 9, 2018 by Laurent NODOVA
problème résolu (see edit history)

[Ced17]

Bonjour, pouvez vous donner un lien vers votre site. Je regarderai tout à l'heure en rentrant. Merci

Cordialement

[Laurent NODOVA]

Bonsoir,

Bien sûr, notre site est: nodova.com

Merci beaucoup

[Ced17]

Ah et aussi si vous pouviez désactiver vos caches ainsi que le CCC merci.

[Ced17]

Bonsoir,

Normalement, il n'y a pas à toucher puisque on peut régler tout ce que vous demandez dans le BO. Si vous n'avez rien modifié, veuillez réinitialiser ou installer à la place le module que je vous met en pièce jointe.

ps_imageslider.zip

Ensuite, on va déjà modifier a 80% la taille de votre Slide comme ceci:

Ajouter à /themes/classic/assets/css/theme.css ceci:

@media (min-width: 768px) {
   .homeslider-container{
width: 80%;
margin: auto;}
}

Il faut ensuite modifier les flèches également, seulement à cause du cache je ne peux pas vous dire quel fichier modifier. Je vous le met quand même.

Sinon faites un clic droit sur une des flèches pour avoir le nom du fichier à modifier, et repérer les lignes suivantes.

@media print, screen and (min-width: 64em)
?.css:1
.homeslider-container .homeslider_nav.next {
    right: 10px; * Valeur à modifier *

@media print, screen and (min-width: 64em)
?.css:1
.homeslider-container .homeslider_nav.prev {
    left: 10px; * Valeur à modifier *
}

 

Edited February 8, 2018 by Ced17 (see edit history)

[Laurent NODOVA]

Ced17, juste... merci beaucoup 

Tu as réussi à me solutionner les 2 gros soucis que j'avais avec ce Carrousel (dimension et temps d'affichage/pause au survol).

Même en remplaçant mes fichiers par les tiens, rien ne changeait. Au final c'est en désactivant le cache et CCC sous Prestashop (comme tu me l'as ensuite suggéré) que tout s'est réglé.

Pour l'instant, je les ai laissé désactivé. Devrais-je les remettre maintenant que le soucis est corrigé?

 

Ensuite, la bannière est maintenant à 80% de la largeur de la page, c'est parfait.

Seulement, elle reste sur le côté gauche de la page, pas moyen de la centrer (c'est vrai que je n'avais pas précisé que je la souhaitait centrée).

Tu aurais une idée pour cela?

 

Merci encore beaucoup de ton aide en tout cas 

 

[Ced17]

Bonjour Laurent, 

Normalement, pour centrer le slider, c'est le margin :auto que je vous ai donné également, l'avez vous aussi écrit ?

Activer au moins le premier cache du haut et sélectionner système de fichier.

 

[Laurent NODOVA]

Oui, j'ai copy/past le bout de code que vous m'avez passé à la fin de theme.css tel quel

 

PS: j'ai activé le cache comme suggéré également

[Ced17]

Je ne suis pas de retour avant ce soir, si vous voulez vous pouvez toujours en affichant via la console chrome ou autre repérer le fichier à modifier. Sur votre site, clic-droit sur la partie blanche a droite de votre slider puis inspecter, vous allez avoir normalement .homeslider.container, sous chrome, à droite dans la console se trouve le CSS et les fichiers correspondant. Glisser votre souris sur la valeur donné ci-dessus, et rajouter donc le margin auto ici si ça ne fonctionne pas, je verrai ce soir, mais dans ce cas, désactiver tous les caches actifs pour que je puisse repérer les fichiers.

Sinon, votre slider fonctionne juste avec le cache du haut activé ou pas ?

Si oui reactiver les CCC pour voir si c'est ça la cause.

Bonne journée

[Laurent NODOVA]

Pas de soucis. J'ai donc fini par inspecter la page et ai trouvé d'où venait le soucis: le code css qui impacte le slider n'est pas dans theme.css, mais bien dans homeslider.css (/modules/ps_imageslider/css).

En fait, les lignes que vous m'avez fait changer dans theme.css n'ont aucun impacte. J'ai fini par les retirer et ai reproduit vos suggestions dans homeslider.css:

.homeslider-container {
  margin: auto;
  margin-bottom: 50px;
  position: relative;
  float: left;
  width: 80%;
}

(width passé de 100% à 80%, et margin:auto rajouté)

Et maintenant tout marche bien. Au final, c'est le cache et surtout CCC qui m'empêchait de correctement tester mes changements initiaux.

 

Merci beaucoup pour votre aide 

[Ced17]

Pas de soucis, pensez quand vous voulez des modifs à désactiver les caches, qui empêche de voir le fichier concerné. Je pensais que c'était thème.css erf dommage le principal est que vous avez ce que vous voulez.

Bonne continuation