Cette nouvelle fonctionnalité disponible en mai 2026 permet de concevoir des bandeaux défilants responsives directement avec l’éditeur OASIS en intégrant des modules de contenu (image, texte, titre…).


Vous trouverez la documentation au format pdf en pièce jointe.



AU SOMMAIRE : 

  1. Fonctionnement général
  2. Création d’un mega slider
  3. Ajouter un slider dans une page
  4. Multilangue


1. Fonctionnement général


1.1. Accès dans le back office 

La nouvelle fonctionnalité est accessible depuis le menu Site web > Mega Sliders.



1.2 Module Mega sliders


Un nouveau module “Mega Slider” est disponible dans le contenu du CMS.


 




2. Création d’un mega slider



Pour créer un nouveau slider, cliquer sur le bouton “Ajouter un slider” en haut à droite (3).

Il est également possible de dupliquer un slider en cliquant sur l’icône . Le contenu et le paramétrage sont repris intégralement, il ne reste plus qu’à modifier ce qui est nécessaire.

 


2.1. Création d’un mega slider


2.1.1 Général



Le champ “Nom” permet de désigner un slider, ce nom apparait dans la liste des sliders du back-office ainsi que dans la liste déroulante du module “Mega slider” du CMS.

 


2.1.2. Affichage



Si le paramètre “Actif” est sur “non”, le slider n’apparait plus sur le site. Il reste toutefois éditable et sélectionnable dans la liste déroulante du module “Mega slider” du CMS.
 Les dates de début et fin d’affichage permettent de rendre visible le slider sur une période définie.

 

 2.1.3 Apparence


Ces paramètres permettent de régler l’aspect principal du mega slider.


Nombre de slides visibles à l’écran :

  • Auto : un seul slide visible, mais si la largeur est inférieure à 100%, les autres slides seront visibles en partie sur les côtés.
  • Personnalisé : permet d’afficher plusieurs slides en même temps (5 maximum sur PC et tablette, 2 maximum sur mobile)


Espace entre les slides : permet d’ajouter une marge (en pixels) entre chaque slide.


Centrer le slide actif : uniquement valable si le premier paramètre est en mode “auto”. L’effet est visible si la largeur est réglée à moins de 100% et permet ainsi de centrer le slide en cours. Le slider suivant sera donc en partie visible à droite et le slider précédent en partie visible à gauche. Si réglé sur “non”, le slide en cours est aligné à gauche et seul le slide suivant est en partie visible à droite.


Griser les autres slides : uniquement valable si le paramètre précédent est actif. Ajoute un filtre noir & blanc sur les slides précédents et suivants, seul le slide en cours est affiché sans filtre.


 

2.1.4. Animation



Ces paramètres permettent de régler le mode d’animation du mega slider.


Effet de transition : 

  • Glissement : effet de translation de la droite vers la gauche.
  • Fondu : fondu enchainé entre les slides (non disponible si le paramètre “Nombre de slides visibles à l’écran” n’est pas sur “Auto”).
  • 3D : effet de translation de la droite vers la gauche avec un effet de profondeur au mouvement.
  • Flip : effet de rotation sur l’axe vertical (non disponible si le paramètre “Nombre de slides visibles à l’écran” n’est pas sur “Auto”).


Temps de transition : durée en secondes que prend la transition entre chaque slide. 

 

Mode boucle infinie : quand on arrive au dernier slide, le premier slide est affiché juste après comme si c’était le suivant. Sinon, le slider s’arrête là et il faut revenir en arrière pour voir les autres slides. 


Départ automatique : permet de lancer automatiquement le défilement du slider. Si le “mode boucle infinie” est désactivé, le slider reviendra automatiquement au début une fois tous les slides passés.


Temps d’affichage : durée d’affichage en secondes de chaque slide (uniquement valable si le paramètre "Départ automatique” est actif).


Pause au survol : si l’utilisateur passe la souris sur le slider, le défilement automatique s’arrête et ne reprend que lorsque le curseur en sort (uniquement valable si le paramètre "Départ automatique” est actif).


Afficher le temps restant : permet d’afficher un petit chronomètre en bas à droite symbolisant le temps d’affichage du slide (uniquement valable si le paramètre "Départ automatique” est actif). Sa couleur est personnalisable.



2.1.5. Navigation et pagination



Ces paramètres permettent de régler la façon dont on navigue dans le slider et l’affichage de sa progression.




 Flèches de navigation : permet d’afficher des flèches cliquables pour passer d’un slide à l’autre. Même si ce paramètre est désactivé, il est toujours possible de balayer le slider avec la souris ou le doigt pour effectuer cette action.


Position des flèches : par défaut, les flèches sont positionnées sur les côtés en surimpression. Il est possible de les déplacer en haut ou en bas (à gauche, au centre ou à droite).  Dans ce cas, si le paramètre “Nombre de slides visibles à l’écran” est réglé sur “Personnalisé” alors les flèches s'affichent dehors du slider (au-dessus ou en dessous).


Forme des flèches : forme des boutons contenant les flèches (rond ou carré). Imperceptible si la bordure est désactivée et si la couleur de fond est vide.


Bordure des flèches : affiche une bordure sur les boutons des flèches.


Couleur des flèches : couleur des icônes “flèches”, s’applique également à la bordure des boutons si elle est active.


Fond des flèches : couleur de fond des boutons (forcée à 50% d’opacité).


Afficher la pagination : permet d’afficher la progression du slider sous différentes formes.




 

Type de pagination > Puces : affiche de petites puces en surimpression en bas du slider, chaque puce représente un slide. Si le paramètre “Nombre de slides visibles à l’écran” est réglé sur “Personnalisé” et que les flèches de navigation sont actives alors les puces s'affichent dehors du slider (en dessous).


Puces cliquables : cliquer sur une puce permet d’aller directement sur le slide correspondant.


Puces dynamiques : permet de centrer la puce active et d’afficher les autres en dégradé.


Couleur de la pagination : régler la couleur des puces. Les puces inactives sont semi-transparentes.

 

 

Type de pagination > Barre de progression :
affiche une barre de progression sur toute la largeur. Elle se remplit au fur et à mesure du défilement du slider.


Position de la barre : positionner la barre de progression en haut ou en bas du slider.


Couleur de la pagination : régler la couleur de remplissage de la barre.

 



 Type de pagination > Fraction :
affiche le numéro du slider actif sous forme de fraction (ex : 2/5). Elle s’affiche en bas du slider en surimpression. Si les flèches de navigation sont positionnées en dessous du slider, la fraction se positionne en conséquence.


Couleur de la pagination : régler la couleur du texte.

 

 

2.1.6. Dimensions



Largeur : 
régler la largeur du slider à 100% de la fenêtre ou limiter à la largeur de contenu du site. Uniquement valable si le slider est utilisé en entête de page ou de catégorie.


Hauteur sur écran large : 

  • Auto : la hauteur du slider s’adapte à la hauteur des slides. Il est conseillé de faire tous les slides à la même hauteur.
  • Pleine hauteur : force la hauteur du slider pour qu’il prenne la hauteur totale de la fenêtre (la hauteur du header est soustraite).
  • Personnalisée : permet de fixer une hauteur en pixels. Si un slide est plus haut que cette valeur, il sera tronqué en bas.

Chaque type d’écran (PC, tablette et mobile) a son propre paramétrage.

 


2.1.7. Fond

 


Permet de paramétrer le fond global du slider. Ce fond fixe est commun à l’ensemble du slider et est donc visible sur tous les slides. Si un slide a son propre fond, le fond du slider ne sera plus visible.


Couleur : code couleur en hexadécimal.

Image de fond : téléverser une image qui apparaitra par-dessus la couleur de fond.

Paramètres de l’image de fond :

  • Répétition : définit la façon dont se répète l’image (horizontale, verticale, les deux ou non).
  • Position : positionnement de l’image par rapport à la zone du slider.
  • Taille : détermine si l’image garde sa taille d’origine (automatique), couvre toute la zone ou bien s’adapte à la zone pour être entièrement visible (au contenu).
  • Attachement : définit si l’image suit le défilement de la fenêtre ou si elle reste fixe.

 

 

2.2. Paramétrage d’un slide



Pour ajouter un slide au mega slider, il faut aller sur l’onglet “Slides” et cliquer sur le bouton “Ajouter un slide”.



2.2.1.Général



Nom : désignation d’un slide, ce nom apparait dans la liste des slides.

Lien global : lien sur la zone complète du slide. Si le slide comporte lui-même des liens (ex : boutons) ils seront prioritaires.

Actif : si réglé sur “Non” le slide n’apparait plus sur le site. Il reste toutefois éditable via le CMS.



2.2.2. Affichage



Les dates de début et fin d’affichage permettent de rendre visible le slide sur une période définie.

Il est possible de masquer un slide sur certaines langues en décochant les cases correspondantes, idem pour les espaces privés.

Exemple : avoir un slide uniquement visible du 01/08/2026 au 31/08/2026 pour les B to B en anglais.


2.2.3. Gestion du cache

 


Afin d’optimiser les temps de chargement, il est possible de mettre en cache le contenu d’un slide (selon les espaces privés). La fréquence d’actualisation du cache est réglable de 10 minutes à 1 semaine.

Le “super cache” permet d’augmenter encore plus les performances.

À tout moment, le cache d’un slide peut être supprimé en cliquant sur la corbeille correspondante.



2.3. Création graphique d’un slide



Pour éditer le contenu d’un slide, cliquer sur le bouton “Modifier avec l’éditeur”. Un nouvel onglet s’ouvre avec l’éditeur OASIS.

 


Le principe est le même que pour l’édition d’une page avec toutefois quelques différences :

  • L’éditeur se charge en dehors du site, l’entête affichant ainsi le nom du slide.
  • Certains modules ne sont pas disponibles pour être intégrés dans un slide (Plan du site, Téléchargement, Plugins, Formulaires, Partenaires...).
  • Le bouton “Prévisualiser” permet de voir le rendu du slider complet dans le site (ouverture d’un nouvel onglet).


Comme pour les pages, il est possible d’adapter le contenu du slide aux mobiles, tablettes et écrans larges en cliquant sur le bouton “Type d’écran”.

 

 


3. Ajouter un slider dans une page


3.1. Associer un slider à une page



Une fois le slider créé, il est possible de l’associer directement à une page en allant sur l’onglet “Graphisme” de la page. Sélectionner le “mega slider” dans la liste déroulante puis cliquer sur le bouton “Enregistrer”.
En cliquant sur l’icône à droite de la liste, on accède directement au paramétrage de ce slider. 


ATTENTION : la sélection d’un “mega slider” n’est possible que si aucun “bandeau défilant” n’est sélectionné.



3.2. Associer un slider à une catégorie


Il est possible d’associer un slider directement à une catégorie en allant sur l’onglet “Graphisme” de la catégorie. Sélectionner le “mega slider” dans la liste déroulante puis cliquer sur le bouton “Enregistrer”. Le slider défini apparaitra sur la page de catégorie correspondante.


Si l’on souhaite que la catégorie reprenne automatiquement celui de la catégorie parente, il faut sélectionner “Hérité du parent” dans la liste.


Un slider peut également être associé aux produits de cette catégorie avec le champ présent dans la section “Habillage des produits de la catégorie”.

En cliquant sur l’icône à côté de la liste, on accède au paramétrage du slider sélectionné.  

ATTENTION : la sélection d’un “mega slider” n’est possible que si aucun “bandeau défilant” n’est sélectionné.


 

 

 3.3. Ajouter le module Mega slider sur une page



Dans l’éditeur OASIS, cliquer sur le bouton “+” en bas de page pour faire apparaitre la liste des modules disponibles. Ensuite faire glisser le blog “Mega Slider” à l’endroit désiré.

 



En cliquant sur l’icône “Engrenage” du module ajouté, on peut choisir un slider créé précédemment.
Le bouton “Editer” renvoie vers le back-office afin de modifier les paramètres du slider si besoin.

 

 

 

4. Multilangue



Pour éditer un slide dans une autre langue, utiliser la liste déroulante en haut à gauche dans l’onglet “Contenu”. A noter que le contenu de chaque langue est indépendant l’un de l’autre donc pour reprendre la base de ce qui a déjà été fait (en français par exemple), il faut utiliser le formulaire “Reprendre le contenu existant” pour cibler le contenu souhaité et l’importer.

id="fin"

ATTENTION : si du contenu existe déjà dans la langue active, l’utilisation de cette fonction entrainera l’écrasement total du contenu dans cette langue.


.