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.
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>' }); });
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,.
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*/
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With