Slick Carousel (Next/Prev Button Placement) - html

Question

Slick Carousel (Next/Prev Button Placement)
<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 :

Answer 1

you should add first this style
First-Step
.slick-prev, .slick-next {
top: auto;
bottom: 25px;
right: 35px;
z-index: 10;
}
Second-Step
.slick-prev {
left: 30px;
}
Third-Step
.slick-next {
right: 30px;
}

Answer 2

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.
Also, 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.
$('#carousel').slick({
arrows: true,
slidesToShow: 3
});
.slick-prev::before, .slick-next::before { color: black; }
.container {
width: 600px;
margin-left: 20px;
}
.carousel {
width: 100%;
border: 1px solid black;
}
.item, .content { height: 200px !important; }
.red { background: red; }
.orange { background: orange; }
.green { background: green; }
.blue { background: blue; }
.carousel-2 .item { margin-right: 15px; }
.carousel-3 .item .content { margin-right: 15px; }
/* Not CSS for carousel, but CSS to get the look I want Slick to manage automatically for me. */
.carousel-4 .item {
float: left;
margin-right: 15px;
width: 180px;
}
.carousel-4 .item:nth-child(3) { margin-right: 0; }
.slick-prev, .slick-next {
top: auto !important;
bottom: 0 !important;
z-index: 10 !important;
opacity: 0.5 !important;
}
.slick-next {
right: 0 !important;
}
.slick-prev {
left: 0 !important;
}
.slick-prev:hover, .slick-next:hover {
opacity: 1 !important;
}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<!-- Standard carousel where Slick calculated the best widths to fit. -->
<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>

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

Fiddle
adding below styling to css will move arrows to location in your image.
/* to align arrow at bottom */
.slick-prev{
left: 10px;
z-index: 1;
top: 100%;
transform: translateY(-100%);
}
.slick-next{
right: 10px;
z-index: 1;
top: 100%;
transform: translateY(-100%);
}
if you want arrow to be opaced by default and visible on hover add below style.
/* to add opacity on default and remove it on hover */
.slick-prev,
.slick-next{
opacity: 0.5;
}
.slick-prev:hover,
.slick-next:hover{
opacity: 1;
}