Author: | ldbglobe |
---|---|
Views Total: | 401 views |
Official Page: | Go to website |
Last Update: | October 9, 2021 |
License: | MIT |
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", } })