猫头鹰旋转木马:如何更改第四项的大小 [英] Owl Carousel: How to change size of fourth item

查看：15
本文介绍了猫头鹰旋转木马:如何更改第四项的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我将从一张图片开始，通过更改第四个 .item 类的大小来进一步说明我的意思:

最终的旋转木马应该是什么样子

这是我目前拥有的一半工作代码:

<html lang="zh-cn"><头><!-- 头--><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="基本用法演示"><meta name="author" content="David Deutsch"><标题>基本演示 |猫头鹰旋转木马 |2.3.4<!-- 样式表--><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 样式表--><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 和 Respond.js IE8 支持 HTML5 元素和媒体查询 --><!--[如果是 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]--><!-- 收藏夹--><link rel="apple-touch-icon-precomposed" size="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"><link rel="快捷图标" href="../assets/ico/favicon.png"><link rel="快捷图标" href="favicon.ico"><!-- 是的，我知道 js 不应该出现在标题中.它是演示所必需的.--><!-- javascript --><script src="../assets/vendors/jquery.min.js"></script><script src="../assets/owlcarousel/owl.carousel.js"></script><body onload="SizeChange()"><!-- 演示--><section id="演示"><div class="row"><div class="large-12 列"><div class="owl-carousel owl-theme"><div class="item"><h4>1</h4>

<div class="item"><h4>2</h4>

<div class="item"><h4>3</h4>

<div class="item"><h4>4</h4>

<div class="item"><h4>5</h4>

<div class="item"><h4>6</h4>

<div class="item"><h4>7</h4>

<div class="item"><h4>8</h4>

<div class="item"><h4>9</h4>

<div class="item"><h4>10</h4>

<div class="item"><h4>11</h4>

<div class="item"><h4>12</h4>

<脚本>//脚本$(document).ready(function () {var owl = $('.owl-carousel');owl.owlCarousel({保证金:10，导航:真的，循环:真实，响应:{0:{项目:1},600:{项目:3},1000:{项目:5}}})})$(window).click(SizeChange)函数大小变化(){让 ActiveDivs = []$("div").filter(".active").each(function (index, value) {ActiveDivs.push(value)})让 lengthOfArray = ActiveDivs.length-2$(ActiveDivs).find('.item').animate({"height":"150px"}, 100);$(ActiveDivs[lengthOfArray]).find('.item').animate({"height":"300px"}, 100);}//结束脚本<!-- 供应商--><script src="../assets/vendors/highlight.js"></script><script src="../assets/js/app.js"></script></html>

所以我所做的是使用 .active 类(一次有 5 个)获取 div，获取第四个 div 并为其添加 CSS，这样只会使第四个更大.

在轮播中制作第四个 div 以更改页面加载和与轮播的任何交互时的高度是我想要它做的.

希望我说得够清楚了，第一次在 Stack Overflow 上发帖 :)

解决方案

最终结果

<小时>

我们的目标是用 Owl carousel 创建一个 Netflix 风格的 carousel，所以我做到了.这是一张图片供参考:

Netflix 轮播


代码

<小时>

我在OwlCarousel2-2.3.4/docs/demos/basic"工作，复制并粘贴到那里，你应该没问题

<html lang="zh-cn"><头><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="基本用法演示"><meta name="author" content="David Deutsch"><title>基本演示 |猫头鹰旋转木马 |2.3.4<!-- 样式表--><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 样式表--><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 和 Respond.js IE8 支持 HTML5 元素和媒体查询 --><!--[如果是 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]--><!-- 收藏夹--><link rel="apple-touch-icon-precomposed" size="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"><link rel="快捷图标" href="../assets/ico/favicon.png"><link rel="快捷图标" 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><风格>.物品 {背景颜色:rgb(0, 0, 0, 000) !important;宽度:200px！重要；填充:0px！重要；}.包装{高度:500px！重要；显示:弹性！重要；对齐项目:居中！重要；}.大 {宽度:250px！重要；-webkit-transition: 宽度 300ms;-moz-transition: 宽度 300ms;-ms-transition: 宽度 300ms;-o-transition: 宽度 300ms;过渡:宽度300ms；}</风格><身体><section id="演示"><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 class="item"><img src="/docs/demos/Moonlight_poster.jpeg" alt="">
<div class="item"><img src="/docs/demos/Moonlight_poster.jpeg" alt="">
<div class="item"><img src="/docs/demos/Moonlight_poster.jpeg" alt="">
<div class="item"><img src="/docs/demos/Moonlight_poster.jpeg" alt="">
<div class="item"><img src="/docs/demos/Moonlight_poster.jpeg" alt="">
<div class="item"><img src="/docs/demos/Moonlight_poster.jpeg" alt="">
<div class="item"><img src="/docs/demos/Moonlight_poster.jpeg" alt="">
<div class="item"><img src="/docs/demos/Moonlight_poster.jpeg" alt="">
<div class="item"><img src="/docs/demos/Moonlight_poster.jpeg" alt="">
<div class="item"><img src="/docs/demos/Moonlight_poster.jpeg" alt="">
<div class="item"><img src="/docs/demos/Moonlight_poster.jpeg" alt="">
</节><脚本>$(document).ready(function () {var owl = $('.owl-carousel');owl.owlCarousel({//当页面加载时(我认为)调用函数'inlargItem'onInitialized: inlargeItem,自动宽度:真，保证金:10，导航:真的，导航速度:700，循环:真实，点:对，响应:{0:{项目:1},600:{项目:3},1000:{项目:5}}})$('.owl-stage').addClass('wraper')})//在每次更改时调用inlargeItem$('.owl-carousel').on('changed.owl.carousel', function (event) {放大项目(事件)})//用于按键移动$(document.documentElement).keyup(函数(事件){如果(事件.keyCode == 37){/*左键*/$('.owl-carousel').trigger('prev.owl.carousel', [700]);} else if (event.keyCode == 39) {/*右键*/$('.owl-carousel').trigger('next.owl.carousel', [700]);}});//选择第四个元素并向其添加类big"函数 inlargeItem(event) {//找到所有活动"类并将它们除以二//5 (在大屏幕上) avtive classes/2 = 2.5//Math.ceil(2.5) = 3var activeClassDividedByTwo = Math.ceil($(".active").length/2)//添加activeClassDividedByTwo(大屏为3)让 OwlNumber = event.item.index + activeClassDividedByTwo//删除任何大"类$(".item").removeClass("big")//将新的大"类添加到第四个 .item$(".item").eq(OwlNumber).addClass("big")}</html>


最终结果

<小时>

Netflix 风格的旋转木马和猫头鹰旋转木马

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

解决方案

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

这篇关于猫头鹰旋转木马:如何更改第四项的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆