OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to position navigation circles on each slide within a slideshow component?

  • Thread starter Thread starter gggggggggggggg
  • Start date Start date
G

gggggggggggggg

Guest
I'm working on a slideshow component where I need to implement navigation circles directly on each slide. Currently, I have navigation arrows (prev and next buttons) working correctly, but I'm struggling to integrate navigation circles that correspond to each slide.

Here's a simplified version of my HTML structure:

Code:
<div class="slideshow">
  <!-- Previous and Next buttons -->
  <button class="slideshow__prev">Previous</button>
  <button class="slideshow__next">Next</button>

  <!-- Slides -->
  <div class="slide">
    <img src="slide1.jpg" alt="Slide 1">
    <!-- Need navigation circle here -->
  </div>
  
  <div class="slide">
    <img src="slide2.jpg" alt="Slide 2">
    <!-- Need navigation circle here -->
  </div>

  <!-- Additional slides... -->

  <!-- Navigation circles -->
  <div class="slider-circles">
    <!-- How to dynamically generate circles for each slide? -->
    <button class="slider-circle active"></button>
    <button class="slider-circle"></button>
    <!-- Additional buttons dynamically generated... -->
  </div>
</div>

Requirements:

  • Each slide should have a corresponding navigation circle that indicates its position in the slideshow.
  • Navigation circles should update dynamically when navigating through slides using the prev and next buttons.

I've attempted various approaches, but I'm unsure how to integrate this functionality seamlessly. Any insights or code examples would be greatly appreciated!

Here is how it looks now:

Here is how it looks now

Here is how it should look:

Here is how it should look

I tried everything that I can imagine, including moving the 'div' container of the circles, playing with the styles, but nothing helped me. :)

<p>I'm working on a slideshow component where I need to implement navigation circles directly on each slide. Currently, I have navigation arrows (<code>prev</code> and <code>next</code> buttons) working correctly, but I'm struggling to integrate navigation circles that correspond to each slide.</p>
<p>Here's a simplified version of my HTML structure:</p>
<pre><code><div class="slideshow">
<!-- Previous and Next buttons -->
<button class="slideshow__prev">Previous</button>
<button class="slideshow__next">Next</button>

<!-- Slides -->
<div class="slide">
<img src="slide1.jpg" alt="Slide 1">
<!-- Need navigation circle here -->
</div>

<div class="slide">
<img src="slide2.jpg" alt="Slide 2">
<!-- Need navigation circle here -->
</div>

<!-- Additional slides... -->

<!-- Navigation circles -->
<div class="slider-circles">
<!-- How to dynamically generate circles for each slide? -->
<button class="slider-circle active"></button>
<button class="slider-circle"></button>
<!-- Additional buttons dynamically generated... -->
</div>
</div>

</code></pre>
<p>Requirements:</p>
<ul>
<li>Each slide should have a corresponding navigation circle that indicates its position in the slideshow.</li>
<li>Navigation circles should update dynamically when navigating through slides using the prev and next buttons.</li>
</ul>
<p>I've attempted various approaches, but I'm unsure how to integrate this functionality seamlessly. Any insights or code examples would be greatly appreciated!</p>
<p>Here is how it looks now:</p>
<p><a href="https://i.sstatic.net/2fw3xrJM.png" rel="nofollow noreferrer">Here is how it looks now</a></p>
<p>Here is how it should look:</p>
<p><a href="https://i.sstatic.net/jta1zEHF.png" rel="nofollow noreferrer">Here is how it should look</a></p>
<p>I tried everything that I can imagine, including moving the 'div' container of the circles, playing with the styles, but nothing helped me. :)</p>
 
Top