Move arrows in collection slider

manbru · ‎11-02-2024

Hello,

I've a collection slider with a custom liquid block.

And I really have this problem with trying to move the arrows outside of the collection images.

the page it's on: https://r1vex.myshopify.com/pages/om-oss

As you can see right now there inside of the images an it makes them hard to see, so where I've drawn the arrows is where I would want them to be:

Here is the full code for the custom liquid block:

<div class="collection-slider">
  <h2>Skapa höstmys inomhus!</h2>
  <div class="slider-container">
    <div class="slider-arrow left-arrow">&#10094;</div>
    <div class="slider">
      <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/5_ba97f18e-26b7-4bbf-b028-dfc06894ff9c.png?v=1730519747" alt="Collection 1" class="slide">
      <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/7_d84005af-659c-42b0-9bd4-f04d057aaf3e.png?v=1730519747" alt="Collection 2" class="slide">
      <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/6_cec2d046-1c4b-4b83-bc6a-d1fe506a2d63.png?v=1730519747" alt="Collection 3" class="slide">
      <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/8_f4f8fc91-67ca-4561-8bba-5b77ff420fe7.png?v=1730519747" alt="Collection 4" class="slide">
      <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/1_59c68eb5-c5c7-4bca-a431-c0b1881c40a1.png?v=1730517321" alt="Collection 5" class="slide">
      <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/2_6ded63c1-837e-4243-9d65-cb4225a2ef62.png?v=1730517320" alt="Collection 6" class="slide">
      <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/4_6f827925-8ede-4eea-8732-e9db6dc11116.png?v=1730517321" alt="Collection 7" class="slide">
      <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/3_b60361ea-db0d-40cc-ab7a-fba4fdb4de4e.png?v=1730517320" alt="Collection 8" class="slide">
      <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/3_b60361ea-db0d-40cc-ab7a-fba4fdb4de4e.png?v=1730517320" alt="Collection 9" class="slide"> <!-- Extra bild för att få fler dots -->
    </div>
    <div class="slider-arrow right-arrow">&#10095;</div>
  </div>
  <div class="slider-dots">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span> <!-- Ny dot för den extra bilden -->
  </div>
</div>

<style>
.collection-slider {
  text-align: center;
  margin: 20px 0;
}
.collection-slider h2 {
  font-size: 24px;
  margin-bottom: 20px;
}
.slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}
.slider {
  display: flex;
  gap: 20px;
  transition: transform 0.5s ease;
}
.slide {
  width: calc(100% / 3.3); /* Anpassar sig för att visa 3 bilder samtidigt */
}
.slider-arrow {
  font-size: 24px;
  color: #444444;
  cursor: pointer;
  padding: 10px;
  z-index: 10;
  position: relative;
}
.left-arrow {
  margin-right: -30px; /* Flyttar pilen utanför vänstra sidan */
}
.right-arrow {
  margin-left: -30px; /* Flyttar pilen utanför högra sidan */
}
.slider-dots {
  text-align: center;
  margin-top: 15px;
}
.dot {
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: lightgray;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}
</style>

<script>
  const slider = document.querySelector('.slider');
  const dots = document.querySelectorAll('.dot');
  let currentIndex = 0;
  const totalSlides = dots.length;

  function showSlide(index) {
    const slideWidth = slider.querySelector('.slide').offsetWidth + 20; // inkl. mellanrum
    slider.style.transform = `translateX(-${index * slideWidth}px)`;
    dots.forEach(dot => dot.style.backgroundColor = 'lightgray');
    dots[index].style.backgroundColor = 'gray';
  }

  document.querySelector('.left-arrow').addEventListener('click', () => {
    currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalSlides - 1;
    showSlide(currentIndex);
  });

  document.querySelector('.right-arrow').addEventListener('click', () => {
    currentIndex = (currentIndex < totalSlides - 1) ? currentIndex + 1 : 0;
    showSlide(currentIndex);
  });

  dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      currentIndex = index;
      showSlide(currentIndex);
    });
  });

  showSlide(currentIndex); // Startposition
</script>

mamun_r · ‎11-02-2024

I've wrapped .slider with .slider-track, added overflow: hidden to .slider-track, and removed the negative margins from .left-arrow and .right-arrow. Additionally, I’ve added some media queries to improve the mobile view.

<div class="collection-slider">
  <h2>Skapa höstmys inomhus!</h2>
  <div class="slider-container">
    <div class="slider-arrow left-arrow">&#10094;</div>
    <div class="slider-track">
      <div class="slider">
        <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/5_ba97f18e-26b7-4bbf-b028-dfc06894ff9c.png?v=1730519747" alt="Collection 1" class="slide">
        <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/7_d84005af-659c-42b0-9bd4-f04d057aaf3e.png?v=1730519747" alt="Collection 2" class="slide">
        <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/6_cec2d046-1c4b-4b83-bc6a-d1fe506a2d63.png?v=1730519747" alt="Collection 3" class="slide">
        <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/8_f4f8fc91-67ca-4561-8bba-5b77ff420fe7.png?v=1730519747" alt="Collection 4" class="slide">
        <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/1_59c68eb5-c5c7-4bca-a431-c0b1881c40a1.png?v=1730517321" alt="Collection 5" class="slide">
        <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/2_6ded63c1-837e-4243-9d65-cb4225a2ef62.png?v=1730517320" alt="Collection 6" class="slide">
        <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/4_6f827925-8ede-4eea-8732-e9db6dc11116.png?v=1730517321" alt="Collection 7" class="slide">
        <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/3_b60361ea-db0d-40cc-ab7a-fba4fdb4de4e.png?v=1730517320" alt="Collection 8" class="slide">
        <img src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/3_b60361ea-db0d-40cc-ab7a-fba4fdb4de4e.png?v=1730517320" alt="Collection 9" class="slide"> <!-- Extra bild för att få fler dots -->
      </div>
    </div>
    <div class="slider-arrow right-arrow">&#10095;</div>
  </div>
  <div class="slider-dots">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span> <!-- Ny dot för den extra bilden -->
  </div>
</div>

<style>
.collection-slider {
  text-align: center;
  margin: 20px 0;
}
.collection-slider h2 {
  font-size: 24px;
  margin-bottom: 20px;
}
.slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  position: relative;
}
.slider-track {
  overflow: hidden;
}
.slider {
  display: flex;
  gap: 20px;
  transition: transform 0.5s ease;
}
.slide {
  width: calc(100% / 3.3); /* Anpassar sig för att visa 3 bilder samtidigt */
}
.slider-arrow {
  font-size: 24px;
  color: #444444;
  cursor: pointer;
  padding: 10px;
  z-index: 10;
  position: relative;
}
.slider-dots {
  text-align: center;
  margin-top: 15px;
}
.dot {
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: lightgray;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

/* För mobilanpassning */
@media (max-width: 768px) {
  .slide {
    width: calc(100% / 1.5); /* Visa färre bilder på mobil */
  }
}
</style>

<script>
  const slider = document.querySelector('.slider');
  const dots = document.querySelectorAll('.dot');
  let currentIndex = 0;
  const totalSlides = dots.length;

  function showSlide(index) {
    const slideWidth = slider.querySelector('.slide').offsetWidth + 20; // inkl. mellanrum
    slider.style.transform = `translateX(-${index * slideWidth}px)`;
    dots.forEach(dot => dot.style.backgroundColor = 'lightgray');
    dots[index].style.backgroundColor = 'gray';
  }

  document.querySelector('.left-arrow').addEventListener('click', () => {
    currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalSlides - 1;
    showSlide(currentIndex);
  });

  document.querySelector('.right-arrow').addEventListener('click', () => {
    currentIndex = (currentIndex < totalSlides - 1) ? currentIndex + 1 : 0;
    showSlide(currentIndex);
  });

  dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      currentIndex = index;
      showSlide(currentIndex);
    });
  });

  showSlide(currentIndex); // Startposition
</script>

DaisyVo · ‎11-02-2024

Hi @manbru ,

You can add this code in Custom CSS to do it:

@media screen and (min-width: 768px){
    .slider-arrow.left-arrow {
        position: absolute !important;
        left: -40px !important;
    }
    .slider-container {
        position: unset !important;
    }
    .collection-slider {
        position: relative !important;
    }
    .slider-arrow.right-arrow {
        position: absolute !important;
        right: -30px !important;
    }
}

You can refer to this screenshot here:

Hope this can help!

Best,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

Move arrows in collection slider

Move arrows in collection slider

Community Blog Articles