CSS Sliders | Bypeople

deals

premiumpacks & css sliders (22 items)

Curated collection of CSS Sliders with stunningly beautiful animations, styles, and responsive designs, delivered as snippets to integrate in your website UI/UX projects. You'll find transition effects, before & after sliders, split effects, flexbox sliders, popout sliders, and much more!

freebies

One page section slider made out of pure CSS, it has on click action with smooth transitions to change between sections. Not a single line of JavaS...

One page section slider made out of pure CSS, it has on click action with smooth transitions to change between sections. Not a single line of JavaScript, it's just HTML and CSS. Made by Codepen user Quentin Véron.

Slider element for web-based presentations. It uses Pug HTML, SCSS and JavaScript to achieve the linear transitions and to control the slides. Crea...

Slider element for web-based presentations. It uses Pug HTML, SCSS and JavaScript to achieve the linear transitions and to control the slides. Created by Codepen user Olivia.

A CSS slider with multiple animation options, featuring 4 slides with linear transitions handled entirely with CSS. This image slider was created b...

A CSS slider with multiple animation options, featuring 4 slides with linear transitions handled entirely with CSS. This image slider was created by Codepen user aladin ben sassi.

150 Flat Illustrations Pack + Generator, Only $19: SVG, Sketch, Figma, Adobe XD & Ai Files, Web & Mobile UI Templates, High-Res Transparent PNG Exp...

150 Flat Illustrations Pack + Generator, Only $19: SVG, Sketch, Figma, Adobe XD & Ai Files, Web & Mobile UI Templates, High-Res Transparent PNG Exports, Premade Scenes, Commercial Use License

Jaskiran Chhokar delivers this stunning 3D carousel created purely with HTML5 and CSS3. It transits automatically and pauses when hovering over an ...

Jaskiran Chhokar delivers this stunning 3D carousel created purely with HTML5 and CSS3. It transits automatically and pauses when hovering over an image, as well as zooming into it just enough to add a magnificent effect to the overall feel of the snippet. 

A CSS Carousel font showcase displaying each character of the alphabet as its own slide, and mapping the keyboard letter keys to their correspondin...

A CSS Carousel font showcase displaying each character of the alphabet as its own slide, and mapping the keyboard letter keys to their corresponding indexes in the carousel. It's fully responsive, features smooth transition animations and supports touchscreen 

Slider transitions using Swiper slider with parallax option enabled. It features several CSS filters that change the image coloring after the trans...

Slider transitions using Swiper slider with parallax option enabled. It features several CSS filters that change the image coloring after the transition is finished. Snippet made in CSS by Codepen user Mirko Zorić.

1000+ Photo Overlays, Only $14! 5k Resolution, 300 DPI, 13 Categories From Bubbles To Leaves & Natural Sunlight (87% Off)

1000+ Photo Overlays, Only $14! 5k Resolution, 300 DPI, 13 Categories From Bubbles To Leaves & Natural Sunlight (87% Off)

A little slice transition slider using a simple add class deal. Supports scroll wheel (scroll jacking), nav buttons, and arrow keys. The transition...

A little slice transition slider using a simple add class deal. Supports scroll wheel (scroll jacking), nav buttons, and arrow keys. The transitions and animations are smooth and can also increase the content wrapper to make the images fill viewport in their non-animating state, which is kinda cool as well.

A pure CSS animated rotating image slider with awesome effects throughout by Codepen user Nathan Taylor. Both the images and the colored overlay ro...

A pure CSS animated rotating image slider with awesome effects throughout by Codepen user Nathan Taylor. Both the images and the colored overlay rotate as the slides change, switching colors as the animation continues.

Simple slider in a minimal style to show off images, content, portfolios, etc. Features a blurred background with the same image being displayed, a...

Simple slider in a minimal style to show off images, content, portfolios, etc. Features a blurred background with the same image being displayed, as well as animated transitions. Snippet in CSS & jQuery by Codepen user Nathan Taylor.

300+ Vector Illustrations Pack + Generator Kit, Only $17: Files In Ai & XD, Sketch, Figma, SVG & PNG Formats, Includes 50+ Premade Scenes & 100+ We...

300+ Vector Illustrations Pack + Generator Kit, Only $17: Files In Ai & XD, Sketch, Figma, SVG & PNG Formats, Includes 50+ Premade Scenes & 100+ Web & Mobile UI Templates, Generator File With All Components & Shapes, Commercial Use

A neat looking effect created using clip-path. Styling elements based on sibling count. Responsiveness depends on first image size. This great look...

A neat looking effect created using clip-path. Styling elements based on sibling count. Responsiveness depends on first image size. This great looking slider utility was created by Michal Niewitala.

A neat looking image slider made in pure CSS, featuring transitions when hovering over an image, and a text box for descriptions, etc. This snippet...

A neat looking image slider made in pure CSS, featuring transitions when hovering over an image, and a text box for descriptions, etc. This snippet has 5 different effects available, and was created by Codepen user fox_hover.

Great snippet for an Image Slider made 100% in CSS, it features buttons for next/previous, as well as navigation buttons & neat looking image trans...

Great snippet for an Image Slider made 100% in CSS, it features buttons for next/previous, as well as navigation buttons & neat looking image transition effects. Created by codepen user Avi Kohn.

Beginner To Advanced Adobe InDesign Course, Only $17: Over 10 Hours Of Content, 80+ Videos, Certificate Of Completion, Clear English Pronunciation,...

Beginner To Advanced Adobe InDesign Course, Only $17: Over 10 Hours Of Content, 80+ Videos, Certificate Of Completion, Clear English Pronunciation, Subtitles In English & Chinese, Beginner To Advanced Levels

Great looking image transition effect by codepen user Nikolay Talanov, this slider snippet creates a neat looking animation for both image and text...

Great looking image transition effect by codepen user Nikolay Talanov, this slider snippet creates a neat looking animation for both image and text transitions by splitting the image into 4 panels, then sliding them to create the complete view. Neat and must see slider effect!

Amazing pure CSS slider created by Codepen user Damian Drygiel, within the slider you can scroll to view larger images or text. A great alternative...

Amazing pure CSS slider created by Codepen user Damian Drygiel, within the slider you can scroll to view larger images or text. A great alternative solution worth taking a look at!

A nice vertical split effect to create amazing photo slideshows

A nice vertical split effect to create amazing photo slideshows

72 Display Fonts Bundle, Only $19: Desktop & Web, OTF, TTF, EOT, SVG, WOFF & WOFF2 File Formats, Includes Sans-Serif, Signature, Serif, Slab-Serif,...

72 Display Fonts Bundle, Only $19: Desktop & Web, OTF, TTF, EOT, SVG, WOFF & WOFF2 File Formats, Includes Sans-Serif, Signature, Serif, Slab-Serif, Rounded Font Styles & More

Free mobile touch slider with lots of transitions and effects, ideal for mobile websites, mobile web apps, and mobile native/hybrid apps. Works in ...

Free mobile touch slider with lots of transitions and effects, ideal for mobile websites, mobile web apps, and mobile native/hybrid apps. Works in iOS, Android, Windows Phone 8 and modern Desktop browsers

A CSS material design based slider useful for timeframes

A CSS material design based slider useful for timeframes

A code experiment created with CSS and jQuery that allows you create an animated slider composed random letters that re-arrange accordingly to what...

A code experiment created with CSS and jQuery that allows you create an animated slider composed random letters that re-arrange accordingly to what you want to show.

Ornate Vector Animal Illustrations Pack, Only $17: Tribal/Ethnic Designs, Layered EPS Vector Files, 4 Color Variants Per Design, Unique & Colorful ...

Ornate Vector Animal Illustrations Pack, Only $17: Tribal/Ethnic Designs, Layered EPS Vector Files, 4 Color Variants Per Design, Unique & Colorful Illustrations

A library of CSS demos that you can use as an alternative to JavaScript. It includes toggles, carousels, games, menus, animations and others, it in...

A library of CSS demos that you can use as an alternative to JavaScript. It includes toggles, carousels, games, menus, animations and others, it includes the option to try the demos included in the page.

This layout contains two smarts features, mainly its presentation as a transitional page within presets images with smooth animation; and secondly ...

This layout contains two smarts features, mainly its presentation as a transitional page within presets images with smooth animation; and secondly an off canvas menu with a direct link to every image.

A beautiful code experiment in CSS for a different set of slideshows supporting multiple layouts. This allows the arrangement of elements in a uniq...

A beautiful code experiment in CSS for a different set of slideshows supporting multiple layouts. This allows the arrangement of elements in a unique way, making your site stand out. It uses 3d transforms and an animation library called anime.js.

31 Packs in 1 Huge Bundle: 200+ Low Poly 3D People Models, 3DS, OBJ, FBX, STL File Formats for VR, AR, Architectural Visualization, and Scale Graph...

31 Packs in 1 Huge Bundle: 200+ Low Poly 3D People Models, 3DS, OBJ, FBX, STL File Formats for VR, AR, Architectural Visualization, and Scale Graphics Projects! Only 29$ (82% Off)

Here is a code experiment by user Robert Borghesi consisting of a fullscreen slider with transitions made with CSS and jQuery. It's made without ca...

Here is a code experiment by user Robert Borghesi consisting of a fullscreen slider with transitions made with CSS and jQuery. It's made without canvas but with CSS and jQuery. The code is not optimized yet, and it's not responsive.