Intégrer Swiper dans Oxygen
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
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/
Autres tutoriels :
Tutoriels populaires:
Sorry. No data so far.
Bonjour,
La solution Swiper avec Easy Posts ne fonctionne pas...
Je crois que c'est la div "oxy-posts" qui me pose problème, se placant entre le wrapper et les slides dans le code source. Je cale.
Avez-vous la solution ?
Merci,
FX
As-tu bien suivi la structure ? Il n'y a pas de raison que ça ne fonctionne pas. De mémoire il y a une div qui doit être en "relatif". Pourrais-tu préciser ton problème ?