1

Столкнулся с проблемой при стилизации слайдера slick:выпадает правая кнопка-стрелочка прокрутки вниз под слайдер как на картинке, при том что она position:absolute введите сюда описание изображения

html:

<div class="cat_slider">

          <div>
            Slide 1
          </div>
          <div>
            Slide 2
          </div>
          <div>
            Slide 3
          </div>
          <div>
            Slide 4
          </div>
          <div>
            Slide 5
          </div>
          <div>
            Slide 6
          </div>
          <div>
            Slide 7
          </div>
          <div>
            Slide 8
          </div>

        </div>

css:

.cat_slider{
  position:relative!important;
  margin-top:70px;
}
.slick-arrow{
  position:absolute;
  border-style:none;
  background-color:#fff;
  outline:none!important;
  height:148px!important;
  width:4%!important;
  z-index:1000;
  margin:0!important;
}
.slick-next{
  right:-3%!important;
  margin:0!important;
}
.slick-prev{
  left:-3%!important;
  margin:0!important;
}

.slick-slide{
  height:148px!important;
  margin-right:15px;
  margin-left:15px;
  border:1px solid var(--divider-color);
}

jquery:

$('.cat_slider').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  prevArrow:'<button class="slick-prev"><i class="material-icons">keyboard_arrow_left</i></button>',
  nextArrow:'<button class="slick-next"><i class="material-icons">keyboard_arrow_right</i></button>'
});
2
  • Приходится переписывать принудительно через important переписывать стили классов slick чтобы работало как надо 12 дек 2018 в 7:48
  • проблема не в этом! кнопка не стоит как надо 12 дек 2018 в 8:10

1 ответ 1

2

Добавить позиционирование по высоте top:

$('.cat_slider').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  prevArrow:'<button class="slick-prev"><i class="material-icons">keyboard_arrow_left</i></button>',
  nextArrow:'<button class="slick-next"><i class="material-icons">keyboard_arrow_right</i></button>'
});
.cat_slider{
  position:relative !important;
  margin-top:70px;
}
.slick-arrow{
  position:absolute;
  border-style:none;
  background-color:#fff;
  outline:none!important;
  height:148px!important;
  z-index:1000;
  margin:0!important;
  
  top:50%;
  transform:translateY(-50%);
  z-index: 100;
  cursor: pointer;
}
.slick-next{
  right:-3%!important;
  margin:0!important;
}
.slick-prev{
  left:-3%!important;
  margin:0!important;
}

.slick-slide{
  height:148px!important;
  margin-right:15px;
  margin-left:15px;
  border:1px solid var(--divider-color);
}
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>  
  
  <div class="cat_slider">

    <div>
      Slide 1
    </div>
    <div>
      Slide 2
    </div>
    <div>
      Slide 3
    </div>
    <div>
      Slide 4
    </div>
    <div>
      Slide 5
    </div>
    <div>
      Slide 6
    </div>
    <div>
      Slide 7
    </div>
    <div>
      Slide 8
    </div>

  </div>

p.s: Убрала ширину в 4% для кнопок, google material icons как-то себя ведут не адекватно при absolute, рекомендую использовать fontawesome! Лично у меня с ним постоянные проблемы))

1
  • Спасибо!Помогло 12 дек 2018 в 8:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.