CODEWITHSUNDEEP
javascripthtmlcssreactjs
vxn
vxn

Reputation: 153

How to create a carousel with wider centred-element?

I need to build a carousel with following the design structure:

enter image description here

I have tried multiple libraries: react-slick, owl-slider, brainhubeu's react-carousel & tiny-slider. All of them seem to be designed for fixed width cards/sliders. Once I change dimension for my current active slider, its position gets lost.

Have you seen something similar anywhere? Any examples or ideas are welcomed (preferably React.js solutions).

Upvotes: 1

Views: 2563

Answers (2)

Alex Shchur
Alex Shchur

Reputation: 751

check out this example with slick https://codepen.io/ealigam/pen/yEzQPP

I could bring it to pretty similar look as you describe by slightly adjusting

$('.slider').slick({
  centerMode: true,
  slidesToShow: 3,
  centerPadding: "15%",
  speed: 500
});

Upvotes: 0

elahe karami
elahe karami

Reputation: 693

Use the Owl carousel plugin. You can easily use it and it have instruction for installing using npm. after you created your slider, simply give the owl-item with active class the style you want. I have created the main css and HTML structure for you. just add the needed dependencies to your react project and use it.

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    autoWidth:true,
    center:true,
    nav: false,
    autoplay: true,
    autoplayTimeout: 3000,
    autoplayHoverPause: true,
    responsiveClass:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:4
        },
        1000:{
            items:5
        }
    }
})
body{
  direction: ltr
}

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

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

.owl-carousel .owl-item.active.center .item {
  width: 160px;
  height: 200px;
  background-color: pink;
}
<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.css" />

<style>
.owl-theme .owl-dots .owl-dot span {
  background: #fff;
  border: 1px solid #a5a5a5;
}
.owl-theme .owl-dots .owl-dot.active span, 
.owl-theme .owl-dots .owl-dot:hover span {
  background: #a5a5a5;
}
</style>

<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>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

Upvotes: 2

Related Questions