0

карусель

Как сделать так, чтобы 2 боковые картинки были прозрачными (oppacity)?

Соответственно, при прокрутке чтобы все крайние также становились прозрачными. Делала с помощью slick-slider, но почему-то их свойства касательно прозрачности не работают.

1 ответ 1

0

Как то так:

jQuery('#home_latest').slick({
     slidesToShow: 1,
     centerMode: true,
     dots: false,
     centerPadding: '220px',
     prevArrow: "<a href='javascript:void(0)' class='slick_slider_nav slick_slider_nav_left'><img src='assets/img/slider-left-arrow.png'></a>",
     nextArrow: "<a href='javascript:void(0)' class='slick_slider_nav slick_slider_nav_right'><img src='assets/img/slider-right-arrow.png'></a>",
  });
.slick-slide:not(.slick-active) {
   opacity: 0.5;
}

.slick-list {
    overflow: hidden;
    max-width: 600px;
    margin: 0 auto;
}
.slider__block{
background: blue;
}
.slick-track{
    display: flex;
    align-items: flex-start;
    padding-bottom: 40px;
}
.slider {
    position: relative;
    padding: 0px 60px;
}

.slider .slick-arrow{
    position: absolute;
    top: 50%;
    margin: -30px 30px 0px;
    z-index: 10;
    font-size: 0;
    width: 45px;
    height: 83px;
    border: none;
    opacity: 0.65;
}

.slider .slick-arrow:hover {
    opacity: 0.4;
}
.item{

overflow: hidden
position: relative
}
.item img{

width: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>


 <div id="home_latest">
      <div class="item">
         <img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
      </div>
      <div class="item">
         <img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
      </div>
      <div class="item">
         <img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
      </div>
      <div class="item">
         <img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
      </div>
      <div class="item">
         <img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
      </div>
       <div class="item">
         <img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
      </div>
       <div class="item">
         <img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
      </div>
       <div class="item">
         <img src="https://aws1.discourse-cdn.com/codecademy/original/5X/6/6/b/7/66b7df74223daf706a43eb5e01edcddf82da4910.jpeg"/>
      </div>
   </div>
</div>

Вот нужный вам стиль

.slick-slide:not(.slick-active) {
   opacity: 0.5;
}
1
  • Огромное спасибо!!!
    – Лина
    19 окт 2021 в 16:31

Ваш ответ

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

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