Hi it's my first time using slick carousel. I need to change the position of the arrow, so the arrow will be at the top level like the red arrow in the picture, and not at the side of the slider. I try using similar solution I find on the forum, but no one work for me. I trying using position absolute and top properties but can't find the good CSS to fix this issue. I am trying to put the arrow in the class: carousel_btn_arrow

HTML

<div >
    <div >
        <div >${Recommendation title}</div>

        <div >
           
        </div>
    </div>
    <div >
    ${#Recommendation}
        <div  data-shortId="${shortId}" data-sku="${sku}">
            <a href="${url}">
                <div ><img src=${Image_url}></div>
            </a>
            <div >${Name}</div>
            <div >$${Price}</div>
    </div>
    ${/Recommendation}
        </div>
</div>

CSS

.carousel_wrap
{
  display:flex;
  flex-direction: column;
  
}
.carousel_header
{
  display:flex;
  justify-content: space-between;
  margin-bottom: var(--size-250);
}
.carousel_content
{
  display:flex;
  gap: var(--size-125);
}

.product_grid_item
{
  display:flex;
  flex-direction:column;
  gap:var(--size-50);
}
.product_grid_item_img
{
  background: var(--color-grid-item-blend);
}

.product_grid_item_img img 
{
  mix-blend-mode: multiply;
}
.slick-slide
{
  margin-left: var(--size-125);
}


.slick-arrow
{

  cursor: pointer;
  background: transparent;
  border:none;
}
.slick-arrow::before
{
  border: 0;
}
.slick-prev::before
{
  background: url("arrow_prev.svg") no-repeat center;
  margin-right: var(--size);
}
.slick-next::before
{
  background: url("arrow_next.svg") no-repeat center;
}

JS

$(document).ready(function()
{
  $(".carousel_content").slick({
     arrows:true,
     slidesToShow: 3.99,
     slideToScroll: 1,
     infinite: true,
      prevArrow:"<button type='button' class='slick-prev'></button>",
      nextArrow:"<button type='button' class='slick-next'></button>"
  });
  
});

CodePudding user response：

Make yours independent arrows whenever you want them and then use slick dodumentation...

prevArrow: string (html|jQuery selector) | object (DOM node|jQuery object)

So basically just make your arrows, add a specific ID or CLASS to each and then load it to slick as prevArrow: $("specificIDorspecificClass")

CodePudding user response：

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div >
    <div >
        <div >Heading</div>

        <div >
           
        </div>
    </div>

<div >

<div  data-shortId="${shortId}" data-sku="${sku}">
    <a href="${url}">
        <div ><img src="makeup.jpg"></div>
    </a>
    <div >abc</div>
    <div >text</div>
</div>


<div  data-shortId="${shortId}" data-sku="${sku}">
    <a href="${url}">
        <div ><img src="makeup.jpg"></div>
    </a>
    <div >abc</div>
    <div >text</div>
</div>


<div  data-shortId="${shortId}" data-sku="${sku}">
    <a href="${url}">
        <div ><img src="makeup.jpg"></div>
    </a>
    <div >abc</div>
    <div >text</div>
</div>

<div  data-shortId="${shortId}" data-sku="${sku}">
    <a href="${url}">
        <div ><img src="makeup.jpg"></div>
    </a>
    <div >abc</div>
    <div >text</div>
</div>

</div>
</div>

Style

<style>
.carousel_wrap
{
  display:flex;
  flex-direction: column;
  
}
.carousel_header
{
  display:flex;
  justify-content: space-between;
  margin-bottom: var(--size-250);
  padding-bottom: 40px;
}
.carousel_content
{
  display:flex;
  gap: var(--size-125);
}

.product_grid_item
{
  display:flex;
  flex-direction:column;
  gap:var(--size-50);
}
.product_grid_item_img
{
  background: var(--color-grid-item-blend);
  padding: 10px;
}

.product_grid_item_img img 
{
  mix-blend-mode: multiply;
}
.slick-slide
{
  margin-left: var(--size-125);
}

.slick-slide img {
    display: block;
    width: 100%;
}
.slick-arrow
{

  cursor: pointer;
  background: transparent;
  border:none;
}
.slick-arrow::before
{
  border: 0;
}
.slick-prev::before
{
  background: url("arrow_prev.svg") no-repeat center;
  margin-right: var(--size);
}
.slick-next::before
{
  background: url("arrow_next.svg") no-repeat center;
}

.slick-prev.slick-arrow {
    position: absolute;
font-size: 40px;
color: red !important;
right: 90px;
top: -40px;
    left: auto;
}
.slick-next.slick-arrow {
    position: absolute;
    font-size: 40px;
    color: red !important;
    right: 30px;
    top: -40px;
    left: auto;
}
</style>

JS

<script>
$(document).ready(function()
{
  $(".carousel_content").slick({
     arrows:true,
     slidesToShow: 3.99,
     slideToScroll: 1,
     infinite: true,
      prevArrow:"<button type='button' class='slick-prev'> ← </button>",
      nextArrow:"<button type='button' class='slick-next'> → </button>"
  });
  
});

</script>