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
$ 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>
  </div>
  <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>
  </div>
  <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>
    </div>
  </div>
</section>

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

window.Tinyslide.AutomaticBuild();

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

window.Tinyslide.Build('.my-custom-class',{
  // 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.

window.Tinyslide.Build('.my-custom-class',{
  style:{
    "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.