Click List Carousel Items – Show Autoplay Video

Suppose you have a List Carousel with 3 items: Monet Goode, Emmett Marsh, and Eleanor Parks.

• When hover on image > Fade color
• When click on image > Show an autoplay video in Lightbox

You can follow these steps to achieve the effect

#1. In Not Linked > Create 3 Blank Pages with Name/URL

• Monet Goode – /monet-goode
• Emmett Marsh – /emmett-marsh
• Eleanor Parks – /eleanor-parks

#2. Edit 3 pages > Add Classic Section > Add Video Blocks > Enable Autoplay Option

(If your site doesn’t support Classic Sections, you can add sections as you normally would)

#3. Enable List Carousel Item Buttons

#4. Edit List Items (Monet Goode, Emmett Marsh, Eleanor)

#5. Paste these URLs

•  #lightbox_monet-goode
• #lightbox_emmett-marsh
• #lightbox_eleanor-parks

and make sure the Open Link in New Tab is disabled

#6. Install Lightbox Plugin
The plugin will ask you to add some code to Code Injection – Footer, something like this.

#7. Add this code to Individual Page Header Code Injection (the page where you use List Carousel).

• The code will fade the image on hover, so users can know the carousel image is clickable
• The code will turn the Button Link to the Image Link, and then the image will be clickable.

<style>
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .list-item-content__button-container {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}
  li.list-item:hover>div:first-child {
    /* transform: scale(1.2); */
    transition: all 0.3s ease;
}
li.list-item>div:first-child {
        transition: all 0.3s ease;
}
.user-items-list-carousel__slides li.list-item.user-items-list-carousel__slide:hover {
  opacity: 0.5 !important;
  }
</style>