Vertical slick carousel arrows

Question

I am trying to make a vertical slick carousel but I have no idea how to make the arrows vertical as well

$('.offer-page-carousel').slick({
    arrows: true,
    vertical: true,
    prevArrow: false,
    verticalSwiping: true,
});

I only want nextArrow to be displayed. Currently the arrow is on the right of the carousel (as default). I want it to be at the bottom of the carousel. Any way I can achieve this with CSS?

Answer 1

This will position the default slick navigation vertically. You'll need to play with the sizes if your buttons are larger:

.slick-slider {
  margin-top: 60px;
}

.slick-prev, .slick-next {
  left: 50%;
  transform: translate(-50%, 0) rotate(90deg);
}
.slick-next {
  top: unset;
  bottom: -30px;
}
.slick-prev {
  top: -30px;
}

Working fiddle here.