slick slider как убрать border

339

13 марта 2017, 10:53

Возможно ли в примере ниже убрать border-right у 1 и 2, 4 и 5. То есть, чтобы везде был border одинаковой ширины, а сейчас границы по центру в 2 раза. толще чем по бокам

Пример:

jQuery(".regular").slick({ 
  dots: true, 
  infinite: true, 
  slidesToShow: 3, 
  slidesToScroll: 3 
});

html, 
body { 
  margin: 0; 
  padding: 0; 
} 
 
* { 
  box-sizing: border-box; 
} 
 
.slider { 
  width: 50%; 
  margin: 100px auto; 
} 
 
.slick-slide { 
  border: 5px solid red; 
  border-right: 5px solid green; 
} 
 
.slick-slide img { 
  width: 100%; 
} 
 
.slick-prev:before, 
.slick-next:before { 
  color: black; 
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
 
<section class="regular slider"> 
  <div> 
    <img src="http://placehold.it/350x300?text=1"> 
  </div> 
  <div> 
    <img src="http://placehold.it/350x300?text=2"> 
  </div> 
  <div> 
    <img src="http://placehold.it/350x300?text=3"> 
  </div> 
  <div> 
    <img src="http://placehold.it/350x300?text=4"> 
  </div> 
  <div> 
    <img src="http://placehold.it/350x300?text=5"> 
  </div> 
  <div> 
    <img src="http://placehold.it/350x300?text=6"> 
  </div> 
</section>

Пример на jsfiddle

Испробовал кучу методов. Например:

.slick-list{
  width: calc(100% + 2px);
  padding-left: 0;
  padding-right: 1px;
}

Но это все костыли, которые ломаются при адаптиве.

Answer 1

Через :nth-child можно убрать:

jQuery(".regular").slick({ 
  dots: true, 
  infinite: true, 
  slidesToShow: 3, 
  slidesToScroll: 3 
});

html, 
body { 
  margin: 0; 
  padding: 0; 
} 
 
* { 
  box-sizing: border-box; 
} 
 
.slider { 
  width: 50%; 
  margin: 100px auto; 
} 
 
.slick-slide { 
  border: 5px solid red; 
  border-right: 5px solid green; 
} 
 
/* Выделяем каждый 3 элемента и убираем границу у первого из них и второго */ 
.slick-slide:nth-child(3n+1), .slick-slide:nth-child(3n+2) {border-right: 0} 
 
.slick-slide img { 
  width: 100%; 
} 
 
.slick-prev:before, 
.slick-next:before { 
  color: black; 
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
 
<section class="regular slider"> 
  <div> 
    <img src="http://placehold.it/350x300?text=1"> 
  </div> 
  <div> 
    <img src="http://placehold.it/350x300?text=2"> 
  </div> 
  <div> 
    <img src="http://placehold.it/350x300?text=3"> 
  </div> 
  <div> 
    <img src="http://placehold.it/350x300?text=4"> 
  </div> 
  <div> 
    <img src="http://placehold.it/350x300?text=5"> 
  </div> 
  <div> 
    <img src="http://placehold.it/350x300?text=6"> 
  </div> 
</section>

Но выглядит всё равно кривовато, из за неровной работы скрипта

Answer 2

Для первого слайда используется стиль .slick-slide.slick-current.slick-active. Казалось бы, хорошо, найдем способ найти и .slick-last. Однако добавление .slick-slide.slick-current.slick-active {border-left:10px solid red} решает проблему только частично - слайды расползаются по вертикали и не только, появляется "кривизна".

К сожалению, скрипт вообще плохо работает с расчетом границ, на что имеются жалобы.

43 подтвержденных и до сих пор не закрытых бага говорят обо всем.

Поэтому мой ответ такой: используйте другой скрипт, отвечающий вашим потребностям.

Answer 3

На будущее, если кто-то столкнулся с проблемой, сможет взять стили с этого сайта (вдруг еще что-нибудь придумаю). Для этого нужно просмотреть не меньше 5 товаров, тогда появится блок "Вы недавно смотрели"( или блок Похожие товары) Суть: убрать правый бордер у всех, задать паддинги и ширину на обертку(как в первом посте), а так же задать фиксированную ширину через импортант для каждого элемента слайда. Это я еще давно придумывал эвристическим подходом, а вчера хотел найти универсальное решение. Буду рад другим решениям. Спасибо, Yuri и labris, за ваши мнения и предложения.