Responsive Multi-slide Carousel In JavaScript – Tinyslide

Preview:

Description:

A tiny yet responsive and customizable carousel component that allows multiple slides on a slide view.

How to use it:

1. Install and import the 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 & descriptions) to the carousel.

<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 the Tinyslide. This will generate carousels from all sections with the CSS class of tinyslide.

window.Tinyslide.AutomaticBuild();

5. You can also initialize the Tinyslide by passing specific selectors as follows:

window.Tinyslide.Build('.my-custom-class',{
  // options here
})

6. The example CSS styles for the 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. Available carousel options.

window.Tinyslide.Build('.my-custom-class',{
  style:{
    "size": 1,
    "speed": "2s",
    "autoplay": "3s",
    "btn-width": "0",
  }
})