Ты можешь использовать plugin JS как slick, descГЎrgalo aquГ-: http://kenwheeler.github.io/slick/#go-get-it
способ, в котором ты нуждаешься, - "Center", ты можешь конфигурировать mГЎs события, если asГ - ты это желаешь. TambiГ©n segГєn, если ты используешь или нет framework CSS, ты можешь давать ему mГЎs или меньше стиль, сходный с cards.
//Playing with Ken Wheeler Slick carousel
$('.slider').slick({
//dots: true,
infinite: true,
centerMode: true,
centerPadding: '12%',
slidesToShow: 3,
speed: 500,
responsive: [{
breakpoint: 992,
settings: {
slidesToShow: 1
}
}]
});
/* $(".slick-center").addClass(
"switch");
$(".slick-current").prev().addClass(
"switch");
$('.slider').on('init', function(currentSlide) {
console.log(currentSlide);
$(".slick-center").prev().toggleClass("switch");
}); */
button {
z-index: 102;
}
section {
position: relative;
background: #FAFAFA;
}
.slick-slide {
transform: scale(1);
//opacity: .5;
transition: .3s ease-in-out all;
}
.slick-slide.slick-center {
opacity: 1;
transform: scale(1.08);
}
.switch {
background: #000;
}
.slider {
//max-width: 1024px;
margin: 0 auto;
///border: 1px solid;
position: relative;
&:after,
&:before {
content: "";
background: #FAFAFA;
position: absolute;
top: 0;
height: 100%;
width: 12%;
z-index: 100;
//opacity: .9;
}
&:after {
right: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}
&:before {
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
}
.img-box {
padding: 0;
img {
width: 100%;
}
}
article {
border: 1px solid;
float: left;
margin: 50px 45px;
font-size: 0.8vw;
}
h1 {
font-size: 2vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet" />
<section>
<div class="slider">
<div>
<article>
<div class="col-xs-5 img-box">
<img src="http://placehold.it/400x200" alt="" />
</div>
<div class="col-xs-7">
<h1>1</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quos iusto praesentium, vitae officia similique, quo sapiente obcaecati modi quia laborum facere. Aut odit fugit architecto aperiam nam distinctio, debitis!
</div>
</article>
</div>
<div>
<article>
<div class="col-xs-5 img-box">
<img src="http://placehold.it/400x200" alt="" />
</div>
<div class="col-xs-7">
<h1>2</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quos iusto praesentium, vitae officia similique, quo sapiente obcaecati modi quia laborum facere. Aut odit fugit architecto aperiam nam distinctio, debitis!
</div>
</article>
</div>
<div>
<article>
<div class="col-xs-5 img-box">
<img src="http://placehold.it/400x200" alt="" />
</div>
<div class="col-xs-7">
<h1>3</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quos iusto praesentium, vitae officia similique, quo sapiente obcaecati modi quia laborum facere. Aut odit fugit architecto aperiam nam distinctio, debitis!
</div>
</article>
</div>
<div>
<article>
<div class="col-xs-5 img-box">
<img src="http://placehold.it/400x200" alt="" />
</div>
<div class="col-xs-7">
<h1>4</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quos iusto praesentium, vitae officia similique, quo sapiente obcaecati modi quia laborum facere. Aut odit fugit architecto aperiam nam distinctio, debitis!
</div>
</article>
</div>
</div>
</section>