Hey there! This is my first time navigating through the slick carousel functionality. I'm currently facing a challenge with adjusting the positioning of the arrow within the slider. My goal is to have the arrow displayed at the top level just like the red arrow shown in the image below, instead of it being positioned on the side of the slider. I've tried various solutions from online forums, but unfortunately, none of them seem to work for me. I attempted to utilize 'position: absolute' and 'top' properties in CSS, but the perfect solution remains elusive. The specific class I am trying to target for this change is carousel_btn_arrow.
HTML
<div class="carousel_wrap">
<div class="carousel_header">
<div class="carousel_title typography__headline4">${Recommendation title}</div>
<div class="carousel_btn_arrow">
</div>
</div>
<div class="carousel_content">
${#Recommendation}
<div class="product_grid_item" data-shortId="${shortId}" data-sku="${sku}">
<a href="${url}">
<div class="product_grid_item_img"><img src=${Image_url}></div>
</a>
<div class="product_grid_item_title typography__text1">${Name}</div>
<div class="product_grid_item_price typography__text4">$${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>"
});
});