Door het hebben websites die de volledige breedte van het scherm beslaanvinden we dat bepaalde elementen kunnen worden geïntegreerd die van pas kunnen komen om een hele reeks producten te koop of de reizen die we in de zomer te bieden hebben, te tonen. Carrousels of schuifregelaars zijn een van die webelementen waarmee we onze producten op een zeer opvallende manier kunnen laten zien.
De Gratis schuifregelaars, scrollers of carrousels in CSS die u hieronder zult vinden, verzin een goed repertoire voor allerlei doelen op het werk dat we de klant gaan laten zien voordat ze ons budget accepteren. Het is een verzameling schuifregelaars in HTML en CSS met een beetje JavaScript in zowel horizontaal als verticaal formaat. Laten we het doen, zodat u toegang heeft tot de code om ze snel te implementeren.
Horizontale carrousels
Deze carrousel bestaat uit een behoorlijk flitsende animatie alsof we een gordijn aan het tekenen waren, om gewoon uit te zoomen voor de foto's en iconen van de profielen die we in deze slider gaan vastleggen. Het is een perfecte carrousel voor getuigenissen van gebruikers die zeer tevreden zijn met de producten die we op internet verkopen.
Responsieve oneindige carrousel
Deze schuif is zoals de advertenties die soms te zien zijn op de voetbalvelden aan de zijkanten en met verschillende advertenties die horizontaal scrollen. Het is ideaal voor bestemmingspagina's waarop merkpartners en andere soorten logo's moeten worden weergegeven.
Reageer carrousel
Deze scroll valt op door zijn React.js. Dat leent zich voor het weergeven van afbeeldingen op een evenredige grootte terwijl we van de ene afbeelding naar de andere gaan in een doorlopende animatie. Er valt weinig meer te zeggen over deze vrij eenvoudige CSS, maar het heeft veel effect als we weten hoe we deze correct op internet moeten plaatsen.
Soepele 3D-schuifregelaar
Deze 3D-carrousel bestaat uit HTML, CSS en JavaScript en valt op door zijn soepelheid en een zeer visuele stuiterende animatie Met een reeks elementen die elke kaart identificeren, een baan en een opvallende carrousel om deze in uw website op te nemen.
Automatische oneindige carrousel
Een schuifregelaar die, zoals de eigen naam al aangeeft, automatisch wordt weergegeven zonder dat de gebruiker hoeft te interageren in een mum van tijd met hem. De verschillende afbeeldingen waaruit deze opvallende carrousel bestaat, verschijnen door de overgang waarin het op magische wijze vervaagt.
Beweeg carrousel
Met het hover-element dit schuifregelaar beweegt van links naar rechts, of omgekeerd, als we de muisaanwijzer erop laten staan. Een vloeiende overgang om te bewegen tussen de verschillende foto's waaruit deze afbeeldingsschuifregelaar kan bestaan.
Mobiele carrousel
ook genaamd Carousel Material Design, en met de huidige trend met alle soorten kaarten, hier vind je nog een artikel met een groot aantal in CSS / HTML, neemt afstand van de rest omdat het is samengesteld uit de ontwerptaal die door Google wordt gepubliceerd. U kunt de verschillende kaarten verplaatsen door lang op de kaarten te drukken.
Instagram-feedcarrousel
U kunt het idee achter deze opvallende schuifregelaar laten crashen door een strook afbeeldingen die kunnen worden vergroot door op een ervan te klikken. Een animatie met een groot effect, hoewel deze is gericht op een specifiek type website. Instagram-berichten naar een slick.js-carrousel.
Eenvoudige gesynchroniseerde carrousel
Het heeft veel te maken met de vorige, maar vooral in de strip met afbeeldingen de interactie met de slider is heel anders door het met een zijwaarts gebaar van links naar rechts en vice versa te bewegen. Opnieuw hebben we slick.js die zijn ding doen. Opvallend door het geweldige effect.
3D horizontale carrousels
Een van de meest interessante carrousels op de hele lijst die we publiceren. Onderscheidt zich van uw horizontale schuifregelaars in CSS en HTML die fantastisch goed bewegen. U hoeft alleen de muisaanwijzer op de vakjes te laten staan om de verschillende effecten te vinden die met de vier variaties kunnen worden geproduceerd.
CSS-carrousel
Eenvoudig en geweldig visueel effect met een reeks kaarten die om beurten aan de voorkant. Het effect is in 3D, dus het is een van die schuifregelaars die veel aandacht trekken, vooral vanwege het minimale rebound-effect dat genialiteit toont van de kant van de maker ervan.
Ambilight Bootstrap-carrousel
Een simpele slider met groot effect die niet veel opvalt. Is een van die simpele schuifregelaars waar we meestal naar op zoek zijn en dat het gevoel geeft één te zijn zonder veel tamtam, maar dat zijn functie perfect vervult.
Carrouselteam
Als u het redactieteam dat u op de blog heeft, wilt voorstellen, deze schuifregelaar is perfect in zijn rol Goed vergelijkbaar met de vorige voor hoe eenvoudig het is. Het valt op door het gebruik van diamanten om alle foto's van het team te huisvesten. Het heeft automatische weergave.
Carrouselkubus
Schuifregelaar die opvalt als een kubus waarin elk van de gezichten is een van de afbeeldingen of foto's die we op een website willen weergeven. U hoeft alleen maar op elk ervan te klikken om ze te scrollen en erachter te komen welke inhoud u te wachten staat.
Carrousel pijltjestoetsen
Een schuifregelaar waarin de interactie doorloopt met de pijltjestoetsen Eenvoudig zonder veel tamtam dat direct naar een ander soort interactie gaat, een die jaren geleden lijkt. Voor een specifiek gebruik.
Verticale carrousels
Een schuifregelaar met een geweldig visueel effect dat speelt automatisch af in een doorlopende verticale animatie dat opvalt door zijn kaarten met afgeronde hoeken. Zeer actueel en een van degenen die op zichzelf opvalt in deze hele lijst.
Pure CSS-carrousel
Deze carrousel valt op door een zijmenu waaruit we kunnen gaan door op elk van de opties te klikken. De informatie verschijnt met een goed bereikt rebound-effect zonder veel meer dan wat werd gezegd.
Verticale carrousel reageert
Vergelijkbaar met voorheen vanwege zijn verticaliteit, hoewel deze schuifregelaar de volledige breedte van de pagina kan nemen om de afbeeldingen van elk van de tabbladen weer te geven. Interessant vanwege het grote formaat en het gebruik van CSS-overgangen om tussen dia's te schuiven.
3D gesplitste carrousel
Geweldig visueel effect met een schuifregelaarpatroon dat in 3D roteert met een zeer opvallende animatie U kunt elk van de opties in het menu aan de linkerkant selecteren met puntjes voor elk ervan. Een van de beste op de lijst voor hoe creatief het is.
Goedemorgen, ik wil Pure CSS Carousel op mijn site gebruiken, maar het bevindt zich op slechts één positie, hoe kan ik ervoor zorgen dat het zich op de positie bevindt die ik op mijn pagina wil?
Help je hierbij alstublieft, heel erg bedankt
Hoe kan ik ervoor zorgen dat de Hover Carousel goed wordt weergegeven op de mobiele versie van mijn website?
Uitstekend, wat hebben ze het goed gedaan!
Hallo, de koetshuizen zijn erg cool, maar zodra ik het upload, kopieer en plak ik het, de javascrip geeft me een foutmelding vanwege de var max = $ ('# c> li) .lenght…. Wat stel je voor?