Press "Enter" to skip to content

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

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *