Back

Technologies:

javascriptjavascript
avatar
Tolerim
19 hours ago

How should the arrows be positioned next to the bullets?

I am working on a slider with both dot pagination and arrow navigation. However, I want the arrows to be placed around the dot navigation like seen in the attached image here.

I have attempted to achieve this with CSS, but it doesn't look good on different screens and keeps shifting. Here is the HTML code for the dot pagination:

    <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span>
<span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 5" aria-current="true"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 6"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 7"></span></div>
And here's the HTML code for the arrow navigation:

<div class="elementor-swiper-button elementor-swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-4710f9d6dce1fd1c3" aria-disabled="false">
<i aria-hidden="true" class="eicon-chevron-left"></i> <span class="elementor-screen-only">Previous</span>
</div>
<div class="elementor-swiper-button elementor-swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-4710f9d6dce1fd1c3" aria-disabled="false">
<i aria-hidden="true" class="eicon-chevron-right"></i> <span class="elementor-screen-only">Next</span>
</div>
I tried creating a JavaScript function, "insertAfter," to place the arrow buttons after the dot pagination, but it did not work:

  <script>
      function insertAfter(referenceNode, newNode) {
        referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
      }
      let elem = document.getElementByClassName("swiper-pagination");
      let div = document.getElementByClassName("elementor-swiper-button-next");
      insertAfter(div, elem);
    </script>
I am new to JavaScript, so I would appreciate any guidance or help in resolving this issue. Thank you.

Answers(1)
avatar
Tolerim
19 hours ago
Verified Answer
To achieve the layout shown in the image, you can wrap the dot navigation and arrow buttons in a container element, and use CSS to position them relative to each other. Here's an example of how you can structure the HTML code: 
<div class="slider-container">
  <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
    <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span>
    <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span>
    <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
    <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span>
    <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 5" aria-current="true"></span>
    <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 6"></span>
    <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 7"></span>
  </div>
  <div class="slider-arrows">
    <div class="elementor-swiper-button elementor-swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-4710f9d6dce1fd1c3" aria-disabled="false">
      <i aria-hidden="true" class="eicon-chevron-left"></i>
      <span class="elementor-screen-only">Previous</span>
    </div>
    <div class="elementor-swiper-button elementor-swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-4710f9d6dce1fd1c3" aria-disabled="false">
      <i aria-hidden="true" class="eicon-chevron-right"></i>
      <span class="elementor-screen-only">Next</span>
    </div>
  </div>
</div>
Then, you can style the container and its child elements with CSS as follows: 
.slider-container {
  position: relative;
  /* Set the width and height of your slider here */
  width: 100%;
  height: 500px;
}

.slider-arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* Adjust the left and right values to position the arrows */
  left: -50px;
  right: -50px;
  /* Center the arrows vertically */
  display: flex;
  align-items: center;
}

.elementor-swiper-button-prev,
.elementor-swiper-button-next {
  /* Add hover styles for the arrows here */
}

.swiper-pagination {
  /* Optional: hide the dot navigation if not needed */
  display: none;
}

.swiper-pagination + .elementor-swiper-button-next {
  margin-left: 15px;
}

.swiper-pagination + .elementor-swiper-button-prev {
  margin-right: 15px;
}
This will position the arrow buttons around the dot navigation, with the dot navigation hidden by default (you can show it by removing the display: none rule on the .swiper-pagination element). You can adjust the left and right values on the .slider-arrows element to position the arrows as needed.
;