Owl Carousel: How to change size of fourth item

owl-carousel width
owl carousel width issues when first load
owl carousel center image bigger
owl-carousel item custom width
owl carousel options
owl carousel set active slide
owl-carousel stage padding codepen
destroy owl-carousel

I'll start with a picture to further show what I mean by changing the size of the fourth .item class :

How the final carousel should look This is the half working code I currently have:

<!DOCTYPE html>
<html lang="en">

<head>

  <!-- head -->
  <meta charset="utf-8">
  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Basic usage demo">
  <meta name="author" content="David Deutsch">
  <title>
    Basic Demo | Owl Carousel | 2.3.4
  </title>

  <!-- Stylesheets -->
  <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="../assets/css/docs.theme.min.css">

  <!-- Owl Stylesheets -->
  <link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

  <!-- Favicons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="../assets/ico/favicon.png">
  <link rel="shortcut icon" href="favicon.ico">

  <!-- Yeah i know js should not be in header. Its required for demos.-->

  <!-- javascript -->
  <script src="../assets/vendors/jquery.min.js"></script>
  <script src="../assets/owlcarousel/owl.carousel.js"></script>

</head>

<body onload="SizeChange()">
  <!--  Demos -->
  <section id="demos">
    <div class="row">
      <div class="large-12 columns">
        <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>
          //script
          $(document).ready(function () {
            var owl = $('.owl-carousel');
            owl.owlCarousel({
              margin: 10,
              nav: true,
              loop: true,
              responsive: {
                0: {
                  items: 1
                },
                600: {
                  items: 3
                },
                1000: {
                  items: 5
                }
              }
            })
          })

          $(window).click(SizeChange)
          function SizeChange(){
            let ActiveDivs = []
            $("div").filter(".active").each(function (index, value) {
              ActiveDivs.push(value)
            })
            let lengthOfArray = ActiveDivs.length-2
            $(ActiveDivs).find('.item').animate({"height":"150px"}, 100);
            $(ActiveDivs[lengthOfArray]).find('.item').animate({"height":"300px"}, 100);
          }

          //End script
        </script>
        <!-- vendors -->
        <script src="../assets/vendors/highlight.js"></script>
        <script src="../assets/js/app.js"></script>
</body>

</html>

So what I did was take the divs with the .active class (there are 5 at a time), taking the fourth div and adding CSS to it, by that making only the fourth one bigger.

Making the fourth div in the carousel to change the height on page load and on any interaction with the carousel is what I want it to do.

Hope I got it clear enough, first post on Stack Overflow :)

owlCarousel has events you can use to track movement.

So basically you have to track next.owl.carousel or prev.owl.carousel and update your SizeChange() function by adding or subtracting one to your current highlighted div position.

Edit: events even pass Information in the event.object. The current active Item is stored in event.item.index.

Owl Carousel, .your-item { transform: scale(1.1); transform-origin: 50% 50%; }. should fix your problem. Obviously, you want to change scale factor from 1.1 to whatever makes​  Use width style on elements to get the result you want. If using with infinity loop add option 'items' more than 1. It all depends on the width of your content. Setup. $('.owl-carousel').owlCarousel({ margin:10, loop:true, autoWidth:true, items:4}) html.

Finally solved it! Thanks for the help, love this website :D I know its not groundbreaking, but it feels like a huge success to me :D

What I was trying to do is taking the fourth .item in the carousel and change the CSS of it. By that getting closer to a result looking like this:

Crousel Design
The Code

I worked in 'OwlCarousel2-2.3.4/docs/demos/basic', copy and paste it there, and you should be fine

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Basic usage demo">
  <meta name="author" content="David Deutsch">
  <title>Basic Demo | Owl Carousel | 2.3.4</title>
  <!-- Stylesheets -->
  <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="../assets/css/docs.theme.min.css">
  <!-- Owl Stylesheets -->
  <link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  <!-- Favicons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="../assets/ico/favicon.png">
  <link rel="shortcut icon" href="favicon.ico">
  <script src="../assets/vendors/jquery.min.js"></script>
  <script src="../assets/owlcarousel/owl.carousel.js"></script>

  <style>
    .big {
      border: 1px solid red;
    }
  </style>

</head>

<body>
  <section id="demos">
    <div class="row">
      <div class="large-12 columns">
        <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>
      </div>
    </div>
  </section>


  <script>
    $(document).ready(function () {
      var owl = $('.owl-carousel');
      owl.owlCarousel({
        //When draging the carousel call function 'callback'
        onDragged: callback,
        //When page load (i think) call function 'callback'
        onInitialized: callback,
        margin: 20,
        nav: false,
        loop: true,
        dots: false,
        responsive: {
          0: {
            items: 1
          },
          600: {
            items: 3
          },
          1000: {
            items: 5
          }
        }
      })
    })

    //Select the forth element and add the class 'big' to it 
    function callback(event) {
      //Find all 'active' class and dvide them by two 
      //5 (on larg screens) avtive classes / 2 = 2.5 
      //Math.ceil(2.5) = 3
      var activeClassDividedByTwo = Math.ceil($(".active").length / 2)
      //Adding the activeClassDividedByTwo (is 3 on larg screens)
      let OwlNumber = event.item.index + activeClassDividedByTwo
      console.log(OwlNumber)
      //Rmove any 'big' class 
      $(".item").removeClass('big')
      //Adding new 'big' class to the fourth .item
      $(".item").eq(OwlNumber).addClass('big')
    }
  </script>
</body>
</html>

How I Did It

Inside Owl initialiser

$(document).ready(function () {
  var owl = $('.owl-carousel');
  owl.owlCarousel({

add

onInitialized: callback, onDragged: callback,

This calls a function called 'callback' when you drag the carousel and when the page loads.

This is the function 'callback' :

   function callback(event) {
      //Find all 'active' class and dvide them by two 
      //5 (on larg screens) avtive classes / 2 = 2.5 
      //Math.ceil(2.5) = 3
      var activeClassDividedByTwo = Math.ceil($(".active").length / 2)
      //Adding the activeClassDividedByTwo (is 3 on larg screens)
      let OwlNumber = event.item.index + activeClassDividedByTwo
      console.log(OwlNumber)
      //Rmove any 'big' class 
      $(".item").removeClass('big')
      //Adding new 'big' class to the fourth .item
      $(".item").eq(OwlNumber).addClass('big')
    }

As I wrote in the notes inside the function, It first finds all .active classes (for this example there will be 5 .active classes ) Then it takes all the .active classes divide them by 2, By using Math.ceil() we get the number 3. Then we add this varuble we got to the event.item.index (event.item.index gives us the current active .item, for me it was the first one) Now we can target the .item we wanted (fourth one) By using $(".item").eq(OwlNumber).addClass('big'), I added a class called .big to the fourth active .item class.


Thanks again for the help! Hope this will help somebody to :D

Auto Width Demo | Owl Carousel, If using with infinity loop add option 'items' more than 1. It all depends on the width of your content. Setup. $('.owl-carousel').owlCarousel({  To maintain aspect ratio as well as setting height use below code.owl-carousel .owl-wrapper { display: flex !important; } .owl-carousel .owl-item img { width: 100%; height: 100%; object-fit: cover; max-width: initial; }

The Final Result

The goal was to create a Netflix styled carousel with Owl carousel and so I did. Here is a picture for reference:

Netflix Carousel

The Code

I worked in 'OwlCarousel2-2.3.4/docs/demos/basic', copy and paste it there, and you should be fine

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Basic usage demo">
  <meta name="author" content="David Deutsch">
  <title>Basic Demo | Owl Carousel | 2.3.4</title>
  <!-- Stylesheets -->
  <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="../assets/css/docs.theme.min.css">
  <!-- Owl Stylesheets -->
  <link rel="stylesheet" href="../assets/owlcarousel/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="../assets/owlcarousel/assets/owl.theme.default.min.css">
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  <!-- Favicons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="../assets/ico/favicon.png">
  <link rel="shortcut icon" href="favicon.ico">
  <script src="../assets/vendors/jquery.min.js"></script>
  <script src="../assets/owlcarousel/owl.carousel.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


  <style>
    .item {
      background-color: rgb(0, 0, 0, 000) !important;
      width: 200px !important;
      padding: 0px !important;

    }

    .wraper {
      height: 500px !important;
      display: flex !important;
      align-items: center !important;
    }

    .big {
      width: 250px !important;
      -webkit-transition: width 300ms;
      -moz-transition: width 300ms;
      -ms-transition: width 300ms;
      -o-transition: width 300ms;
      transition: width 300ms;
    }
  </style>

</head>

<body>
  <section id="demos">
    <div class="row">
      <div class="large-12 columns" style="padding: 0; margin: 0;">
        <div class="owl-carousel owl-theme">
          <div class="item">
            <img src="/docs/demos/Moonlight_poster.jpeg" alt="">
          </div>
          <div class="item">
            <img src="/docs/demos/Moonlight_poster.jpeg" alt="">
          </div>
          <div class="item">
            <img src="/docs/demos/Moonlight_poster.jpeg" alt="">
          </div>
          <div class="item">
            <img src="/docs/demos/Moonlight_poster.jpeg" alt="">
          </div>
          <div class="item">
            <img src="/docs/demos/Moonlight_poster.jpeg" alt="">
          </div>
          <div class="item">
            <img src="/docs/demos/Moonlight_poster.jpeg" alt="">
          </div>
          <div class="item">
            <img src="/docs/demos/Moonlight_poster.jpeg" alt="">
          </div>
          <div class="item">
            <img src="/docs/demos/Moonlight_poster.jpeg" alt="">
          </div>
          <div class="item">
            <img src="/docs/demos/Moonlight_poster.jpeg" alt="">
          </div>
          <div class="item">
            <img src="/docs/demos/Moonlight_poster.jpeg" alt="">
          </div>
          <div class="item">
            <img src="/docs/demos/Moonlight_poster.jpeg" alt="">
          </div>
          <div class="item">
            <img src="/docs/demos/Moonlight_poster.jpeg" alt="">
          </div>
        </div>
      </div>
    </div>
  </section>


  <script>
    $(document).ready(function () {
      var owl = $('.owl-carousel');
      owl.owlCarousel({
        //When page load (i think) call function 'inlargItem'
        onInitialized: inlargItem,
        autoWidth: true,
        margin: 10,
        nav: true,
        navSpeed: 700,
        loop: true,
        dots: true,
        responsive: {
          0: {
            items: 1
          },
          600: {
            items: 3
          },
          1000: {
            items: 5
          }
        }
      })
      $('.owl-stage').addClass('wraper')
    })

    //Calls inlargItem on every change
    $('.owl-carousel').on('changed.owl.carousel', function (event) {
      inlargItem(event)
    })

    //For key movement
    $(document.documentElement).keyup(function (event) {
      if (event.keyCode == 37) {
        /*left key*/
        $('.owl-carousel').trigger('prev.owl.carousel', [700]);
      } else if (event.keyCode == 39) {
        /*right key*/
        $('.owl-carousel').trigger('next.owl.carousel', [700]);
      }
    });

    //Select the forth element and add the class 'big' to it 
    function inlargItem(event) {
      //Find all 'active' class and dvide them by two 
      //5 (on larg screens) avtive classes / 2 = 2.5 
      //Math.ceil(2.5) = 3
      var activeClassDividedByTwo = Math.ceil($(".active").length / 2)
      //Adding the activeClassDividedByTwo (is 3 on larg screens)
      let OwlNumber = event.item.index + activeClassDividedByTwo
      //Rmove any 'big' class 
      $(".item").removeClass("big")
      //Adding new 'big' class to the fourth .item
      $(".item").eq(OwlNumber).addClass("big")
    }
  </script>
</body>

</html>

The End Reasult

Netflix styled carousel with Owl carousel

Why owl-carousel change items width automatically when the , Why owl-carousel change items width automatically when the window resized? owlCarousel({ items:1, navigation: true, navigationText: ['<div class="top_nav to the default breakpoints, 768px is actually XS, while 992px is SM and so forth. Owl Carousel 2 in Angular 6/7 . Owl Carousel 2 is a popular image and content slider/ carousel popular among many developers due to many features. It can also be implemented in an Angular project using adapter modules, check tutorial with an example.

Owl Carousel - Active and Center items, I noticed a weird behavior of owl slider concerning the “first” and “last” classes. the first item gets the class “first” and every 4th item gets the class “last”, even if When I edit it to the following, it seems to work but I dont know if this is a echo ' <script type="text/javascript"> if(jQuery(window).width() > 767)  In a previous post I showed you how to build a custom image gallery with slick.js.Today I’ll cover the process of creating an animated, responsive, full-screen carousel slider with owl.js (or “Owl Carousel”).

Owl slider adds class "last" to every 4th item in slider topic of forum , Event triggers 'resize.owl.carousel' or 'refresh.owl.carousel' aren't working. Just to clear this up, that as of today (April 4th, 2016), there is no beta 4. There are issues in owl-carousel single item display two images. #2347. At the moment works only with 1 item on screen. The plan is to calculate all visible items and change height according to heighest item. //default settings: AutoHeight.Defaults = { autoHeight: false, autoHeightClass: 'owl-height' }; Setup $('.owl-carousel').owlCarousel({ items:1, margin:10, autoHeight:true });

Trigger resize, refresh, initialize aren't working · Issue #842 , In order to apply animate.css' animations to our Owl Carousel Slider, we need to Slide, add "<div>{owl-5:content}</div>" for 5 slides, and so on and so forth. and mobile height of Owl's Carousel Slider by adjusting the bold text below: element and drop it into the drag and drop area that spans the entire width of the site. I'm having some trouble with the images in one of my pages. They are in a carousel, but as the carousel slides to the next image, it is constantly changing sizes because the images are different

Comments
  • tried this: owl.on("next.owl.carousel", function (event) { console.log(event.item.index); }); but it didn't work
  • Have you defined owl beforehand? var owl = $('.owl-carousel');