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

Adjusting the Styling and Position of Slide Indicator Circles in Shopify Section (Liquid)

  • Thread starter Thread starter Uber Batko
  • Start date Start date
U

Uber Batko

Guest
I'm working on a Shopify website and I'm having trouble with the styling and positioning of the slide indicator circles that show which slide the user is on. Below is the relevant Liquid and CSS code for the slider controls:

Liquid Code:

Code:
{%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}
  <button
    type="button"
    class="slider-button slider-button--prev"
    name="previous"
    aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
    aria-controls="Slider-{{ section.id }}"
  >
    {% render 'icon-caret' %}
  </button>
  
  <div class="slider-counter slider-counter--circles">
    <div class="slideshow__control-wrapper">
      {%- for block in section.blocks -%}
        <button
          class="slider-counter__link slider-counter__link--circle link"
          aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
          aria-controls="Slider-{{ section.id }}"
        >
          <span class="circle"></span>
        </button>
      {%- endfor -%}
    </div>
  </div>
{%- endif -%}

CSS Code:

Code:
.slider-counter--circles {
  background-color: none;
}

.slider-counter--circles .slideshow__control-wrapper {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.slider-counter__link--circle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.slider-counter__link--circle .circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #000;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 0.3s, border-color 0.3s;
}

.slider-counter__link--circle.active .circle {
  background-color: #000;
  border-color: #000;
}

Current Issue:

The slide indicator circles are not styled or positioned as desired.

How it looks now:

This is how it looks now

How it should look:

This is how it should look

Question:

How can I adjust the CSS or Liquid code to achieve the desired styling and position for the slide indicator circles? Any suggestions or guidance would be greatly appreciated.

<p>I'm working on a Shopify website and I'm having trouble with the styling and positioning of the slide indicator circles that show which slide the user is on. Below is the relevant Liquid and CSS code for the slider controls:</p>
<p>Liquid Code:</p>
<pre><code>
{%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}
<button
type="button"
class="slider-button slider-button--prev"
name="previous"
aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
aria-controls="Slider-{{ section.id }}"
>
{% render 'icon-caret' %}
</button>

<div class="slider-counter slider-counter--circles">
<div class="slideshow__control-wrapper">
{%- for block in section.blocks -%}
<button
class="slider-counter__link slider-counter__link--circle link"
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
aria-controls="Slider-{{ section.id }}"
>
<span class="circle"></span>
</button>
{%- endfor -%}
</div>
</div>
{%- endif -%}


</code></pre>
<p>CSS Code:</p>
<pre><code>
.slider-counter--circles {
background-color: none;
}

.slider-counter--circles .slideshow__control-wrapper {
display: flex;
justify-content: center;
gap: 10px;
}

.slider-counter__link--circle {
background: none;
border: none;
padding: 0;
cursor: pointer;
}

.slider-counter__link--circle .circle {
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid #000;
border-radius: 50%;
background-color: transparent;
transition: background-color 0.3s, border-color 0.3s;
}

.slider-counter__link--circle.active .circle {
background-color: #000;
border-color: #000;
}


</code></pre>
<p>Current Issue:</p>
<p>The slide indicator circles are not styled or positioned as desired.</p>
<p>How it looks now:</p>
<p><a href="https://i.sstatic.net/nNolDwPN.png" rel="nofollow noreferrer">This is how it looks now</a></p>
<p>How it should look:</p>
<p><a href="https://i.sstatic.net/pBcMT5Uf.png" rel="nofollow noreferrer">This is how it should look</a></p>
<p>Question:</p>
<p>How can I adjust the CSS or Liquid code to achieve the desired styling and position for the slide indicator circles? Any suggestions or guidance would be greatly appreciated.</p>
 

Latest posts

Top