Move arrows in collection slider

[manbru]

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:

  ## Skapa höstmys inomhus!
  
    
❮

    
      
![Collection 1|500x585](upload://bm7VCItcZjPNLSteVBHhCXVBWgK.png)

      
![Collection 2|500x585](upload://bI57VTkullEi5FZ370H2zc5OVcc.png)

      
![Collection 3|500x585](upload://9PZgJQSqiExrpY8jKCv36eaKw8e.png)

      
![Collection 4|500x585](upload://57YT2cj8FiBaUNtleCLBTwBbrlm.png)

      
![Collection 5|500x585](upload://z8tD3j91izs4rsCIVdpLZgd4K8P.png)

      
![Collection 6|500x585](upload://Au8y1P1ChXQZlIPTRcScZJWTfIi.png)

      
![Collection 7|500x585](upload://xpLkAJHNeyxydnoGfubQDKl2atk.png)

      
![Collection 8|500x585](upload://4srRM1a5wZzJMqTo0IexBFQZmTT.png)

      
![Collection 8|500x585](upload://4srRM1a5wZzJMqTo0IexBFQZmTT.png)
 
    

    ❯

  

  
    
    
    
    
    
     
  

[mamun_r]

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.

  ## Skapa höstmys inomhus!
  
    
❮

    
      

        
![Collection 1|500x585](upload://bm7VCItcZjPNLSteVBHhCXVBWgK.png)

        
![Collection 2|500x585](upload://bI57VTkullEi5FZ370H2zc5OVcc.png)

        
![Collection 3|500x585](upload://9PZgJQSqiExrpY8jKCv36eaKw8e.png)

        
![Collection 4|500x585](upload://57YT2cj8FiBaUNtleCLBTwBbrlm.png)

        
![Collection 5|500x585](upload://z8tD3j91izs4rsCIVdpLZgd4K8P.png)

        
![Collection 6|500x585](upload://Au8y1P1ChXQZlIPTRcScZJWTfIi.png)

        
![Collection 7|500x585](upload://xpLkAJHNeyxydnoGfubQDKl2atk.png)

        
![Collection 8|500x585](upload://4srRM1a5wZzJMqTo0IexBFQZmTT.png)

        
![Collection 8|500x585](upload://4srRM1a5wZzJMqTo0IexBFQZmTT.png)
 
      

    

    ❯

  

  
    
    
    
    
    
     
  

[DaisyVo]

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