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

Angel Angeles III picture Angel Angeles III · Apr 23, 2015 · Viewed 22.7k times · Source

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.

Answer

Panoman picture Panoman · Jul 28, 2016

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*/
}