Important note: Carousel touchpoints don't work correctly in grid elements. This is related to third-party CSS styling.
Do you already know how to create an embedded product block? That’s great! If you don’t, please follow the article regarding this topic.
What’s a carousel?
An item carousel is a visual element on a website that displays a series of products, images, or other content-related items in a rotating carousel format, as displayed on top of this article. It is often used on e-commerce websites to showcase various products in a destined position.
Visitors can navigate through the carousel by clicking on the arrows. It is also possible to slide automatically. The carousel can be an effective way to highlight content and promotions on your website. And the good news is that Datatrics now allows you to create this in a user-friendly and accessible way.
Cool! How can I create these?
It’s quite simple, especially once you already created a product block. If not, you should create that first to continue creating the carousel:
After selecting Carousel, you can select or create a carousel setup. You can find this in the settings page of Templates or in the touchpoint you’re currently working on.
Here, you can define how your carousel should behave and look. The options are self-explanatory, and we recommend trying different options to find out which setup fits the look and feel of your website.
Once you’ve selected the desired setup, you can define the total blocks in the touchpoint. This should be more than the number of blocks that are displayed so the carousel can slide through the content.
JavaScript in carousel
Additionally, you can add your own JS to the carousel. You can do this in the JS section of the template that is attached to the carousel touchpoint. You have to target the shadowRoot of the carousel instead of document because a shadowRoot is its own document.
const carousel = document.querySelector('datatrics-carousel'); carousel.shadowRoot.querySelectorAll('.dt-pricing-format-notification');