Intégrer Swiper dans Oxygen

Mis à jour le dimanche 6 septembre 2020
Temps approximatif de lecture : 3 minutes

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.

<!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/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Copyright © 2019 - 2020 Bulgaweb
 | 
Développé par BulgaWeb
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram