Slick Carousel (Next/Prev Button Placement)

Ask Time：2020-02-07T23:00:38 Author：greenboxgoolu

<div class="container">
    <div id="carousel" class="carousel">
        <div class="item red"></div>
        <div class="item orange"></div>
        <div class="item green"></div>
        <div class="item blue"></div>
    </div>
</div>

$('#carousel').slick({
    arrows: true,
    slidesToShow: 3
});

Link

Everything is working fine , but i wanted to ask is that how do i make the Next Previous button are placed in the box instead of outside (see example below)

What I wanted: The Button is on the image (like the example below) - DONE + a button with opacity when user hover

Example :

screenshot

Author:greenboxgoolu，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/60115944/slick-carousel-next-prev-button-placement

thingEvery :

Everybody else already gave you the right answer, but since there seems to be something wrong with JS Fiddle right now, I'll throw the code in a snippet for you. \n\nAlso, due to the way these snippets include the CSS, the Slick styles were overwriting the ones added here. So I had to make them !important.\n\n\r\n\r\n$('#carousel').slick({\r\n arrows: true,\r\n slidesToShow: 3\r\n});\r\n.slick-prev::before, .slick-next::before { color: black; }\r\n\r\n.container {\r\n width: 600px;\r\n margin-left: 20px;\r\n}\r\n\r\n.carousel {\r\n width: 100%;\r\n border: 1px solid black;\r\n}\r\n.item, .content { height: 200px !important; }\r\n\r\n.red { background: red; }\r\n.orange { background: orange; }\r\n.green { background: green; }\r\n.blue { background: blue; }\r\n\r\n.carousel-2 .item { margin-right: 15px; }\r\n\r\n.carousel-3 .item .content { margin-right: 15px; }\r\n\r\n/* Not CSS for carousel, but CSS to get the look I want Slick to manage automatically for me. */\r\n.carousel-4 .item {\r\n float: left;\r\n margin-right: 15px;\r\n width: 180px;\r\n}\r\n.carousel-4 .item:nth-child(3) { margin-right: 0; }\r\n\r\n.slick-prev, .slick-next {\r\n top: auto !important;\r\n bottom: 0 !important;\r\n z-index: 10 !important;\r\n opacity: 0.5 !important;\r\n}\r\n.slick-next {\r\n right: 0 !important;\r\n}\r\n.slick-prev {\r\n left: 0 !important;\r\n}\r\n\r\n.slick-prev:hover, .slick-next:hover {\r\n opacity: 1 !important;\r\n}\r\n<link href=\"https://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css\" rel=\"stylesheet\"/>\r\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>\r\n<script src=\"http://kenwheeler.github.io/slick/slick/slick.js\"></script>\r\n\r\n<div class=\"container\">\r\n <div id=\"carousel\" class=\"carousel\">\r\n <div class=\"item red\"></div>\r\n <div class=\"item orange\"></div>\r\n <div class=\"item green\"></div>\r\n <div class=\"item blue\"></div>\r\n </div>\r\n</div>",

2020-02-11T03:03:37

Rutger van Dijk :

Looking at your sketch, add the following CSS classes:\n\n.slick-prev {\n left: 10px;\n top: 180px;\n z-index: 1000;\n}\n\n.slick-next {\n right: 10px;\n top: 180px;\n z-index: 1000;\n}\n\n\nFor the opacity on hover add:\n\n.slick-prev:hover, .slick-next:hover {\n opacity: 0.5;\n}\n",

2020-02-10T08:16:57

ZPiDER :

.container .slick-arrow {\n top: auto;\n bottom: 0;\n z-index: 100;\n opacity: 0;\n}\n.container .slick-arrow:hover {\n opacity: 1;\n}\n.container .slick-prev {\n left: 0;\n}\n.container .slick-next {\n right: 0;\n}\n",

2020-02-10T08:21:21

JRoss :

Add the following to your css. You can change the 0 for bottom, right and left to whatever offset you'd like.\n\n.slick-prev, .slick-next {\n top:auto;\n bottom: 0;\n z-index: 10;\n}\n.slick-next {\n right: 0;\n}\n.slick-prev {\n left: 0;\n}\n\n.slick-prev:hover, .slick-next:hover {\n opacity:0.5;\n}\n\n\nIf you want to remove the extra space where the buttons used to be then change .container to the this:\n\n.container { width: 570px; }\n",

2020-02-10T17:16:56

Md Tofajjal Hossen :

you should add first this style\nFirst-Step\n.slick-prev, .slick-next {\n top: auto;\n bottom: 25px;\n right: 35px;\n z-index: 10;\n}\n\nSecond-Step\n.slick-prev {\n left: 30px;\n \n}\n\nThird-Step\n.slick-next {\n right: 30px;\n}\n",

2020-02-10T17:35:38

Slick Carousel (Next/Prev Button Placement)