0

Всем привет. Использую slick slider. Там 4 продукта в ряд. Надо, чтобы при наведении на каждый - появлялясь тенюшка. Вот пример

HTML

<div class="container">
  <div class="slider">
    <div class="js-slider">
      <div class="slider-item">
        <p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
      </div>
      <div class="slider-item">
        <p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
      </div>
      <div class="slider-item">
        <p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
      </div>
      <div class="slider-item">
        <p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
      </div>
      <div class="slider-item">
        <p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
      </div>
    </div>
  </div>
</div>
<div class="slider-item slider-item--example">
  <p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
</div>

CSS

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.slider {
  border-left: 1px solid #808080;
  margin-left: -1px;
}
.slider-item {
  padding: 10px;
  border: 1px solid #808080;
  margin-left: -1px;
}
.slider-item:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.9);
}
.slider-item.slider-item--example {
  width: 100%;
  max-width: 400px;
  margin: 50px auto;
}
.slick-list {
  padding: 10px 0;
}

JS

$(document).ready(function(){
  $('.js-slider').slick({
      slidesToShow: 4,
      slidesToScroll: 1
  })
})

Как сделать так, чтобы была видна тенюшка внизу и по бокам у боковых элементов?

Внизу пример того как должна появляться тень. Заранее спасибо!

1 ответ 1

0

Там блок со слайдами перекрывается overflow: hidden, можно сделать такими фиксами например, но проблема у слика в том, что он мало слайдов рисует слева и справа, и "прыгает" на зацикливании.

$(document).ready(function(){
  $('.js-slider').slick({
      slidesToShow: 4,
      slidesToScroll: 1
  })
})
* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.slider {
  border-left: 1px solid #808080;
  margin-left: -1px;
}
.slider-item {
  padding: 10px;
  border: 1px solid #808080;
  margin-left: -1px;
}
.slider-item:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.9);
}
.slider-item.slider-item--example {
  width: 100%;
  max-width: 400px;
  margin: 50px auto;
}
.slick-list {
  padding: 10px 0;
}

.slick-initialized {
  padding: 10px;
  margin: -10px;
}
.slick-list {
  overflow: visible !important;
}
.slick-slide {
  opacity: 0;
}
.slick-active {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css
">
<div class="container">
  <div class="slider">
    <div class="js-slider">
      <div class="slider-item">
        <p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
      </div>
      <div class="slider-item">
        <p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
      </div>
      <div class="slider-item">
        <p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
      </div>
      <div class="slider-item">
        <p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
      </div>
      <div class="slider-item">
        <p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
      </div>
    </div>
  </div>
</div>
<div class="slider-item slider-item--example">
  <p>lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, quod quibusdam porro veritatis sed dolores totam! Quam explicabo, laboriosam atque, perferendis ipsam vitae minima veniam repellendus est natus hic corrupti.</p>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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