sliderglidejs

How to create slider like this?

I need to create a slider like this: slider

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%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.theme.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.core.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/glide.js"></script>
<div class="my-slider glide">
      <div class="glide__track" data-glide-el="track">
              <ul class="glide__slides">
                  <li class="glide__slide main">
                       <div class="card-red"></div>
                   </li>
                   <li class="glide__slide">
                       <div class="card-blue"></div>
                    </li>
                   <li class="glide__slide">
                      <div class="card-green"></div>
                   </li>
                  <li class="glide__slide">
                      <div class="card-red"></div>
                   </li>
                <li class="glide__slide">
                      <div class="card-blue"></div>
                   </li>
              </ul>
    </div>

<!--    <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--prev" data-glide-dir="<">prev</button>
        <button class="glide__arrow glide__arrow--next" data-glide-dir=">">next</button>
    </div> -->
</div>

Solution

  • 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;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<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"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>