Aller au contenu
Support de Zwii
augras

Utiliser swiper

Messages recommandés

Bonjour,

 

Swiper est un slider qui possède énormément de possibilités : https://swiperjs.com/.

 

Il n'y a plus de plugin swiper et swiper n'est plus intégré en tant que module : le but n'est pas d'en faire un mais après avoir indiqué dans un autre fil d'utiliser swiper pour mettre une vidéo en bannière je me rends bien compte qu'il faut expliquer comment l'utiliser !

 

Ce qui suit est à faire en étant connecter en tant qu'administrateur puis clic sur Configurer le site (icône avec les rouages) et enfin rubrique Scripts.

 

Pour une utilisation rapide sans rien installer localement (CDN):

-1- Insérer dans head

<!--swiper-->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

-2- Insérer dans body

<!-- swiper -->
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script>
$(document).ready(function() {
  var mySwiper = new Swiper('.swiper-container', {
	<!--direction: 'vertical',-->
	speed:1000,
    centeredSlides:true,
    spaceBetween: 20,
    roundLengths:true,
    loop: true,  
	autoplay: {
	  <!--reverseDirection: true,-->
      delay: 6000,
	  disableOnInteraction: false,
	},
pagination: {
        el: '.swiper-pagination',
        type: 'progressbar',
      },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
	keyboard: {
	  enabled: true,
	},
	mousewheel: true,
  });
});
</script>

 

Pour une installation locale :

-1- Télécharger la dernière version : https://unpkg.com/browse/swiper@6.2.0/   

et déposer le contenu dans le dossier site/include/ de votre zwii. Pour la suite je suppose que toute l'arborescence du téléchargement se trouve dans un dossier swiper

 

-2- Insérer dans head:

<!--swiper-->
<link rel="stylesheet" href="site/include/swiper/swiper-bundle.css">
<link rel="stylesheet" href="site/include/swiper/swiper-bundle.min.css">

 

-3- Insérer dans body :

<!-- swiper -->
<script src="site/include/swiper/swiper-bundle.js"></script>
<script src="site/include/swiper/swiper-bundle.min.js"></script>

<script>
$(document).ready(function() {
  var mySwiper = new Swiper('.swiper-container', {
	<!--direction: 'vertical',-->
	speed:1000,
centeredSlides:true,
    spaceBetween: 20,
    roundLengths:true,
    loop: true,
	autoplay: {
	  <!--reverseDirection: true,-->
      delay: 6000,
	  disableOnInteraction: false,
	},
pagination: {
        el: '.swiper-pagination',
        type: 'progressbar',
      },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
	keyboard: {
	  enabled: true,
	},
	mousewheel: true,
  });
});
</script>

Les lignes de code ci-dessus sont adaptées à la dernière version stable de swiper, la 6.2.0, à la date de rédaction de ce message : elles seront éventuellement à adapter suivant les modifications dans les versions futures.

 

Usage d'un CDN ou installation locale Swiper est maintenant presque prêt à être utilisé.

 

Le code css nécessaire au défilement du texte n'est apparemment plus présent et il faut donc l'ajouter au fichier custom.css : il faut ce connecter en administrateur, cliquer sur Personnaliser les thème (icône petit pinceau) puis sur Editeur CSS.

Ajouter dans l'éditeur le code suivant :

/*Swiper*/
.swiper-text {
  display:inline-block;
  padding:10px;
  background:rgba(0,0,0,0.5);
  border-radius:8px;
  color:#fff;
  font:300 25px/30px 'Lato', sans-serif;
  position:absolute;
  left:-1000%;
  top:-10px;
  transition:1s 1s;
}
.swiper-slide-active .swiper-text {
  top:30px;
  left:20px;
}
@media only screen and (max-width: 800px) {
  /* make thumbnails wrap to two rows on tablets */
  .swiper-slide .swiper-text {
    font:300 20px/25px 'Lato', sans-serif;
  }
}
@media only screen and (max-width: 480px) {
  /* make thumbnails wrap to three rows on mobiles */
  .swiper-slide .swiper-text {
    font:300 15px/18px 'Lato', sans-serif; top:10px; padding:5px;
  }
.swiper-slide-active .swiper-text {
  left:5px;
}
}

Et ne pas oublier d'enregistrer.

 

Vous pouvez maintenant insérer le code suivant dans une page pour voir le résultat (les images sont fournis avec les exemples de zwii et tout devrait fonctionner tel quel... si vous les avez installés, et sous réserve de remplacer "zwii91dev59" par votre propre dossier d'installation de zwii) :

<div id="swiper" class="swiper-container swiper-container-horizontal">
		<div class="swiper-wrapper">
				<div class="swiper-slide swiper-slide-active"><a href="/zwii91dev59/site/file/source/galerie/space/cosmos.jpg" target="_blank" rel="noopener" data-lity=""><img title="Cosmos" src="/zwii91dev59/site/file/source/galerie/space/cosmos.jpg" /></a>
						<div class="swiper-text">Le cosmos</div>
				</div>
				<div class="swiper-slide swiper-slide-active"><a href="/zwii91dev59/site/file/source/galerie/space/nebula.jpg" target="_blank" rel="noopener" data-lity=""><img title="Nebula" src="/zwii91dev59/site/file/source/galerie/space/nebula.jpg" /></a>
						<div class="swiper-text">Une nébuleuse</div>
				</div>
				<div class="swiper-slide swiper-slide-active"><a href="/zwii91dev59/site/file/source/galerie/landscape/iceberg.jpg" target="_blank" rel="noopener" data-lity=""><img title="Iceberg" src="/zwii91dev59/site/file/source/galerie/landscape/iceberg.jpg" /></a>
						<div class="swiper-text">GlaGla</div>
				</div>
				<div class="swiper-slide swiper-slide-active"><a href="/zwii91dev59/site/file/source/galerie/landscape/meadow.jpg" target="_blank" rel="noopener" data-lity=""><img title="Meadow" src="/zwii91dev59/site/file/source/galerie/landscape/meadow.jpg" /></a>
						<div class="swiper-text">Super !</div>
				</div>
		</div>
		<div class="swiper-pagination"></div>
		<div id="swiper-button-prev" class="swiper-button-prev swiper-button-white"> </div>
		<div id="swiper-button-next" class="swiper-button-next swiper-button-white"> </div>
</div>

 

Nous avons ainsi l'usage classique de Swiper avec définition des options dans le 3ème script placer dans body (cf le site de swiper pour les nombreuses possibilités offertes : https://swiperjs.com/).

 

Maintenant il s'agit d'expliquer comment intégrer un diaporama swiper en bannière.

 

Avant tout il faut savoir que le fichier main.php a besoin d'être modifié : cela implique qu'à chaque mise à jour de zwii il faudra refaire cette modification puisque le fichier sera écrasé par la mise à jour.

 

Mais pas de panique puisque cette modification est quasi automatique : il suffit d'exécuter un script.

 

Le coeur du diaporama en bannière est le fichier swiperslides.inc.php placé dans site/include/swiper/ : c'est lui qu'il faut modifier pour changer les images du diaporama, ou mettre une vidéo en bannière.

 

Vous pouvez utiliser celui joint ici pour vous rendre compte immédiatement du rendu.

 

Maintenant il faut dire à zwii d'utiliser le fichier swiperslides.inc.php dans la bannière, quelle que soit la position de cette bannière : il s'agit d'exécuter le script install_swiper_banniere.php  joint .

 

Avant toute chose faite une copie de votre fichier main.php afin de prévenir tout incident (situé dans le dossier /core/layout/main.php).

 

Placer le fichier install_swiper_banniere.php à la racine de votre site et exécuter le en saisissant dans la barre d'adresse de votre navigateur http://votre_site/install_swiper_banniere.php

 

Renommez ensuite le fichier du script ou déplacez le afin d'éviter qu'une personne mal intentionnée ne l'exécute à de multiples reprises : ou tout simplement donnez lui un nom que vous serez le seul à connaître. En effet, à chaque exécution du script on ajoute une nouvelle bannière... 10 exécutions et bien 10 fois la bannière !

 

Pour modifier votre bannière il suffit maintenant de modifier le fichier swiperslides.inc.php.

Par exemple pour mettre une vidéo supprimer tout le contenu du fichier et le remplacer par :

<video width="100%" height="auto" autoplay loop>
		<source src="https://augras.eu/zwii91dev59/site/file/source/bellaciaoCasa.mp4" type="video/mp4" /></video>

 

Pensez à exécuter le script "d'installation" à chaque mise à jour : sinon la bannière ne sera tout simplement pas présente.

 

Pour faciliter la vie de ceux qui veulent mettre plein d'images dans leurs diaporamas @sylvainlelievre a développé plusieurs scripts pour automatiser la création du code à placer dans le fichier swiperslides.inc.php : tout est dans le fichier swiper_automatisation_V3.zip joint qu'il faut décompresser et toutes les explications sont dans les scripts. Vraiment super pratique : MERCI @sylvainlelievre.

 

EDIT : le script install_swiper_bannière.php a été modifié car l'affichage trompeur d'une erreur demandant d'actualiser la page pouvait conduire à exécuter à nouveau le script et donc à insérer une nouvelle bannière... à la fin du script on est automatiquement redirigé sur la page index.php pour constater que la bannière est bien présente.

 

 

swiperslides.inc.php

 

swiper_automatisation_V3.zip

install_swiper_banniere.php

Modifié par augras
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Pour ceux qui ont utilisés d'anciennes versions de swiper avec la possibilité de faire défiler du texte sur les images ou bien même tout seul sans image il y a un inconvénient de taille avec cette dernière version (et je suppose pas mal de versions antérieures) : le défilement de texte ne fonctionne plus... tout se superpose et en plus dans le cas du défilement sur une image et bien c'est maintenant sous l'image et le texte des images successives se superpose également.

Dans les démos de la dernière version rien ne concerne ce défilement de texte.

Bon, on peut certainement faire défiler du texte autrement mais le faire défiler sur les images était plutôt sympa.

Partager ce message


Lien à poster
Partager sur d’autres sites

Petit progrès concernant le texte : la superposition est due à l'option effect: 'fade', que je trouvais sympa et avait ajouté ici.

Je l'ai retirée des options dans le code ci-dessus.

Reste le défilement du texte sur les images qui défile bien en même temps que l'image mais en-dessous : pas certain de trouver une solution mais c'est un moindre mal. 

Modifié par augras

Partager ce message


Lien à poster
Partager sur d’autres sites

Bon, le soucis est au niveau du css : manifestement le css pour faire défiler le texte sur une image n'a pas été repris à un moment dans le développement de swiper.

On peut y remédier en ajoutant le code nécessaire dans custom.css : cf le premier message.

Il y a un petit effet rembobinage qui n'existait pas originellement  mais le css ayant une forte tendance à me donner des maux de tête je laisse tomber ce point.

Si quelqu'un tombé dans le css à la naissance a un peu de temps et veut bien regarder tant mieux et merci à lui.

Modifié par augras

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


×
×
  • Créer...