Swiper function not working on custom liquid section,

Mercado9778 · February 19, 2024, 7:47am

Hi,

I am trying to add a simple swiper function to the ingredient images section, and tried to get everything done in custom liquid on the admin page. I tried many different styles to see if that works, but none of them has worked. Is that because I am using the custom liquid section rather than creating an actual section by"edit code"?

What I am trying to create is adding the swiper function for the image when the page is opened by phone screen and keep the images line up on the same row when opened on desktop screen.

It would be great if I can do that by what I am currently doing since I am new to coding and don’t have much knowledge. I would greatly appreciated if anyone could identify the error or explain me the way to solve this!

Here is the entire code of the section:

{{ ‘//unpkg.com/swiper/swiper-bundle.min.css’ | stylesheet_tag }}

.ingredients-statement { text-align: center; } .key-ingredients-container { display: flex; } .ingredients { box-sizing: border-box; padding: 10px; } .ingredient-img { width: 100%; height: auto; } .ingredient-detail { text-align: center; } h1, h2 { font-family: 'aperto', sans-serif; .star-ingredients { font-size: 60px; } h2 { font-size: 40px; } .swiper-container { display: none; } @media screen and (max-width: 640px) { .key-ingredients-container { display: none; } .swiper-container { display: block; } .swiper-slide { text-align: center; } .ingredient-img { max-width: 100%; height: auto; } .ingredient-detail { margin: 10px 0; } }