Suite à une question de Stéphane sur le groupe francophone Oxygen, j'ai fait une recherche pour faire fonctionner différents sliders Swiper dans des tabulations. Par défaut, le changement de tabulation casse le fonctionnement des sliders.

L'astuce que j'ai trouvée ici, a juste besoin d'être adaptée à Oxygen. Le code JS peut être gardé tel quel (en remplaçant juste la classe .tabInput par .oxytab) et nous allons juste adapter dans Oxygen.

new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

let tabInputs = document.querySelectorAll('.oxy-tab');

tabInputs.forEach(function(input) {

  input.addEventListener('change', function() {
    let id = input.value;
    let thisSwiper = document.getElementById('swiper' + id);
    thisSwiper.swiper.update();
  });

});

Dans les tabulations nous allons rajouter un attribut "valeur" qui aura comme valeur une incrémentation en fonction du nombre de sliders (dans ce cas 1,2,3). Ensuite nous devrons changer l'ID du swiper-wrapper avec swiper1, swiper2, etc. Ainsi à chaque changement de tabulation, le slider sera mis à jour et fonctionnera correctement.

La structure de Swiper reste la même que sur ce tutoriel.

Vous pouvez voir ma démo sur cette page.

Un petit tutoriel complémentaire à la série Gsap de notre ami SupaMike (site). Gsap est une librairie JS qui permet de faire de nombreuses animations dans nos sites et il est possible de l'intégrer dans nos sliders Swiper.

Swiper peut interagir avec les évènements comme le changement de slide (slideChange) ce qui permet d'intégrer une animation dès que slide change. Plus d'informations sur ces propriétés sur cette section de la documentation.

Donc dès que les éléments contenus dans votre slider disposent d'une classe, vous lui appliquez l'animation de votre choix (voir la documentation de Gsap).

Dans mon slider de démonstration j'ai ajouté un déplacement vertical (donc axe Y) avec gsap.fromTo(".swip-title", 0.7, {y: "-200px"},{y: "0px"} ); sur mon titre et un déplacement horizontal sur le résumé (axe X) avec gsap.fromTo(".swip-text", 0.9, {x: "1200px"},{x: "0px"} );. Le code fromTo étant de -200px à 0px (position initiale).

Le code complet de ce simple exemple :

swiper.on("slideChange", function() {
  gsap.fromTo(".swip-title", 0.7, {y: "-200px"},{y: "0px"} );
  gsap.fromTo(".swip-text", 0.9, {x: "1200px"},{x: "0px"} );
});

Vous trouverez également beaucoup des sources YouTube ou Codepen avec d'autres exemples comme ceux-ci. Exemple 1, exemple 2, exemple 3.

Ma démonstration est ICI. Et l'intégration de Swiper ICI. Amusez-vous bien 😉

Anime.js est une bibliothèque d'animation JavaScript légère avec une API simple mais puissante facilement utilisable avec Oxygen.
Il fonctionne avec les propriétés CSS, SVG, les attributs DOM et les objets JavaScript.

Il suffira pour ces exemples de rajouter un bloc de code dans votre page Oxygen avec par exemple (exemple 7 du dernier lien an-dessous) :

<h1 class="ml7">
  <span class="text-wrapper">
    <span class="letters">Reality is broken</span>
  </span>
</h1>

Dans le css

.ml7 {
  position: relative;
  font-weight: 900;
  font-size: 3.7em;
}
.ml7 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}
.ml7 .letter {
  transform-origin: 0 100%;
  display: inline-block;
  line-height: 1em;
}

Et dans le javascript :

// Wrap every letter in a span
var textWrapper = document.querySelector('.ml7 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.ml7 .letter',
    translateY: ["1.1em", 0],
    translateX: ["0.55em", 0],
    translateZ: 0,
    rotateZ: [180, 0],
    duration: 750,
    easing: "easeOutExpo",
    delay: (el, i) => 50 * i
  }).add({
    targets: '.ml7',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

Démos sur ce site : https://oxygen.bulgaweb.com/moving-letters/

Lien du Javascript : https://animejs.com/

Lien des tutoriels "Moving Letters" : https://tobiasahlin.com/moving-letters/

Vous pouvez également utiliser mon plugin Oxychild qui inclut le javascript (à activer) DOWNLOAD

Isotope permet de filtrer les catégories avec le module Easypost (car il dispose d'un template que le repeater n'a pas). Globalement nous devrons insérer les slugs des catégories en classe pour chaque articles.

Afin de facilité la mise en place, vous pouvez utiliser mon plugin "OxyChild" qui dispose de la fonction nécessaire et des fichiers javascript. Il vous suffira d'activer le functions.php et l'insertion des javascript en activant Isotope.

Nous allons d'abord récupérer les catégories et en faire des boutons pour filtrer. Insérer un bloc de code au-dessus de votre module easypost. Il faudra donc utiliser cette fonction dans ce bloc et bien modifier "ma-taxonomie" par votre taxonomie personnelle (fonctionne avec les CPT)

oxychild_get_filters('ma-taxonomie');

Note : le nom de la fonction avec oxychild peut être changé. J'ai remplacé mon plugin maison OxyChild par Advanced Script. Je crée donc un script PHP que j'appelle Functions et il doit contenir ce code :

/* Functions needed for Isotope JS */

function oxychild_get_filters($taxonomy)
{
	$terms = get_terms($taxonomy);
	$count = count($terms);
	if ($count > 0) { ?>
		<div class="portfolio-categories filter-button-group">
			<button class="active" data-filter="*"><?php esc_html_e('TOUT', 'text-domain'); ?></button>
			<?php foreach ($terms as $term) { ?>
				<button data-filter=".<?php echo esc_attr($term->slug); ?>"><?php echo esc_html($term->name); ?></button>
			<?php } ?>
		</div>
		<?php
	}
}

Et ce css dans le même bloc que vous allez personnaliser à votre goût.

.filter-button-group button {
    margin-right: 10px;
    margin-bottom: 14px;
    padding: 10px 20px;
    border: none;
    border-radius: 15px;
    background-color: #1d3c2e;
    color: #fff;
    font-weight: normal;
    letter-spacing: normal;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 13px;
}

.filter-button-group button:hover,
.filter-button-group button.active {
    color: #fff;
    background-color: #63917c;
}

.filter-button-group button:focus {
    outline-style: none;
    outline-color: transparent;
}
.filter-button-group {
	display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
}

Ensuite nous allons nous rendre dans le template php d'easypost et remplacer la première ligne (div avec la classe oxy-post) avec celle-ci (remplacer également "ma-taxonomie")

<div class='oxy-post <?php 
            $categories = get_the_terms( $post->ID, 'ma-taxonomie' );
foreach( $categories as $category ) { 
  echo ' ' . $category->slug;
} 
?> '>

Si vous avez bien réaliser tous les instructions, vous devriez pouvoir filtrer vos postes.

Note : vous pouvez remplacer dans la fonction, située dans functions.php, le mot "TOUT" par ce qui vous conviens le mieux.

Lien d'Isotope : https://isotope.metafizzy.co/

CRÉER UN ENSEMBLE AVEC ICOMOON
Visitez IcoMoon.io et cliquez sur IcoMoon App en haut à droite. Vous êtes redirigé vers l'application Web.
Choisissez les icônes à ajouter à votre jeu d'icônes. Vous pouvez télécharger vos propres icônes en cliquant sur Importer des icônes dans la barre supérieure.
Une fois que vous avez terminé, cliquez sur Générer SVG et plus, cliquez sur Préférences en haut et sélectionnez "Ajouter à symbol-defs.svg". Fermez la fenêtre contextuelle, puis cliquez sur Télécharger. La vidéo ici montre comment procéder.

https://oxygenbuilder.com/documentation/other/custom-svg-icon-sets/?fbclid=IwAR3eazVLPXGm1zf9yDgyi-g3VN6oPExPcJztTljdjyMQOVTa6u69yQ2teNcVidéo

ATTENTION que depuis une mise à jour d'IcoMoon, il faut aller dans les préférences de l'application et cocher "add title" comme le montre cette vidéo https://www.loom.com/share/ae1c88e4cec34c8fa5cec6a4cc47de06?fbclid=IwAR3Gsj9rSMzszmZcVdvdUlMYO28ZE_eMmtsPTbTqrZXwERU8BZGbgW5pDdc

Lien pour IcoMoon : https://icomoon.io/

Dans le même esprit que Typed.js, dans un premier temps installez d'abord le plugin javascript. Créez un bloc de texte riche (rich text) Oxygen avec une structure comme celle-ci

<p>Oxygen est <span class="headingfx1">plus rapide, plus léger, très personnalisable, très cool ...</span></p>

Chaque virgule déterminera un bloc de texte qui sera mis en rotation avec les autres. De le même manière que Typed.js, rajoutez un code bloc (et respectez la classe assignée dans le riche texte) avec ceci

(function($) {
    $(".headingfx1").Morphext({
        animation: "bounceIn",
        separator: ",",
        speed: 2000
    });
}(jQuery));

Lien du plugin : https://morphext.fyianlai.com/

Après avoir installé la librairie javascript, insérer une classe à un élément texte d'Oxygen et un code bloc avec ceci

(function($) {
    var typed = new Typed(".typefx1", {
	strings: ["Mon texte Typed.js "],
	typeSpeed: 50,
	startDelay: 1000,
	loop: true,
	});
}(jQuery));

Configurez les options du plugin à votre goût, texte (à l'intérieur des guillemets de "strings", vitesse de l'animation, délai, boucle, ...

Lien du plugin : https://github.com/mattboldt/typed.js/

Le plugin s'utilise très facilement avec OxyPowerPack ou OxyAttributes. Après avoir installer le plugin, il faudra l'initialiser avec ce code :

window.onload = function() {
	lax.setup() // init

	const updateLax = () => {
		lax.update(window.scrollY)
		window.requestAnimationFrame(updateLax)
	}

	window.requestAnimationFrame(updateLax)
}

Ensuite il suffira de rajouter une classe (lax par exemple) et de rajouter les attributs comme ceci :

<p class="lax" data-lax-preset="spin fadeInOut">Look at me goooooo!</p>

NOTE : Oxygen ayant rajouté les attributs dans le constructeur de base OxyAttributes n'est plus nécessaire.

Vous retrouverez tous les presets sur la page du plugin.

Lien du plugin : https://github.com/alexfoxy/lax.js

Pour un projet je voulais changer la couleur de fond d'un champ (badge) provenant d'un champs Pods (ou ACF) en fonction du texte de son contenu (liste).

Il faut donc ajouter une classe à votre champ dynamique (dans ce cas mts-badge) et ciblé le mot voulu. Et ensuite utilisé ce code jQuery :

jQuery( "div.mts-badge:contains('Sold')").each(function() {
  jQuery(this).css( "background-color", "red");});

Merci à Lucas Chaplain pour son aide ...

Swiper vous permet de faire différents sliders avec une quantité d'options intéressantes comme la pagination, les sliders verticaux, la scrollbar, lazy load, effets 3D, ...

Vous pouvez intégrer Swiper avec Oxygen et utiliser Easypost ou le Repeater pour générer vos slides. Il faudra dans un premier temps recréer la structure nécessaire pour Swiper. Vous pouvez également utiliser les démos pour suivre le code. Nous allons suivre cet exemple swiper démo

swiper démo

Commençons par insérer une section avec une première div qui aura la classe principale de .swiper-container. Celle-ci contiendra le Easypost ou Repeater avec la classe .swiper-wrapper (classe qui va contenir les slides). Pour le repeater la classe créée avec le repeater sera la classe swiper-slide, dans le cas d'Easypost il faudra rajouter cette classe après oxypost dans le template php ce qui donnera <div class='oxypost swiper-slide'>

Dans la cas d'une pagination, rajouter une div avec la classe .swiper-pagination en-dessous du Repeater/EasyPost.

ATTENTION : depuis la version 7 de Swiper il faut changer swiper-container par swiper !

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../package/swiper-bundle.min.css">

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="../package/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
      },
    });
  </script>
</body>

</html>

Lien du plugin : https://swiperjs.com/

Lien démo : https://oxygen.bulgaweb.com/swiper/