javascript
Posted in
9753
12:07 pm, August 23, 2021
Vanilla JS Center Mode Carousel
Here we have a sliding center mode carousel gallery made with css & vanilla js.
This carousel is good if you need to keep your content up front and in the middle of the display. It can handle images and if you modify it a bit it can work with text and other elements.
Vanilla JS Center Mode Carousel Demo
View Demo Full Screen View Demo New Tab
Vanilla JS Center Mode Carousel Code
HTML
<div class="gallery">
<div class="gallery-container">
<img class="gallery-item gallery-item-1" src="http://fakeimg.pl/300/?text=1" data-index="1">
<img class="gallery-item gallery-item-2" src="http://fakeimg.pl/300/?text=2" data-index="2">
<img class="gallery-item gallery-item-3" src="http://fakeimg.pl/300/?text=3" data-index="3">
<img class="gallery-item gallery-item-4" src="http://fakeimg.pl/300/?text=4" data-index="4">
<img class="gallery-item gallery-item-5" src="http://fakeimg.pl/300/?text=5" data-index="5">
</div>
<div class="gallery-controls"></div>
</div>
CSS
/*
# Vanilla JS Carousel
A sliding gallery made with css & vanilla js
# Demo
https://benkimo6i.github.io/vanilla-js-carousel/
# Getting started
1. Clone or download repo.
2. Open the repo and cd into your project.
3. Open the index.html in your browser or run ```open index.html``` in your terminal.
*/
body {
background:#EEE;
color:#222;
}
.gallery {
width: 100%;
}
.gallery-container {
align-items: center;
display: flex;
height: 400px;
margin: 0 auto;
max-width: 1000px;
position: relative;
}
.gallery-item {
height: 150px;
opacity: 0;
position: absolute;
transition: all 0.3s ease-in-out;
width: 150px;
z-index: 0;
}
.gallery-item-1 {
left: 15%;
opacity: .4;
transform: translateX(-50%);
}
.gallery-item-2,
.gallery-item-4 {
height: 200px;
opacity: 1;
width: 200px;
z-index: 1;
}
.gallery-item-2 {
left: 30%;
transform: translateX(-50%);
}
.gallery-item-3 {
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;
}
.gallery-item-4 {
left: 70%;
transform: translateX(-50%);
}
.gallery-item-5 {
left: 85%;
opacity: .4;
transform: translateX(-50%);
}
.gallery-controls {
display: flex;
justify-content: center;
margin: 30px 0;
}
.gallery-controls button {
background-color: transparent;
border: 0;
cursor: pointer;
font-size: 16px;
margin: 0 20px;
padding: 0 12px;
text-transform: capitalize;
}
.gallery-controls button:focus {
outline: none;
}
.gallery-controls-previous {
position: relative;
}
.gallery-controls-previous::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
left: -10px;
padding: 2px;
position: absolute;
top: 0;
transform: rotate(135deg) translateY(-50%);
transition: left 0.15s ease-in-out;
width: 4px;
}
.gallery-controls-previous:hover::before {
left: -18px;
}
.gallery-controls-next {
position: relative;
}
.gallery-controls-next::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
padding: 2px;
position: absolute;
right: -10px;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
transition: right 0.15s ease-in-out;
width: 4px;
}
.gallery-controls-next:hover::before {
right: -18px;
}
.gallery-nav {
bottom: -15px;
display: flex;
justify-content: center;
list-style: none;
padding: 0;
position: absolute;
width: 100%;
}
.gallery-nav li {
background: #ccc;
border-radius: 50%;
height: 10px;
margin: 0 16px;
width: 10px;
}
.gallery-nav li.gallery-item-selected {
background: #555;
}
Javascript
const galleryContainer = document.querySelector('.gallery-container');
const galleryControlsContainer = document.querySelector('.gallery-controls');
const galleryControls = ['previous', 'add', 'next'];
const galleryItems = document.querySelectorAll('.gallery-item');
class Carousel {
constructor(container, items, controls) {
this.carouselContainer = container;
this.carouselControls = controls;
this.carouselArray = [...items];
}
// Update css classes for gallery
updateGallery() {
this.carouselArray.forEach(el => {
el.classList.remove('gallery-item-1');
el.classList.remove('gallery-item-2');
el.classList.remove('gallery-item-3');
el.classList.remove('gallery-item-4');
el.classList.remove('gallery-item-5');
});
this.carouselArray.slice(0, 5).forEach((el, i) => {
el.classList.add(`gallery-item-${i+1}`);
});
}
// Update the current order of the carouselArray and gallery
setCurrentState(direction) {
if (direction.className == 'gallery-controls-previous') {
this.carouselArray.unshift(this.carouselArray.pop());
} else {
this.carouselArray.push(this.carouselArray.shift());
}
this.updateGallery();
}
// Construct the carousel navigation
// setNav() {
// galleryContainer.appendChild(document.createElement('ul')).className = 'gallery-nav';
// this.carouselArray.forEach(item => {
// const nav = galleryContainer.lastElementChild;
// nav.appendChild(document.createElement('li'));
// });
// }s
// Construct the carousel controls
setControls() {
this.carouselControls.forEach(control => {
galleryControlsContainer.appendChild(document.createElement('button')).className = `gallery-controls-${control}`;
document.querySelector(`.gallery-controls-${control}`).innerText = control;
});
}
// Add a click event listener to trigger setCurrentState method to rearrange carousel
useControls() {
const triggers = [...galleryControlsContainer.childNodes];
triggers.forEach(control => {
control.addEventListener('click', e => {
e.preventDefault();
if (control.className == 'gallery-controls-add') {
const newItem = document.createElement('img');
const latestItem = this.carouselArray.length;
const latestIndex = this.carouselArray.findIndex(item => item.getAttribute('data-index') == this.carouselArray.length)+1;
// Assign the necessary properties for new gallery item
Object.assign(newItem,{
className: 'gallery-item',
src: `http://fakeimg.pl/300/?text=${this.carouselArray.length+1}`
});
newItem.setAttribute('data-index', this.carouselArray.length+1);
// Then add it to the carouselArray and update the gallery
this.carouselArray.splice(latestIndex, 0, newItem);
document.querySelector(`[data-index="${latestItem}"]`).after(newItem);
this.updateGallery();
} else {
this.setCurrentState(control);
}
});
});
}
}
const exampleCarousel = new Carousel(galleryContainer, galleryItems, galleryControls);
exampleCarousel.setControls();
// exampleCarousel.setNav();
exampleCarousel.useControls();
External Link for Vanilla JS Center Mode Carousel
Related Tags
Add Comment
Other Items in javascript
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript