Multiple Image Slider With Thumbnail in vanilla JS | tinyslide

Tinyslide is a small but responsive and customizable carousel component that allows multiple slides on a slideshow.

multi item slider html css, carousel multiple items responsive codepen, multi item slider jquery codepen, carousel multiple items responsive, bs multiple image slider with thumbnail

jQuery Plugin To Create Image Galleries That Fit In Their Container

How to make use of it:

1. Install and import Tinyslide.

# Yarn
$ yarn add Tinyslide

$ npm i Tinyslide
import Tinyslide from 'Tinyslide';

2. Or import the main JavaScript into the document.

<script src="./dist/index.js"></script>

3. Add your content (images and descriptions) to the library.

<section class="grid tinyslide">
  <div class="grid-item" style="background-image:url('1.jpg');">
    <div class="grid-item-body">
      <span class="item-title">A</span>
      <p class="item-extra">Slide 1</p>
  <div class="grid-item" style="background-image:url('2.jpg');">
    <div class="grid-item-body">
      <span class="item-title">B</span>
      <p class="item-extra">Slide 2</p>
  <div class="grid-item" style="background-image:url('3.jpg');">
    <div class="grid-item-body">
      <span class="item-title">C</span>
      <p class="item-extra">Slide 3</p>

4. Initialize Tinyslide will create carousels of all sections using tinyslide’s CSS class.


5. You can also configure Tinyslide to override certain parameters as follows:

  // options here

6. Typical CSS Styles for Carousel.

.grid {
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
.grid .grid-item {
  width: calc(100% / 3);
  background-size: cover;
  background-position: 50% 50%;
.grid .grid-item-body {
  padding-top: 30%;
  position: relative;
.grid .grid-item-body .item-title {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(255, 255, 255, 0.8);
  display: inline-block;
  font-size: 2em;
  line-height: 1em;
  height: 1em;
  min-width: 0.5em;
  padding: 0.1em 0.5em 0.3em 0.2em;
  border-radius: 3px 3px 100% 3px;
.grid .grid-item-body .item-extra {
  margin: 10px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;

7. Carousel options available.

    "size": 1,
    "speed": "2s",
    "autoplay": "3s",
    "btn-width": "0",

Responsive Multi-slide Carousel In JavaScript, tinyslide Plugin/Github

See Demo And Download

Official Website(ldbglobe): Click Here

This superior jQuery/javascript plugin is developed by ldbglobe. For extra Advanced usage, please go to the official website.

Related Posts


Create Side Sliders Input Values Using Mouse Drag | Pointer Lock

HTML Range Slider is a lightweight library to create side sliders to adjust values easily and precisely by making use of the Pointer Lock API. Side Slider…


Smooth and Lightweight Parallax Scroll Library in Pure Javascript

Lightweight and seamless parallax scrolling library implemented in pure javascript using hardware acceleration for additional performance. Main Features Extremely lightweight with no dependencies A few kilobytes of pure…


How to Convert Form Data to JSON with HTML Forms | FormsJS

FormsJS is a simple-to-use JavaScript library that covers type subject values to JSON in real time. The items containing the data category will be analyzed automatically. It…


A Small jQuery Extension to Convert An Editable HTML Table

Editable Table is a small jQuery extension to convert an editable HTML table for fast data entry and validation. A small jQuery extension to convert a static…

Simple jQuery Plugin for Embedding YouTube Videos As Cover Background is a jQuery plugin built to facilitate YouTube embeds as cover wallpaper using the YouTube Embed API. There is another jQuery Youtube Video Background plugin that…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…