/* C'est ici que commence notre carrousel. Le.carrousel-wrapper est relativement positionné, le.carousel-item est absolu. . */ .carousel-wrapper( position:relative; /* Les boîtes positionnées de manière absolue tirent leur hauteur et leur largeur du parent. Nous les avons rendues transparentes par défaut, puis elles apparaîtront en fondu lorsque vous cliquerez sur .arrow-prev et.arrow-next liens. * / .carousel-item( position:absolute; top:0; bottom:0; left:0; right:0; padding:25px50px; opacity:0; transition:all0.5sease-in-out; /* Remarque le rembourrage à gauche et 50px à droite ? De cette façon, nous pouvons positionner nos liens ! Chacun aura une largeur de 50 px. J'utilise également des liens vides avec motif de fond afin que les liens ressemblent à des flèches. Vérifiez si vous avez modifié les URL des liens par rapport à l'URL d'origine afin que vos liens ne soient pas simplement des rectangles transparents. */ .arrow( position : absolu ; haut : 0 ; affichage : bloc ; largeur : 50 px ; hauteur : 100 % ; -webkit-tap-highlight-color:rgba(0,0,0,0); background:url( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* Revenons à notre flèche gauche. */ &.arrow-prev( left:0; ) /* Et la deuxième à droite . Puisque j'utilise la même image pour la flèche, je la fais pivoter de 180 degrés */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) / * J'aime vraiment l'apparence des diapositives du carrousel sur un fond sombre, et si le bloc .carousel-item a la classe "light", nous changerons son texte en blanc et utiliserons des flèches blanches au lieu de grises. Vérifiez à nouveau si le chemin vers l'image de la flèche est correct */ &.light( color:white; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* Écrivez une requête multimédia pour redimensionner les flèches sur les appareils avec une taille d'écran plus petite.*/ @media(max-width:480px)( .arrow,&.light.arrow( background-size:10px; background-position:10px50 % ; ) ) ) /* Définir les cibles du lien à afficher : aucune ; Ainsi, nous nous débarrassons du saut constant du navigateur tout en haut du carrousel à chaque clic sur les flèches. Cette propriété s'applique à tout élément dont l'ID commence par "target-item". */ ( display:none; ) /* Ci-dessus, nous avons rendu toutes nos diapositives de carrousel transparentes, ce qui signifie que lorsque le carrousel se charge, nous aurons une grande boîte vide à la place. Modifions la valeur de transparence de la première diapositive à 1 pour l'affichage. Nous avons également défini le z-index sur 2, en le positionnant au-dessus du reste des diapositives. */ .item-1( z-index:2; opacity:1; ) /* Mais nous ne voulons pas que la première diapositive ait toujours une opacité : 1 ; sinon, nous devrons parcourir cette diapositive pendant que les autres tournent. */ *:target~.item-1( opacity:0; ) /* ..mais si #target-item-1 est mis au point et que nous voulons afficher la première diapositive, sélectionnez-la avec l'icône ~ et définissez le opacity retour à 1 :-) */ #target-item-1:target~.item-1( opacity:1; ) /* Si d'autres target-item-# sont en focus, sélectionnez-les à l'aide du sélecteur ~, effacez-les dans, et placez-les en haut avec z-index : 3. Ici, vous pouvez ajouter des étendues supplémentaires avec l'identifiant de l'élément cible si vous en avez plus de trois. Peut immédiatement ajouter 10 pièces. . */ #target-item-2:target~.item-2,#target-item-3:target~.item-3( z-index:3; opacity:1; ) )
Il existe de nombreux excellents plugins de carrousel et de curseur jQuery sur Internet. Ils vous permettent d'implémenter un défilement dynamique avec des effets supplémentaires.
C'est l'une des tendances de conception de sites Web les plus populaires de ces dernières années. De plus, l'utilisation de bibliothèques prêtes à l'emploi et de plugins jQuery peut considérablement gagner du temps. Tout ce dont vous avez besoin est de créer un lien vers les fichiers JavaScript et CSS, puis d'appliquer l'effet aux éléments HTML souhaités.
Vous pouvez également définir vos propres préférences et styles CSS. L'article d'aujourd'hui vise à vous présenter les plugins jQuery responsive pour créer des carrousels et des sliders.
Distractful est un plugin jQuery pour créer un curseur de contenu plein écran tactile.
Curseur de carrousel de contenu jQuery plein écran réactif avec prise en charge de l'écran tactile. Le plugin est distribué sous accord de licence LICENCE PUBLIQUE GÉNÉRALE GNU v3 :
Neoslide : un plugin de carrousel jQuery simple et extensible
Un plugin jQuery simple et extensible qui vous permettra d'utiliser un slider entièrement personnalisable sur n'importe quelle page web :
greffon hslider galerie adaptative images pleine largeur
Un autre plugin pour présenter des images à l'aide d'un carrousel réactif jQuery avec des contrôles et une durée de délai personnalisée :
Carousel 3D : plugin de carrousel jQuery avec effets de rotation 3D
Curseur élégant : carrousel plein écran jQuery réactif
Carrousel jQuery minuscule et attrayant pour présenter du contenu et des images avec différents types de navigation ( Flèches SVG avec vignettes d'images, éléments de pagination ou onglets):
Carrousel PaW : carrousel réactif jQuery
PaW Carousel (v2) est un plugin miniature pour créer des carrousels jQuery réactifs et simples avec des vignettes d'images :
Carousel Sharer : carrousel de partage social jQuery
Carousel Sharer est un plugin jQuery qui permet de présenter plusieurs produits à la suite et permet aux visiteurs de partager vos produits sur Facebook, Twitter, Google+ et Pinterest :
Simply Carousel : carrousel d'images responsive minimaliste
Simply Carousel est un plugin jQuery minuscule et rapide qui vous permet de créer des curseurs et des carrousels d'images flexibles et réactifs :
Diapositives : un carrousel jQuery réactif et un diaporama tactile
Slides est un plugin jQuery miniature permettant de créer des carrousels réactifs pour un site jQuery avec des vignettes, une navigation par flèche et la possibilité d'utiliser des contrôles personnalisés. Support implémenté pour les écrans tactiles :
Carrousel de contenu jQuery
Un simple carrousel jQuery réactif avec lecture automatique, commandes et même rappels :
Slick : carrousel jQuery réactif et réactif
Slick est un plugin "nouveau" pour créer des carrousels et des curseurs jQuery personnalisables, réactifs et adaptés aux mobiles qui fonctionnent avec n'importe quel élément HTML :
bxSlider : curseur de contenu HTML jQuery
bxSlider est l'un des meilleurs curseurs de contenu jQuery disponibles aujourd'hui. Ce plugin est idéal pour organiser des diaporamas :
CarouFredSel : Plugin de carrousel jQuery flexible et puissant
jQuery.carouFredSel est un plugin qui transforme n'importe quel élément HTML en un carrousel de contenu. Il permet de faire défiler un ou plusieurs éléments simultanément à la fois horizontalement et verticalement. Vous pouvez également activer lecture automatique et rendre le défilement infini :
Faire du vélo carrousel de contenu avec jQuery
Un carrousel où chaque clic fera apparaître un nouveau bloc de contenu. Cliquer sur la croix fermera le bloc actif et nous ramènera à la position d'affichage des vignettes d'origine :
Carrousel cloud : carrousel 3D Javascript
Ce carrousel vous permet de créer une perspective réaliste. De nombreux carrousels 3D jQuery appliquent l'effet de perspective uniquement à la taille de l'image, pas à sa position, ce qui entraîne des éléments disproportionnés sur la page :
Elastislide : carrousel réactif jQuery
Elastislide est un carrousel jQuery réactif qui s'adapte à toutes les tailles d'écran. Coller le carrousel dans un conteneur de largeur flexible rendra également le carrousel lui-même fluide :
jCarousel Lite
Avec ce plugin, vous pourrez afficher des images ou des éléments HTML sous forme de curseur. Il ne pèse que 2Ko, mais il vous permet d'utiliser vos propres réglages :
Carrousel 3D
Créez un carrousel jQuery 3D à partir d'images avec des effets d'ombre et une animation basée sur la position du curseur :
plug-in de carrousel jQuery
Les paramètres de ce plugin permettent de déterminer combien d'éléments seront affichés dans le carrousel, après quoi le plugin l'adapte à la largeur souhaitée :
Rotation du curseur d'image avec jQuery
Un curseur d'image asymétrique avec un petit ajout : lors du défilement des images, elles pivotent légèrement. En raison du léger déplacement des éléments, le curseur prend une forme inhabituelle :
Carrousel de fonctionnalités jQuery
Ce plugin est conçu pour afficher des articles recommandés sur page d'accueil, mais il peut également être utilisé pour tout autre contenu. Il permet d'afficher jusqu'à trois images en même temps, tandis que le reste des éléments du carrousel de contenu jQuery sont masqués :
jQuery carrousel infini
Il s'agit d'un plugin jQuery qui permet d'afficher un nombre illimité d'images et de vidéos dans un carrousel. Contrairement aux autres carrousels, Infinite Carousel affiche les éléments dans une boucle sans fin sans avoir besoin de navigation :
Plug-in jQuery Liquid Carrousel
Liquid Carousel est un plugin conçu pour créer des designs fluides. Chaque fois que le conteneur jQuery Responsive Carousel est redimensionné, le nombre d'éléments affichés s'ajustera pour s'adapter à la nouvelle largeur :
Carrousel MS JQuery
Plugins jQuery Les carrousels vous permettent d'afficher le contenu des sites Web de manière plus attrayante. Avec l'aide de tels plugins, vous pouvez créer de belles présentations directement sur les pages des sites et attirer l'attention des visiteurs.
1. Curseur Bootstrap Ambilight
Curseur Ambilight Bootstrap est un plugin pour créer des curseurs/carrousels avec effet de lueur ambiante et fonctionnalité Bootstrap.
2.jQuery TouchSwipe Carrousel
jQuery-brancher Carrousel TouchSwipe permet de détecter les touchers sur l'écran tactile et de simuler un clic de souris.
3.ItemSlide
ItemSlide.js représente jQuery- un plugin pour créer un carrousel qui fonctionnera à la fois sur ordinateur et sur mobile appareils tactiles.
4.
– jQuery-plugin pour créer des carrousels/curseurs adaptatifs.
5.
Plugin entièrement réactif et optimisé pour les mobiles jQuery-carrousels. Pour l'animation ici sont utilisés CSS3-transitions, mais une option de secours est également prévue pour jQuery. Le plugin prend en charge un nombre illimité de diapositives avec tout type de contenu. peut interagir avec le clavier, et en même temps fonctionne bien dans la plupart des navigateurs, y compris les mobiles.
6.SilverTrack
SilverTrack – jQuery- plug-in avec possibilité d'extension. Il se compose d'un petit noyau, auquel vous pouvez choisir de connecter des plugins pratiques.
7. Hibou Carrousel 2
Hibou carrousel 2- carrousel entièrement réactif jQuery/Zepto avec prise en charge de l'écran tactile.
8. Carrousel utilitaire
UtilCarrousel- brancher jQuery-carrousels avec des transitions fluides, mis en œuvre au détriment de accélération matérielle. Il est entièrement réactif. Le plugin prend en charge les écrans tactiles et utilise la 3D CSS3- Animation avec accélération matérielle. Grâce à cela, le plugin aura fière allure à la fois sur les PC de bureau et sur appareils mobiles. Gouverner UtilCarrousel en utilisant le toucher, la navigation ou la molette de la souris.
9. Slick
Nappe est un adaptatif jQuery- un carrousel qui a tout ce dont vous pourriez avoir besoin.
10. Carrousel CodingJack 3D
Ce carrousel est pris en charge par les appareils sur iOS et Android et est équipé d'une fonctionnalité de retournement d'écran tactile. A fière allure sur les tablettes et les smartphones.
11. Diaporama jQuery
Diaporama jQuery est un carrousel et un curseur prenant en charge le contrôle gestuel sur les appareils tactiles. L'archive du plugin ne pèse que 2 kilo-octets.
12.FlimRoll
flimroll- miniature jQuery- un carrousel qui concentre l'attention de l'utilisateur sur un objet spécifique, en le plaçant au centre de l'écran.
13. Tikslus
Tikslus est complètement carrousel adaptatif au jQuery avec de nombreuses fonctions et caractéristiques. Et la grande adaptabilité du plugin vous permet de ne pas spécifier la taille des images. De plus, il convient de noter la prise en charge de l'animation arbitraire basée sur CSS3-Des classes. Tikslus peut être utilisé avec le plugin jquery mobile.
14. Boîte de défilement
boîte de défilement- simple, miniature jQuery-plugin qui transforme les listes en carrousel ou en ligne courante.
15. Carrousel Sky Touch
Sky Touch Carrousel- brancher jQuery-Carrousels avec un riche ensemble de fonctionnalités. Le plugin est réactif, prend en charge les écrans tactiles et fonctionne en même temps rapidement et en douceur. Les paramètres vous permettent de modifier apparence carrousel avec CSS.
16.
- souple jQuery-plugin pour créer des diaporamas ou des carrousels. Il comporte de nombreux paramètres, notamment les types de transition, l'alignement de l'image et la fréquence d'images.
Carrousel du hibou- Plugin jQuery avec prise en charge tactile qui vous permet de créer un curseur réactif (adaptatif) (carrousel).
Il s'agit d'un plugin très pratique, simple et adaptatif pour créer des curseurs, des carrousels, etc.
Dans cet article, je vais essayer de vous expliquer et de vous montrer comment cela fonctionne.
Installation du plug-in Owl Carousel
Nous devons d'abord télécharger l'archive avec le plugin
Ci-dessous, je vais montrer un exemple d'installation d'un plugin dans un modèle DataLife Engine.
Après avoir téléchargé l'archive, ouvrez-la et distribuez les fichiers comme suit :
Dossier chouette.carrousel.css et hibou.transitions.css mettre dans un dossier style alors ou CSS.
Dossier chouette.carrousel.js mettre dans le dossier js
Nous devons maintenant connecter ces fichiers pour qu'ils fonctionnent dans notre modèle.
Ouverture du dossier main.tpl un avant la ligne
entrez les lignes suivantes :
dossier CSS changer pour celui dans lequel vous êtes CSS modes!
Puis tout en bas avant la ligne
