Slick Slider: How to set arrows inside and out?

Question

Hi, I found a smooth slider that would be very easy to use and decided to use it on the website I was working on: http://smallbuildersdev.esy.es/

You can see the slider at the bottom of the page. I have only one problem. I want the arrows to be inside the slider, and not outside it (this also means that when the content goes into the slide, it slides from an invisible hard edge). Is there a way to put the arrows inward so that I can occupy the entire width of the page (so that the hard edges when visible will be visible)? Here is the link to the slider: http://kenwheeler.imtqy.com/slick/

If you also look at the webpage of the slippery slider, the left / right arrows are outside the slider.

Answer 1

I think you can just change the CSS style.

.slick-prev { left: 100px; background: red; /*to notice it, is white*/ } .slick-next { right: 100px; background: red; /*to notice it, is white*/ } 

Answer 2

add z-index: 1 to UberKaeL's answer to force the prev-arrow display over the 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*/ } 

Answer 3

I tried the accepted answer and found that my css did not take effect. I have finished using! It is important that the arrow becomes visible ...

 .slick-prev { left: 100px !important; background-color: red !important; /*to notice it, is white*/ } .slick-next { right: 100px !important; background-color: red !important; /*to notice it, is white*/ }