How to create slider like this?

Question

I need to create a slider like this:

Active slide is wider then others (not bigger! transform: scale is not suitable here). I used swiper, glidejs but didn't get a result. I want the active slide in the middle always to be wider than the rest.

Here is my bad expierence in codepen

const cardsGlide = new Glide('.my-slider', {
    type: 'slider',
    perView: 3,
    rewind: false,
    focusAt: 'center',
    startAt: '1',
    gap: 18,
}).mount();

.my-slider .glide__slide {
    border: 1px solid black;
    height: 200px;
    max-width: 150px;
}

.my-slider .glide__slide.glide__slide--active {
    max-width: calc(100vw - 360px);
    flex-grow: 1;
}

.card-red {
  background: lightPink;
  height: 100%;
}

.card-blue {
  background: lightBlue;
  height: 100%;
}

.card-green {
  background: lightGreen;
  height: 100%;
}

uiHellen · Accepted Answer

I found a solution: Solution

const owl = $('.owl-carousel');
owl.owlCarousel({
    margin: 10,
    autoWidth: true,
    center: true,
    nav: false,
    responsiveClass: true,
    startPosition: 1,
    responsive:{
        0:{
            items:3
        },
        600:{
            items:3
        },
        1000:{
            items:3
        }
    },
})

body {
  overflow: hidden;
}

.owl-carousel .owl-stage{
  display: flex;
  justify-content: center;
}

.owl-carousel .owl-item .item{
  width: 150px;
  min-height: 200px;
  background-color: lightblue;
}

.owl-carousel .owl-item.active.center .item {
  width: calc(100vw - 330px);
  height: 200px;
  background-color: pink;
}

How to create slider like this?

Answers (1)

Related Questions