Swiper function not working on custom liquid section,

Mercado9778
Tourist
6 0 0

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 }}

<style>
 
.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;
}
}
</style>

<!-- Your HTML content for the swiper -->
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide ingredients">
<h2 class="ingredient-detail">BAKUCHIOL</h2>
<p class="ingredient-detail">Firms, strengthens, and improves the appearance of fine lines and wrinkles​</p>
</div>

<div class="swiper-slide ingredients">
<h2 class="ingredient-detail">BAKUCHIOL</h2>
<p class="ingredient-detail">Firms, strengthens, and improves the appearance of fine lines and wrinkles​</p>
</div>
 
<div class="swiper-slide ingredients">
<h2 class="ingredient-detail">BAKUCHIOL</h2>
<p class="ingredient-detail">Firms, strengthens, and improves the appearance of fine lines and wrinkles​</p>
</div>

<div class="swiper-slide ingredients">
<h2 class="ingredient-detail">BAKUCHIOL</h2>
<p class="ingredient-detail">Firms, strengthens, and improves the appearance of fine lines and wrinkles​</p>
</div>
</div>
<div class="swiper-pagination"></div>
</div>


<div class="key-ingredients-container">
<div class="ingredients">
<h2 class="ingredient-detail">BAKUCHIOL</h2>
<p class="ingredient-detail">Firms, strengthens, and improves the appearance of fine lines and wrinkles​</p>
</div>

<div class="ingredients">
<h2 class="ingredient-detail">BAKUCHIOL</h2>
<p class="ingredient-detail">Firms, strengthens, and improves the appearance of fine lines and wrinkles​</p>
</div>
<div class="ingredients">
<h2 class="ingredient-detail">BAKUCHIOL</h2>
<p class="ingredient-detail">Firms, strengthens, and improves the appearance of fine lines and wrinkles​</p>
</div>
<div class="ingredients">
<h2 class="ingredient-detail">BAKUCHIOL</h2>
<p class="ingredient-detail">Firms, strengthens, and improves the appearance of fine lines and wrinkles​</p>
</div>
</div>


{{ '//unpkg.com/swiper/swiper-bundle.min.js' | script_tag }}

<script>
jQuery(document).ready(function($) {
 
var swiper = new Swiper('.mySwiper', {
slidesPerView: 1,
spaceBetween: 10,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
});
</script>

 

 

Reply 1 (1)

PageFly-Richard
Shopify Partner
4206 951 1599

Hi @Mercado9778 

 

This is Richard from PageFly - Shopify Page Builder App

 

You can try putting the link of swiper on top of your file to make sure everything loads properly, or you can change the type of embedded link

To be like this

 

PageFlyRichard_0-1708488152699.png

 

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.