Slick Carousel (Размещение кнопки «Следующая / Предыдущая»)

Question

Slick Carousel (Размещение кнопки «Далее / Назад»)

<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
});

Ссылка

Все работает нормально, но я хотел спросить, как это сделать кнопка «Следующий предыдущий» помещается в поле, а не снаружи (см. пример ниже)

Что я хотел: кнопка на изображении (как в примере ниже) - ГОТОВО + кнопка с непрозрачностью при наведении курсора пользователя

Пример:

Answer 1

Вы должны сначала добавить этот стиль

Первый шаг

.slick-prev, .slick-next {
    top: auto;
    bottom: 25px;
    right: 35px;
    z-index: 10;
}

Второй шаг

.slick-prev {
    left: 30px;

}

Третий шаг

.slick-next {
    right: 30px;
}

Answer 2

Все остальные уже дали вам правильный ответ, но, поскольку, похоже, что-то не так с JS Fiddle, я сейчас скину код в фрагмент для вас.

Кроме того, из-за того, что эти фрагменты включают CSS, стили Slick заменяли добавленные здесь. Поэтому я должен был сделать их !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

Добавьте следующее к вашему css. Вы можете изменить 0 для нижнего, правого и левого смещений на любое желаемое смещение.

.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;
}

Если вы хотите удалить лишнее пространство, где были кнопки, то измените .container на это:

.container { width: 570px; }

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

Глядя на свой эскиз, добавьте следующие CSS классы:

.slick-prev {
  left: 10px;
  top: 180px;
  z-index: 1000;
}

.slick-next {
  right: 10px;
  top: 180px;
  z-index: 1000;
}

Для прозрачности при наведении добавьте:

.slick-prev:hover, .slick-next:hover {
  opacity: 0.5;
}

Answer 6

Fiddle

добавление нижнего стиля к css приведет к перемещению стрелок в местоположение на вашем изображении.

/* 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%);
}

, если вы хотите, чтобы стрелка по умолчанию убиралась и видимый при наведении добавить стиль ниже.

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