(Squarespace) How to change Event to Carousel format on Desktop

[tuanphan]

To change Event to Carousel Format on Desktop, you can do these.

• Use Event
• Use code to add a Event Carousel
• Use CSS to hide Event (Desktop) – hide Carousel (Mobile)

#1. First, follow this to add an Event Carousel

(Squarespace) How to create an Event Carousel

To create an Event Carousel, like this, you can follow these. [image] #1. First, find Event Page URL In my example, it is: /events-1-2 [image] #2. Next, edit page where you want to create a Event Carousel > Add a Code Block [image] #3. Use this code into Code Block. Remember to change Event Page URL <div data-wm-plugin="collection-carousel" data-source="/events-1-2" data-loop="true" ></div> [image] #4. Install this Carousel Plugin Plugin will give you some code to Code Inject…

#2. Find ID of Event & Event Carousel.

In my example, we will have:

Event

Event Carousel (use Code Block)

#5. Use this code to Custom CSS

/* Hide Event on Desktop */
@media screen and (min-width:768px) {
    section[data-section-id="67f782bffc9ace3909d826cd"] {
        display: none !important;
    }
}
/* Hide Carousel on Mobile */
@media screen and (max-width:767px) {
    section[data-section-id="6821fb2137f33c44da26da17"] {
        display: none !important;
    }
}

#6. Result

Desktop

Mobile