时间戳

首页 > 解决方案 > 猫头鹰旋转木马：如何更改第四项的大小

javascript - 猫头鹰旋转木马：如何更改第四项的大小

问题描述

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

最终轮播的外观

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

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

所以我所做的就是使用.active类的 div（一次有 5 个），使用第四个 div 并向其中添加 CSS，这样只会使第四个更大。

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

希望我明白了，第一次在 Stack Overflow 上发帖 :)

标签： javascripthtmlcss

解决方案

owlCarousel 具有可用于跟踪运动的事件。

因此，基本上您必须通过在当前突出显示的 div 位置添加或减去 1 来跟踪next.owl.carousel或prev.owl.carousel更新您的SizeChange()功能。

编辑：事件甚至在 event.object 中传递信息。当前活动项目存储在event.item.index.

推荐阅读