Author: | JOHAN69001 |
---|---|
Views Total: | 7,050 views |
Official Page: | Go to website |
Last Update: | March 7, 2020 |
License: | MIT |
Preview:

Description:
Yet another tiny, responsive, touch-enabled 3D carousel component that features autoplay, custom controls, and more.
How to use it:
1. Build the HTML structure for the carousel.
<div class="slider"> <div class="slider__inner"> <!-- Slides --> <div class="slider__item"> <div class="slider__item-container"> <img src="1.jpg" class="slider__item-img"/> <div class="slider__item-datas"> <span>Description 1</span> </div> </div> </div> <div class="slider__item"> <div class="slider__item-container"> <img src="2.jpg" class="slider__item-img"/> <div class="slider__item-datas"> <span>Description 2</span> </div> </div> </div> <div class="slider__item"> <div class="slider__item-container"> <img src="3.jpg" class="slider__item-img"/> <div class="slider__item-datas"> <span>Description 3</span> </div> </div> </div> ... <!-- Slider Controls --> <div class="slider__controls"></div> </div> </div>
2. The necessary CSS styles.
.slider { position: relative; width: 100%; max-width: 100%; } .slider .slider__inner { display: flex; position: relative; align-items: center; max-width: 750px; height: 400px; margin: 0 auto; } .slider .slider__inner .slider__item { position: absolute; height: 150px; width: 150px; opacity: 0; transition: all 0.3s ease-in-out; z-index: -1; pointer-events: none; user-select: none; } .slider .slider__inner .slider__item-trigger-next { left: 15%; transform: translateX(-50%); } .slider .slider__inner .slider__item-trigger-previous { left: 85%; transform: translateX(-50%); } .slider .slider__inner .slider__item-selected { box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); height: 300px; opacity: 1; left: 50%; transform: translateX(-50%); width: 300px; z-index: 2; } .slider .slider__inner .slider__item-previous, .slider .slider__inner .slider__item-next { height: 200px; opacity: 1; width: 200px; z-index: 1; } .slider .slider__inner .slider__item-last, .slider .slider__inner .slider__item-first { opacity: .4; z-index: 0; } .slider .slider__inner .slider__item-previous { left: 30%; transform: translateX(-50%); } .slider .slider__inner .slider__item-next { left: 70%; transform: translateX(-50%); } .slider .slider__inner .slider__item-first { left: 15%; transform: translateX(-50%); } .slider .slider__inner .slider__item-last { left: 85%; transform: translateX(-50%); } .slider .slider__inner .slider__item-container { position: relative; width: 100%; height: 100%; } .slider .slider__inner .slider__item-img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; } .slider .slider__inner .slider__item-datas { position: absolute; bottom: 0; width: 100%; padding: .5rem 0; background-color: rgba(255, 255, 255, 0.75); text-align: center; font-family: 'Arial'; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .slider .slider__controls { display: flex; position: absolute; left: 0; right: 0; width: 100%; justify-content: space-between; align-items: center; } .slider .slider__controls-previous, .slider .slider__controls-next { border: 0; cursor: pointer; font-size: 50px; background-color: transparent; color: rgba(0, 0, 0, 0.75); padding: 0; } .slider .slider__controls-previous:focus, .slider .slider__controls-next:focus { outline: none; }
3. Hide the controls on mobile devices.
@media (max-width: 750px) { .slider .slider__controls { display: none; } }
4. Import the main JavaScript carousel.js into the document.
<script src="carousel.js"></script>
// or import './carousel.js';
5. Initialize the carousel and done.
const myCarousel = new Carousel({ container: document.querySelector('.slider'), items: document.querySelectorAll('.slider__item') });
6. Add custom controls to the carousel. In this example, we’re going to use Font Awesome for the icons.
const myCarousel = new Carousel({ container: document.querySelector('.slider'), items: document.querySelectorAll('.slider__item'), displayControls: true, controlsContainer: document.querySelector('.slider__controls'), textControls: ["<i class='fas fa-chevron-left'></i>", "<i class='fas fa-chevron-right'></i>"] });
7. Config the autoplay behavior.
const myCarousel = new Carousel({ container: document.querySelector('.slider'), items: document.querySelectorAll('.slider__item'), autoplay: true, autoplayTime: 3500 });
cssnya tidak ada yah?