FROM CACHE - en_header
Promotion image

Move arrows in collection slider

Move arrows in collection slider

manbru
Pathfinder
129 0 30
‎11-02-2024 01:04 AM

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: 

Skärmavbild 2024-11-02 kl. 05.59.17.png

 

 

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>

 

Labels:
390 Views
0 Likes
Report
Replies 2 (2)

mamun_r
Shopify Partner
2 0 0
‎11-02-2024 02:15 AM

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>


Screenshot 2024-11-02 at 12.03.14 PM.png

271 Views
0 Likes
Report

DaisyVo
Shopify Partner
4402 488 582
‎11-02-2024 04:54 AM

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:

DaisyVo_0-1730537643404.png

 

 

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
329 Views
0 Likes
Report

Community Blog Articles

441285313-63bbef53-3fbe-4e8b-a706-5b37afa90468.png
Automate store operations with Shopify Academy & Coding with Jan

Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...

By Jacqui May 7, 2025
April.jpg
Highlighting our Members of April '25

Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...

By JasonH May 2, 2025
page_thumb_partner.jpg
Enhance a brand’s visibility with Shopify Academy's new SEO resources

Discover opportunities to improve SEO with new guidance available from Shopify’s growth...

By Jacqui May 1, 2025
Terms of Service Privacy Policy