DEV Community

Cover image for Create really fluid loop slide with Tiny-Swiper
WeRDyin
WeRDyin

Posted on

2 2

Create really fluid loop slide with Tiny-Swiper

Slide me πŸ‘‡

Intro

Tiny-Swiper is an ingenious open-source JavaScript Carousel powered by wonderful plugins with native-like experience.

It's lightweight yet extensible. You can import plugins as needed, no more, no less. Just like this:

import Swiper, {
    SwiperPluginLazyload,
    SwiperPluginPagination
} from 'tiny-swiper'
Enter fullscreen mode Exit fullscreen mode

Usage

Installation

# via npm
$ npm install tiny-swiper --save

# via yarn
$ yarn add tiny-swiper
Enter fullscreen mode Exit fullscreen mode

If you prefer CDN

<script src="https://unpkg.com/tiny-swiper@latest"></script>
Enter fullscreen mode Exit fullscreen mode

Initialization

Html code:

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

JavaScript/TypeScript code:

import Swiper, {
    SwiperPluginLazyload,
    SwiperPluginPagination
} from 'tiny-swiper'

Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ])

const swiper = new Swiper(swiperContainer: HTMLElement | string, parameters?: TinySwiperParameters)
Enter fullscreen mode Exit fullscreen mode
  • new Swiper() - initialize swiper with options.
  • Swiper.use() - Register plugin.
  • swiperContainer - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.
  • parameters - object with Swiper parameters. Optional.

You also can load full-featured Tiny-Swiper:

import Swiper from 'tiny-swiper/lib/index.full.js'
Enter fullscreen mode Exit fullscreen mode
<script src="https://unpkg.com/tiny-swiper@latest/lib/index.full.js"></script>
Enter fullscreen mode Exit fullscreen mode

Demos

Default Setup

Loop mode

Pagination

Lazyload

BTW, I'm Planing to create Vue/React/Svelte version of Tiny-Swiper.
You can find me on Github Or Homepage if there are some ideas and suggestions :)

Tutorial image

Next.js Tutorial 2025 - Build a Full Stack Social App

In this 4-hour hands-on tutorial, Codesistency walks you through the process of building a social platform from scratch with Next.js (App Router), React, Prisma ORM, Clerk for authentication, Neon for PostgreSQL hosting, Tailwind CSS, Shadcn UI, and UploadThing for image uploads.

Watch the full video ➑

Top comments (0)

AI Agent image

How to Build an AI Agent with Semantic Kernel (and More!)

Join Developer Advocate Luce Carter for a hands-on tutorial on building an AI-powered dinner recommendation agent. Discover how to integrate Microsoft Semantic Kernel, MongoDB Atlas, C#, and OpenAI for ingredient checks and smart restaurant suggestions.

Watch the video πŸ“Ί

πŸ‘‹ Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay