Fork me on GitHub






Slider xbootstrap
Team FrXoops
Inscrit: 14/05/2004 22:32
Messages: 2554
Bonjour,
J'utilise le thème xbootstrap, et je souhaiterais modifier le temps d'affichage des images du bandeau.
Ou pourrais-je trouver ou modifier ce paramètre ?
JJDai

Posté le : 29/03/2020 10:59

Ne pas perdre patience, même si cela semble impossible, c'est déjà de la patience.
Origami
Conseil des Sages
Sur gitHub
Partager Twitter Partagez cette article sur GG+
Re: Slider xbootstrap
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
Salut, c'est basé sur bootstrap (https://getbootstrap.com/docs/4.3/components/carousel/)
(version B3 pour xbootstrap).

la doc est ici :
en v4 :https://getbootstrap.com/docs/4.3/components/carousel/

en V3 : https://getbootstrap.com/docs/3.4/javascript/#carousel



<div class="carousel-item" data-interval="2000">
      <
img src="..." class="d-block w-100" alt="...">
    </
div>


C'est le paramètre data-interval="2000" (en ms)

Posté le : 29/03/2020 11:06

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: Slider xbootstrap
Team FrXoops
Inscrit: 14/05/2004 22:32
Messages: 2554
Il n'y a pas ça dans le thème que j'utilise, je l'aurais vu de suite quand j'ai modifier les images.
Mais je vais l'ajouter pour voir.
JJDai

Posté le : 29/03/2020 11:51

Ne pas perdre patience, même si cela semble impossible, c'est déjà de la patience.
Origami
Conseil des Sages
Sur gitHub
Partager Twitter Partagez cette article sur GG+
Re: Slider xbootstrap
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
Effectivement, après un coup d’œil, ce thème utilise un slide externe à bootstrap, il s'agit de OwlCarousel.

Il utilise /themes/xbootstrap/js/owl/
et il est défini dans le fichier /themes/xbootstrap/tpl/slider.tpl

En regardant les fichiers css de owl,
j'ai peut-être une solution :
Tu ajoutes ceci à xoops.css dans ce thème :
Autoplay.Defaults = {
        
autoplayfalse,
        
autoplayTimeout5000,
        
autoplayHoverPausefalse,
        
autoplaySpeedfalse
    
};
et tu changes autoplayTimout (ici c'est 5s)
C'est bon parce que dans le fichier theme.tpl,
on a
<link href="<{xoImgUrl}>js/owl/assets/owl.carousel.css" rel="stylesheet">
    <
link href="<{xoImgUrl}>js/owl/assets/owl.theme.default.css" rel="stylesheet">

    <
link href="<{$xoops_url}>/favicon.ico" rel="shortcut icon">
    <
link rel="stylesheet" type="text/css" href="<{xoImgUrl}>css/bootstrap.min.css">
    <
link rel="stylesheet" type="text/css" href="<{xoImgUrl}>css/xoops.css">
La définition de xoops.css est après et vient donc écraser celle de owl.

Autre solution plus propre à mon sens : Redéfinir les slides avec les fonctions proposées par b3 (voir mon lien sur mon 1er post) et pas celles de owl.
C'est plus pérenne car on devrait sortir une version xboostrap4...

Posté le : 29/03/2020 12:08

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: Slider xbootstrap
Team FrXoops
Inscrit: 14/05/2004 22:32
Messages: 2554
oui en changeant intervalle dans js.js ça marche mieux.
Merci.

Posté le : 29/03/2020 12:13

Ne pas perdre patience, même si cela semble impossible, c'est déjà de la patience.
Origami
Conseil des Sages
Sur gitHub
Partager Twitter Partagez cette article sur GG+
Re: Slider xbootstrap
Team FrXoops
Inscrit: 14/05/2004 22:32
Messages: 2554
ça ne marche pas en modiiant xoops.css pourtant j'ai vidé les caches au cas ou, mais en modifiant interval dans js.js , impeccable :

/* Bootstrap Carousel */
jQuery(document).ready(function($) {
    $(
'.carousel').carousel({
        
interval:   5000,  // JJDai - interval de temps entre chaque image du slider en ms
        
pause:      "hover",
        
wrap:       true
  
})
});

Merci je vais quand même continuer a explorer la piste du CSS
JJDai

Posté le : 29/03/2020 12:20

Ne pas perdre patience, même si cela semble impossible, c'est déjà de la patience.
Origami
Conseil des Sages
Sur gitHub
Partager Twitter Partagez cette article sur GG+
Re: Slider xbootstrap
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
Si tu sais intégrer des variables js dans le html voici la page d'exemple :

https://owlcarousel2.github.io/OwlCarousel2/demos/autoplay.html

Attention, ça c'est la version 2...

Posté le : 29/03/2020 12:49

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: Slider xbootstrap
Team FrXoops
Inscrit: 14/05/2004 22:32
Messages: 2554
oui c'est une solution aussi,
mais finalement j'en ai trouvé une nettement meilleure.
en fait les utilisateurs souhaitaient pouvoir prendre le temps d'observer les images, que je vais changer régulièrement.
En fait je viens de leur envoyer un message pour leur indiquer qu'en en laissant la souris au survol du slider ils auraient tout le temps de les observer.
Comme quoi les solutions ne sont pas toujours ce que l'on pourrait penser
Mais c'était instructif quand même
JJDai

Posté le : 29/03/2020 13:03

Ne pas perdre patience, même si cela semble impossible, c'est déjà de la patience.
Origami
Conseil des Sages
Sur gitHub
Partager Twitter Partagez cette article sur GG+
Re: Slider xbootstrap
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
lol, ben oui, ça me semblait évident,

c'est la propriété : "pause: "hover","

Posté le : 29/03/2020 14:26

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: Slider xbootstrap
Team FrXoops
Inscrit: 14/05/2004 22:32
Messages: 2554
Oui bin heueueue !!!
Mes petites cellules grises ne sont plus aussi vaillantes .
JJDai

Posté le : 29/03/2020 17:17

Ne pas perdre patience, même si cela semble impossible, c'est déjà de la patience.
Origami
Conseil des Sages
Sur gitHub
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.

Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

44 Personne(s) en ligne (36 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 44 | Plus ...