CODEWITHSUNDEEP
javascriptcsscarousel
Jason
Jason

Reputation: 171

Vertical slick carousel arrows

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?

Upvotes: 3

Views: 14879

Answers (2)

Jaime Montoya
Jaime Montoya

Reputation: 7701

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:

enter image description here

Upvotes: 0

tao
tao

Reputation: 90013

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.

Upvotes: 1

Related Questions