Solved

Dots pagination product slider

theophile7411
Tourist
12 0 2

Hi ! I'm trying to create a "dots style" pagination for my product media slider. I have successfully implemented code that creates as many dots as I have media items. However, I'm struggling to assign the "active" class to the dot that corresponds to the currently displayed photo. I've spent a lot of time trying to solve this issue but haven't been successful.

 

Here's the code located in my product-media-gallery.liquid file:

 

// create as many dots as I have media //

{% for slide in (1..media_count) %}

 

// Give "active" to the dot's currently displayed photo"
<span class="slider-dot {% if slide == ??? %} active {% endif %}"></span>


{% endfor %}

 

So, I need to replace the ??? with a code that determines the currently displayed slide. I believe I have identified the appropriate JavaScript code, but I'm struggling to integrate it into liquid. 

 

I think its "this.currentPage" located in Global.js

 

Can you please help me with this issue ?

 

Thanks !

 

 

Accepted Solution (1)

dmwwebartisan
Shopify Partner
12267 2545 3687

This is an accepted solution.

@theophile7411 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 4 (4)

dmwwebartisan
Shopify Partner
12267 2545 3687

This is an accepted solution.

@theophile7411 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
theophile7411
Tourist
12 0 2

any clue ?

pacorisas
Shopify Partner
2 0 0

Hey!!

Any solution to this?? I'm stuck exactly in the same place...