Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Slick Slider: How to set arrows inside and not outside?

Hi I found slick slider to be really easy to use and decided it to use on a website i've been working on: http://smallbuildersdev.esy.es/

You can see the slider on the bottom of the page. I have just one problem. I want the arrows to be inside the slider and not outside of it (that also means that when the content slides in, it slides from an invisible hard edge). Is there a way to put the arrows inside so i can occupy the full width of the page (so no hard edges when sliding will be visible)? Here is the link to slick slider: http://kenwheeler.github.io/slick/

If you also look at the slick slider webpage the left/right arrows are outside the slider.

like image 531
Angel Angeles III Avatar asked Apr 23 '15 04:04

Angel Angeles III


People also ask

How do you change the arrow on slick slider?

How do you put arrows in CodePen slick slider? CodePen Embed – slick-arrows. $(function(){ $("#slider"). slick({ speed: 1000, dots: true, prevArrow: '<button class="slide-arrow prev-arrow"></button>', nextArrow: '<button class="slide-arrow next-arrow"></button>' }); });

How do you show half slide on slick slider?

You can do something like this slidesToShow: 3.5 and make infinite: false . The right most slide will be showing half. The infinite: false does the trick, been banging my head on this for a while! I just tried this and it shows half of the previous slide, not next,.


1 Answers

add z-index: 1 to the answer by UberKaeL to force prev-arrow display on top of image

.slick-prev {
  left: 100px;
  background: red; /*to notice it, is white*/
  z-index: 1;
}
.slick-next {
  right: 100px;
  background: red; /*to notice it, is white*/
}
like image 188
Panoman Avatar answered Sep 20 '22 07:09

Panoman