Share
Dans mon cours, Optimiser votre site Web sans AMP, je vous ai expliqué en détail comment optimiser votre site Web pour obtenir des performances rapides. sans pour autant en utilisant l'AMP de Google.
Dans cette vidéo du cours, vous apprendrez à créer un composant populaire - un carrousel de tweets tournants - à l'aide du script Siema léger. Les techniques que vous apprendrez vous aideront à atteindre d'excellentes performances sans utiliser AMP.
Cette vidéo reprend les leçons précédentes du cours, dans lesquelles nous avons créé un site Web avec trois tweets intégrés au bas de la page. Vous pouvez trouver le code source complet du projet sur GitHub. Dans cette leçon, nous allons transformer ces trois tweets en un carrousel..
Dans la version AMP de notre site, cela a été fait avec le ampli-carrousel élément personnalisé. Mais au lieu de cela, nous allons utiliser un petit script sympa appelé Siema.
Siema coche toutes les cases que nous recherchons avec nos scripts:
Nous avons déjà ajouté Siema à notre script index.min.js lors de la configuration de notre fichier. Ce fichier a déjà été chargé dans notre fichier pagecontent.html. Il est donc prêt à être utilisé..
Tout ce que nous avons à faire est d’ajouter un peu de code dans pagecontent.html activer notre script.
const mySiema = newSiema (sélecteur: '.slides');
La capture d'écran ci-dessous montre où l'insérer:
Ce que nous faisons ici est de créer une constante et de la nommer mySiema. Nous définissons cette constante égale à une nouvelle instance de Siema, puis nous ajoutons un objet avec certains paramètres..
À l'intérieur des accolades, nous ajoutons le sélecteur de la propriété et nous désignons le sélecteur que Siema devrait rechercher pour faire un carrousel de ses enfants. Plus tôt nous avons ajouté la classe .glissades contenant les tweets, donc si nous ciblons cela avec Siema, chacun de nos tweets sera transformé en diapositive se trouvant dans notre carrousel..
Si vous consultez le site maintenant, le premier tweet devrait s'afficher sous forme de diapositive..
Cependant, il ne s'agit pas d'afficher les autres, car nous devons ajouter un peu de code supplémentaire pour rendre le carrousel automatique..
Pour rendre le carrousel automatique, nous devons modifier notre code comme suit:
const mySiema = newSiema (sélecteur: '.slides', loop: true); setInterval (() => mySiema.next (), 4000)
Ce que nous faisons ici, c'est dire à Siema combien de temps nous voulons qu'il attende entre chacune de nos diapositives. Donc, sur la dernière ligne, nous définissons l'intervalle avec setInterval, et ensuite le reste de cette ligne indique à Siema que nous voulons que l'intervalle entre chaque diapositive soit de 4 000 millisecondes ou 4 secondes..
Pendant que nous y sommes, nous devons également dire à Siema que nous souhaitons qu’elle fonctionne en boucle. Donc on fait ça avec la ligne boucle: true.
Maintenant, le carrousel passera automatiquement d’une diapositive à la suivante, en attendant quatre secondes, puis reviendra au début..
Il manque encore une autre chose, à savoir quelques petits boutons que nous pouvons utiliser pour avancer ou reculer manuellement dans notre carrousel..
Donc, pour configurer nos boutons, la première chose à faire est d’ajouter un peu de HTML supplémentaire dans le même fichier. Ajoutez l'extrait suivant à l'intérieur du Twitter-carrousel div, mais en dehors de la glissades div, car nous ne voulons pas que Siema traite ces boutons comme des diapositives devant être insérées dans le carrousel.
Ce code ajoute simplement deux formes SVG: un petit triangle qui pointe vers la gauche et un petit triangle qui pointe vers la droite..
Parce que nous n'avons pas besoin de charger dans une image, cela nous donne un temps de chargement encore plus rapide, et la taille de fichier de ce petit bout de code pour configurer une forme SVG est incroyablement petite..
Vous pouvez voir que nous avons le nom de la classe prev sur le premier de nos boutons, puis suivant sur le second. Et ce sont les classes que nous allons cibler avec Siema, lui disant de traiter ces boutons comme des boutons avant et arrière pour le carrousel..
Nous allons utiliser un peu de JavaScript pour trouver ces éléments dans notre code. C’est là que vous aviez peut-être l'habitude de travailler avec jQuery, mais nous évitons bien sûr d'utiliser jQuery sur notre site afin de ne pas avoir le code supplémentaire à charger. Nous allons plutôt modifier notre code en: ajout de deux nouvelles lignes pour qu'il ressemble à ceci:
Dans ce code, nous ajoutons un sélecteur de requête de document, puis spécifions le sélecteur que nous souhaitons rechercher, à savoir la classe. prev. Ensuite, nous ajoutons un écouteur d'événement, et l'événement que nous voulons écouter est Cliquez sur.
Alors maintenant, quand quelqu'un clique sur ce bouton à gauche, nous allons déclencher une action, et le reste de la ligne définit le comportement de ce bouton pour le bouton de gauche..
Ensuite, à la ligne suivante, nous faisons la même chose avec le bouton situé à droite, mais cette fois-ci nous remplaçons prev avec suivant.
Et maintenant, si nous consultons notre site, nous pouvons voir les boutons précédent et suivant, et si nous cliquons dessus, nous pouvons passer à travers le carrousel comme bon nous semble..
À présent, il ne reste plus qu’un petit peu de code supplémentaire à ajouter. Dans le cours, nous avons créé une version du site pour les personnes dont le navigateur a désactivé JavaScript. Mais pour le moment, si nous désactivons JavaScript, nous aurons nos bonnes citations de bloc comme repli, mais nous avons ces boutons de navigation inutiles ici maintenant..
Donc, nous pouvons résoudre ce problème en allant à notre noscript.css feuille de style et ajout:
.carrousel-button display: none;
Maintenant, lorsque nous actualisons notre site avec JavaScript désactivé, nous pouvons voir que nous nous sommes débarrassés de ces boutons.
Dans le cours complet, Optimiser votre site Web sans AMP, vous apprendrez à utiliser un site existant basé sur AMP et à le convertir en équivalent non-AMP. Le cours vous donnera des méthodes utiles pour faire fonctionner vos sites à toute vitesse, mais avec des techniques d'optimisation que vous décidez vous-même..
Vous pouvez suivre ce cours immédiatement avec un abonnement à Envato Elements. Pour un seul forfait mensuel, vous aurez accès non seulement à ce cours, mais également à notre bibliothèque croissante de plus de 1 000 cours vidéo et de livres numériques de premier plan sur l'industrie sur Envato Tuts.+.
De plus, vous obtenez maintenant des téléchargements illimités à partir de la vaste bibliothèque Envato Elements de plus de 400 000 ressources créatives. Créez avec des polices, des photos, des graphiques et des modèles uniques et livrez plus rapidement de meilleurs projets.
Accentsconagua