Swiffy Slider examples

Get inspiration from a number of responsive examples as seen in real websites.

Most examples are using Bootstrap 5 for slider content, but could be any markup and CSS.

Image carousel

Simple image carousel with even sized images

  • ...
  • ...
  • ...
  • ...
  • ...
  • ...

Image carousel

Simple image carousel with uneven sized images, ratios and lazy loading

This example uses .slider-item-ratio to make the images fill the slide. Set object-fit: contain on the image to make the image scale within the slide box and become fully visible

Indicators is in 2 versions - one for larger displays and one for small displays uising Bootstrap respsonsive utilities. But shows how to use indicator options on the .slider-indicators element directly

  • ...
  • ...
  • ...
  • ...

Stories

Combining grid, images and text content to create visual appealing content

  • Why use this slider

    Swiffy Slider Benefits

    Super fast lightweight slider and carousel with amazing touch support and user experience.

    Super simple setup using just markup and few powerful configuration options

    Remember to check out on mobile

    ... ...
  • ... ...

    Dreaming about cars

    Vintage cars from another era

    First, there’s the design of the car itself. Classic cars were created very much in an analogue world where designers used pencil and paper to create elegant shapes and flowing lines that would just not be possible on the computer-based design software used by modern car designers.

    Handcrafted like good code

  • ...

    The Aston Martin DB5

    The Aston Martin DB5 is a British luxury grand tourer (GT) that was made by Aston Martin and designed by the Italian coachbuilder Carrozzeria Touring Superleggera.

Articles

Card based design with shadows using photos, description and button

  • ...

    See the world

    Some quick example text to build on the card title and make up the bulk of the card's content.

  • ...

    Tranquil locations far away

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere
  • ...

    Road trip in the wilderness

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere
  • ...

    To the hidden lake side

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere
  • ...

    Up, up, up in the Air

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere
  • ...

    A climbers birds view

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Go somewhere

Visual statements

Slides with no gap and different background colors to make statements stand out. Shows indicators outside on mobile only

Benefits from using our products

I'm baby edison bulb etsy franzen fixie messenger bag ugh hell of farm-to-table brunch. Tumeric hashtag meh pabst organic next level meggings whatever hella listicle.

Join the webinar this week

Hoodie iceland literally slow-carb kombucha kickstarter cloud bread irony aesthetic wayfarers prism kinfolk occupy pok pok lo-fi. Letterpress crucifix distillery bespoke austin coloring book photo booth 8-bit.

Understand what sliders can do for your business

Gochujang edison bulb church-key gentrify you probably haven't heard of them, artisan selfies. Live-edge tousled wolf cronut shaman.

Benefits from using our products

I'm baby edison bulb etsy franzen fixie messenger bag ugh hell of farm-to-table brunch. Tumeric hashtag meh pabst organic next level meggings whatever hella listicle.

Join the webinar this week

I'm baby edison bulb etsy franzen fixie messenger bag ugh hell of farm-to-table brunch. Tumeric hashtag meh pabst organic next level meggings whatever hella listicle.

Understand what sliders can do for your business

I'm baby edison bulb etsy franzen fixie messenger bag ugh hell of farm-to-table brunch. Tumeric hashtag meh pabst organic next level meggings whatever hella listicle.

News ticker

Autoplaying thin carousel with just text in different colors and sizes. Indicators moved using inline style on the slider-indicators element

Today @ 11:12

Never seen before: Billion people taking clickbait on SoMe every hour. People

Today @ 10:02

BREAKING Great and superfast websites can be made with simple technology. Religion

Today @ 09:48

Google, Facebook and Apple announces they will respect privacy. Corp BS

Today @ 09:32

Style Get fantastic lunch recipes for developers working at home. Awesome

Today @ 09:28

Just released: an even more fat-ass framework that can render markup Music

Today @ 08:08

Swiffy Slider is very nice, neat and fast. Simple

Logo band

Fixed height logos in a band with autoplay. Using ratios with custom ratio size. The swiffy-slider instance has padding and shadow to elevate the band. Navigation is always visible and placed outside the slide container

...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...

Product slider

Simple and neat product slider using product photos with a background color that is the design element

  • ...

    LeBron 18

    $200

    Basketball Shoes

  • ...

    Nike Air Vapormax 2021 FK

    $200

    Women's Shoes

  • ...

    Nike Air Force 1 Fontanka

    $110

    Women's Shoes

  • ...

    Kyrie 7

    $130

    Basketball Shoes

  • ...

    Kyrie 7

    $110

    Big Kids' Basketball Shoes

  • ...

    Nike Air Max 90 Premium

    $130

    Men's Shoes

Product slider 2

Product slider revealing next product and emphasizing each product using shadows. Navigation is placed outside with expand so they flow outside the content area on larger displays

  • ...
    LeBron 18

    Basketball Shoes

    $200
  • ...
    Nike Air Vapormax 2021 FK

    Women's Shoes

    $200
  • ...
    Nike Air Force 1 Fontanka

    Women's Shoes

    $110
  • ...
    Kyrie 7

    Basketball Shoes

    $130
  • ...
    Kyrie 7

    Big Kids' Basketball Shoes

    $110
  • ...
    Nike Air Max 90 Premium

    Men's Shoes

    $130
  • ...
    LeBron 18

    Basketball Shoes

    $200
  • ...
    Nike Air Vapormax 2021 FK

    Women's Shoes

    $200
  • ...
    Nike Air Force 1 Fontanka

    Women's Shoes

    $110

Product gallery

Show thumbs and navigate to large image and clicking large image will open dialog with slider. Using 3 sliders - one for thumbs, one for the product image and one inside the modal.

Uses Bootstrap modal, helpers and utilities, but the concept would be the same in other frameworks

This is to show the possibilities using sliders in different ways, same content and different context and layouts. JS is inline just to show the principle but should of course be optimized

  • ...
  • ...
  • ...
  • ...
  • ...
  • ...
  • ...
  • ...
  • ...
  • ...
  • ...
  • ...

Nike ZoomX Invincible Run Flyknit

★★★★☆
Men's Road Running Shoes
CT2228-700

$180
New in

Get after those long runs with lightweight, responsive foam that delivers a soft feel with every step. A Flyknit upper gives your foot breathability where you need it most and secure fit you can depend on.

  • Shown: Volt/Barely Volt/Black
  • Style: CT2228-700

Select size

Going to the movies....

Full width section with background image with a gradient overlay. 3 slider instances in full width with 6 items per page.

Trending

...
...
...
...
...
...
...
...
...
...
...
...

Documentary

...
...
...
...
...
...
...
...
...
...
...
...

Just released

...
...
...
...
...
...
...
...
...
...
...
...

Full screen image carousel

An image slider put inside a modal (In this case a full screen Bootstrap modal).

Javascript is used to set focus on the first slide when the modal is opened and the slides have tabindex="-1 " to support keyboard navigation

Click the image to see the carousel in full width and navigate with keyboard arrows

(Press ESC to close fullscreen view - or tap the image)

...