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?

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?

• javascript
• css
• carousel

Share Improve this question Follow asked Dec 15, 2017 at 3:54 JasonJason 17122 gold badges55 silver badges1414 bronze badges 4

• have you tried like this jsfiddle/devpull/q827wb0a – Udhay Titus Commented Dec 15, 2017 at 3:56
• @UdhayTitus The carousel is already scrolling vertically... it's just the arrows – Jason Commented Dec 15, 2017 at 3:57
• prevArrow is a string (html|jQuery selector) not a bool type – Eddie Commented Dec 15, 2017 at 3:58
• @Jason do you have any fiddle..??? – Radiant Ahmed Commented Dec 15, 2017 at 4:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

Use arrows: false. For example, this is how I wrote my JavaScript code to get rid of those left and right arrows that Slick carousel provides by default:

$('#slickcarousel').slick({
    arrows: false,
    autoplay: true,
    autoplaySpeed: 5000
});

Then you can build your own arrows and style them with CSS. This is how I specified the arrows in my JavaScript code:

$('.left').click(function(){
    $('#slickcarousel').slick('slickPrev');
});
$('.right').click(function(){
    $('#slickcarousel').slick('slickNext');
});

The CSS code:

#testimonials .left{cursor:pointer;margin:9px 0 16px 16px}
#testimonials .right{cursor:pointer;margin:9px 16px 24px 0;float:right}

The HTML for the buttons:

<img class="left" src="/img/arrowleft.png" width="32" height="31" alt="Arrow left button">
<img class="right" src="/img/arrowright.png" width="32" height="31" alt="Arrow right button">

The result: