CODEWITHSUNDEEP
jqueryhtmlcss
StarFlow
StarFlow

Reputation: 1

How to make the central image is larger than the other in Owl Carousel?

How to get Owl Carousel so that it looks like this:

Imgur Image

I tried but it does not work.

Here is the working file will be very grateful for the help.

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  center: true,
  navText: [
    "<i class='fa fa-caret-left'></i>",
    "<i class='fa fa-caret-right'></i>"
  ],
  autoplay: true,
  autoplayHoverPause: true,
  items:5
})
.carousel-wrap {
  margin: 90px auto;
  padding: 0 5%;
  width: 80%;
  position: relative;
}
.owl-carousel .item {
  position: relative; /* fix blank or flashing items on carousel */
  z-index: 100; /* fix blank or flashing items on carousel */
  -webkit-backface-visibility: hidden; /* fix blank or flashing items on carousel */
}
.owl-nav > div {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}
.owl-nav i {
  font-size: 52px;
}
.owl-nav .owl-prev {
  left: -30px;
}
.owl-nav .owl-next {
  right: -30px;
}


.owl-item {
	width: 100px!important;
}	
.owl-item.center {
	width: 150px!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>

<div class="carousel-wrap">
  <div class="owl-carousel">
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
    <div class="item"><img src="http://placehold.it/150x150"></div>
  </div>
</div>

enter link description here

Upvotes: 0

Views: 4163

Answers (1)

yogesh rathod
yogesh rathod

Reputation: 310

Modify your JS:

$('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    center: true,
    navText: [
      "<i class='fa fa-caret-left'></i>",
      "<i class='fa fa-caret-right'></i>"
    ],
    autoplay: true,
    autoWidth:true,
    autoplayHoverPause: true,
    items:5
});

Add this CSS:

.owl-carousel .owl-stage-outer { padding: 5% 0; }

.owl-item img {
  transition: 0.45s;
}

.owl-item.center img {transform: scale(1.2); }

Remove this CSS:

.owl-item.center {
    width: 150px!important;
}

Note: adjust center image left right space as per your need

Upvotes: 1

Related Questions