时间戳

首页 > 解决方案 > 猫头鹰旋转木马滑块定制

javascript - 猫头鹰旋转木马滑块定制

问题描述

    <div class="owl-carousel">
            <div class="item">
              <img alt="" src="images/g1.jpg">
            </div>
            <div class="item">
             <img alt="" src="images/g2.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g1.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g2.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g1.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g2.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g1.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g2.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g1.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g2.jpg">
            </div>

          </div>

  var owl = $('.owl-carousel');
  owl.owlCarousel({
    loop: true,
    items: true,
    nav: false,
    navText: false,
    autoplay:true,
    smartSpeed:4000,
    autoplayTimeout:100,
    dots: true,
    autoWidth: false,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },
      1000: {
        items: 3
      }
    }
  })

嘿伙计们，我正在使用 owl carousel 创建一个滑块。但是我需要像下面附加的链接中的部分（“立即为您的孩子”上方的部分）一样自定义它们。http://preview.themeforest.net/item/kidstar-kindergarten-school-html-template/full_screen_preview/19514751 我可以向您展示我使用的代码。请通过那个，请帮助我。多谢你们。

标签： javascripthtmlcsssliderowl-carousel

解决方案

他们使用不同的 owl.carousel.js 版本，它不是最后一个。这就是问题。我不知道是哪个号码。您必须联系模板路径 https://themeforest.net/user/template_path并询问他们以获取更多信息。

对我来说，它可能是 2.3.2。因为这样，旋转木马就很好用。

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

    owl.owlCarousel({
        loop: true,
        nav: false,
        items: true,
        navText: false,
        autoplay:true,
        smartSpeed:4000,
        autoplayTimeout:100,
        dots: true,
        autoWidth: false,
        responsive: {
            0:{
                items:1,
                loop:true
            },
            480:{
                items:2,
                loop:true
            },
            768:{
                items:3,
                loop:true
            },
            1000:{
                items:4,
                loop:true
            }
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/owl.carousel.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.carousel.min.css" rel="stylesheet" >
<div class="owl-carousel">
  <div class="item">
    <h2>Swipe</h2>
  </div>
  <div class="item">
    <h2>Drag</h2>
  </div>
  <div class="item">
    <h2>Responsive</h2>
  </div>
  <div class="item">
    <h2>CSS3</h2>
  </div>
  <div class="item">
    <h2>Fast</h2>
  </div>
  <div class="item">
    <h2>Easy</h2>
  </div>
  <div class="item">
    <h2>Free</h2>
  </div>
  <div class="item">
    <h2>Upgradable</h2>
  </div>
  <div class="item">
    <h2>Tons of options</h2>
  </div>
  <div class="item">
    <h2>Infinity</h2>
  </div>
  <div class="item">
    <h2>Auto Width</h2>
  </div>
   <div class="item">
    <h2>Swipe</h2>
  </div>
  <div class="item">
    <h2>Drag</h2>
  </div>
  <div class="item">
    <h2>Responsive</h2>
  </div>
  <div class="item">
    <h2>CSS3</h2>
  </div>
  <div class="item">
    <h2>Fast</h2>
  </div>
</div>

推荐阅读