CODEWITHSUNDEEP
htmlcsssliderpositionslick.js
Rony Cohen
Rony Cohen

Reputation: 63

slick arrow at top of slide CSS

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 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>"
  });
  
});

enter image description here

Upvotes: 0

Views: 661

Answers (2)

Jaswinder Kaur
Jaswinder Kaur

Reputation: 1634

<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 class="carousel_wrap">
    <div class="carousel_header">
        <div class="carousel_title typography__headline4">Heading</div>

        <div class="carousel_btn_arrow">
           
        </div>
    </div>

<div class="carousel_content">

<div class="product_grid_item" data-shortId="${shortId}" data-sku="${sku}">
    <a href="${url}">
        <div class="product_grid_item_img"><img src="makeup.jpg"></div>
    </a>
    <div class="product_grid_item_title typography__text1">abc</div>
    <div class="product_grid_item_price typography__text4">text</div>
</div>


<div class="product_grid_item" data-shortId="${shortId}" data-sku="${sku}">
    <a href="${url}">
        <div class="product_grid_item_img"><img src="makeup.jpg"></div>
    </a>
    <div class="product_grid_item_title typography__text1">abc</div>
    <div class="product_grid_item_price typography__text4">text</div>
</div>


<div class="product_grid_item" data-shortId="${shortId}" data-sku="${sku}">
    <a href="${url}">
        <div class="product_grid_item_img"><img src="makeup.jpg"></div>
    </a>
    <div class="product_grid_item_title typography__text1">abc</div>
    <div class="product_grid_item_price typography__text4">text</div>
</div>

<div class="product_grid_item" data-shortId="${shortId}" data-sku="${sku}">
    <a href="${url}">
        <div class="product_grid_item_img"><img src="makeup.jpg"></div>
    </a>
    <div class="product_grid_item_title typography__text1">abc</div>
    <div class="product_grid_item_price typography__text4">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>

Upvotes: 2

Every Screamer
Every Screamer

Reputation: 530

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")

Upvotes: 2

Related Questions