Improving Slideshow with dots equal to number of blocks created

artchurro91
New Member
1 0 0

I am trying to create a slideshow for when the user adds a block the class "dotsbox" will loop the same number of times.

In other words when a new slide is created a dot navigation is created for that slide

<div class="slider">

  {% for block in section.blocks %}
  <div class="myslider" style="display: block;">
      <div class="txt">
          <h1>Image 1</h1>
          <p>Web Developer<br>Subscribe to my channel for more videos</p>
      </div>
      <img src="{{ block.settings.img | img_url: 'original' }}" style="width: 100%; height: 100%;">
  </div>
  {% endfor %}

  <a class="prev" onclick="plusSlides(-1);">&#10094</a>
  <a class="next" onclick="plusSlides(1);">&#10095</a>

  <div class="dotsbox" style="text-align: center;">
      <span class="dot" onclick="currentSlide(1);"></span>
      <span class="dot" onclick="currentSlide(2);"></span>
  </div>

</div>

 

0 Likes
NerdCurator
Shopify Partner
251 49 84

@artchurro91It would need customization to implement this feature, Unfortunately, there is no simple solution otherwise I will be happy to help you. I would suggest hiring a Shopify expert to assist you OR feel free to contact me.

 

 

Believes in delivering optimizing web solutions | Shopify Partner | Working as a web developer for last 8+ years.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email me: info@nerdcurator.com
0 Likes