Совет по готовому решению слайдера

210

29 декабря 2021, 00:20

Товарищи, верстаю макет. Дошел до части со слайдером.

Не подскажете возможно есть какой-то похожий готовый вариант слайдера, чтобы сделать его быстро? Знаю только один slick slider. попробовал переделать его, но как-то не вышло расположить на странице только 3 элемента, и засветлить неактивные.

Answer 1

$('.slider').slick({ 
  slidesToShow: 3, 
  centerMode: true, 
  slidesToScroll: 1,                
  dots: false, 
  arrows:false, 
  infinite: true,  
  variableWidth: true,   
  arrows:true, 
  nextArrow: '.project__next', 
  prevArrow: '.project__prev', 
});

#container{ 
	max-width: 950px; 
	margin: 0 auto; 
	max-height: 100%; 
} 
.slider{ 
 max-width:600px;margin: 20px auto; 
}  
.project__next img, .project__prev img{ 
  width:50px; 
  height:20px; 
} 
img { 
  max-width: 130px; 
  width: 100%; 
  border:1px solid #fff; 
 
} 
.slick-slide { 
padding-top:20px; 
opacity: 0; 
pointer-events: none; 
transition: all .3s; 
} 
.slick-center { 
  padding-top:0; 
} 
.slick-center img { 
  max-width:160px; 
} 
.slick-active { 
opacity:.3; 
pointer-events: all; 
} 
.slick-center { 
opacity:1; 
}

<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 id="container"> 
  <div class="row"> 
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12"> 
      <div class="project__prev"> 
        <img src="https://media.msufcu.org/publicsites/publicsite/icons/arrow_left_gray.png"> 
      </div> 
      <div class="slider"> 
 
        <div class="project__foto"> 
          <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt=""> 
 
        </div> 
        <div class="project__foto"> 
          <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt=""> 
 
        </div> 
        <div class="project__foto"> 
          <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt=""> 
 
        </div> 
        <div class="project__foto"> 
          <img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt=""> 
 
        </div> 
 
  </div> 
 
    <div class="project__next"> 
        <img src="http://www.clker.com/cliparts/B/5/C/M/6/i/right-grey-arrow.svg"> 
      </div> 
			</div>

Answer 2

Вариант с использованием Owl Carousel 2

Для плавности используется transform: scale

Пример

$('.owl-carousel').owlCarousel({ 
  loop: true, 
  margin: 0, 
  center: true, 
  dots: false, 
  nav: true, 
  responsiveClass: true, 
  responsive: { 
    0: { 
      items: 3 
    }, 
    600: { 
      items: 3 
    }, 
    1000: { 
      items: 3 
    } 
  } 
})

.owl-carousel { 
  max-width: 600px; 
  margin: 20px auto; 
} 
 
.owl-carousel img { 
  max-width: 130px; 
  width: 100%; 
  display: block; 
  margin: 0 auto; 
} 
 
.owl-item .item { 
  transition: transform .3s ease, opacity .3s ease; 
} 
 
.owl-item.active .item { 
  opacity: .3; 
  transform: scale(.8); 
} 
 
.owl-item.center .item { 
  opacity: 1; 
  transform: scale(1); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> 
 
<div class="owl-carousel owl-theme"> 
  <div class="item"><img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt=""></div> 
  <div class="item"><img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt=""></div> 
  <div class="item"><img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt=""></div> 
  <div class="item"><img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt=""></div> 
</div>