Interactive Expandable Card Slider with JavaScript

This is a responsive, interactive, expandable card slider built using HTML, JavaScript, and CSS/CSS3.

When a user clicks on a card, it expands, pushing other cards aside and bringing the selected image and its description into focus.

This interaction enhances user engagement and provides a more immersive browsing experience compared to traditional static image galleries.

How to use it:

1. Structure the slider content within a div with the class “items-wrapper”. Each image and its description reside within a div with the class “item”. The background image is set inline using the style attribute. Within each “item”, a “item-desc” div holds the title (h3) and description (p) for the image.

<div class="items-wrapper">            
  <div class="item" style="background-image: url(1.jpg);">
    <div class="item-desc">
      <h3>Image 1</h3>
      <p>Description 1</p>
    </div>
  </div>
  <div class="item" style="background-image: url(2.jpg);">
    <div class="item-desc">
      <h3>Image 2</h3>
      <p>Description 2</p>
    </div>
  </div>
  <div class="item" style="background-image: url(3.jpg);">
    <div class="item-desc">
      <h3>Image 3</h3>
      <p>Description 3</p>
    </div>
  </div>                    
</div>

2. The requird CSS for the slider . It defines the appearance of the cards (size, background, hover effects), the text overlay (color, positioning, transitions), and the overall layout. You can customize the CSS to match your website’s design and branding.

.item {
  margin: 0 15px; 
  width: 300px; 
  height: 400px;
  display: flex;
  align-items: flex-end;
  background: #343434 no-repeat center center / cover;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}
.item:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}
.item-desc {
  padding: 0 24px 12px;
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transform: translateY(calc(100% - 54px));
  transition: all 0.4s ease-in-out;
}
.item-desc h3 {
  font-size: 15px;
  padding: 20px;
  bottom: 20px;
  transform: translateY(calc(100% - 54px));
  transition: all 0.4s ease-in-out;
  color: #fff;
  text-shadow: #000 1px 1px 1px;
  position: relative;
  z-index: 1;
}
.item-desc p {
  opacity: 0;
  transform: translateY(32px);
  transition: all 0.4s ease-in-out 0.2s;
}
.items-wrapper {
  display: flex;
  transition: transform 0.4s ease-in-out; 
}
.item:hover {
  transform: scale(1.05); 
}
.item.active {
  width: 500px; 
  box-shadow: 12px 40px 40px rgba(19, 19, 19, 0.25);
}
.item.active .item-desc {
  transform: none;
}
.item.active .item-desc p {
  opacity: 1;
  transform: translateY(0);
}
.item.active .item-desc h3 {
  transform: translateY(0);
}
.active {
  border: 2px solid #007BFF; 
}
@media (max-width: 1200px) {
  .item {
      width: calc(33.33% - 20px);
  }
}
@media (max-width: 800px) {
  .item {
      width: calc(50% - 20px); 
  }
}
@media (max-width: 600px) {
  .item {
      width: calc(100% - 20px); 
  }
}

3. The JavaScript code handles the interactive behavior of the slider. It adds an event listener to each card, so when a card is clicked:

• The removeActionClasses function removes the “active” class from all cards.
• The clicked card then gets the “active” class added. This, in combination with the CSS, causes the clicked card to expand.

const ITEMS = document.querySelectorAll('.item')
ITEMS.forEach(item =>{
  item.addEventListener('click',() => {
      removeActionClasses()
      item.classList.add('active')
  })
})
function removeActionClasses(){
    ITEMS.forEach(item =>{
        item.classList.remove('active')
})}

let currentIndex = 0; 
const items = document.querySelectorAll('.item');