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

问题描述 投票：0回答：3

我会用图片开始进一步展示我通过改变第四.item类的大小是指：

How the final carousel should look 这是半工作代码我目前有：

<!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上的第一篇文章:)

javascript html css
3个回答
0
投票

owlCarousel有events你可以用它来追踪运动。

所以基本上，你必须追踪next.owl.carousel或prev.owl.carousel并通过增加或减少一到你的当前高亮DIV位置更新SizeChange()功能。

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

0
投票

终于解决了！ 感谢您的帮助，喜欢这个网站：d 我知道它不是突破性的，但感觉像一个巨大的成功，对我说：d

我试图做的是采取第四.item在转盘和改变它的CSS。通过越来越接近看起来像这样的结果：

Crousel Design

编码

我曾在“OwlCarousel2-2.3.4 /文档/演示/基本”，复制并粘贴在那里，你应该罚款

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

我是如何做到的

里面猫头鹰初始化

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

加

onInitialized: callback, onDragged: 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')
    }

正如我在笔记中写道里面的功能， 它首先找到所有.active类（本示例中会有5个.active班） 然后，它需要所有的.active类除以2它们， 通过使用Math.ceil()我们得到的数字3。 然后，我们添加这varuble我们到了event.item.index（event.item.index给了我们当前的活动.item，对我来说这是第一个） 现在，我们可以针对我们想要的.item（第四个） 通过使用$(".item").eq(OwlNumber).addClass('big')，我添加了一个名为.big第四主动.item类类。

再次感谢您的帮助！希望这将有助于某人：d

0
投票

最终的结果

我们的目标是建立与猫头鹰旋转木马Netflix的风格的旋转木马，所以我做到了。下面是引用的图片：

Netflix Carousel

编码

我曾在“OwlCarousel2-2.3.4 /文档/演示/基本”，复制并粘贴在那里，你应该罚款

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

最终的结果

Netflix styled carousel with Owl carousel

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.