html 样品猫头鹰转盘/滑块

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 样品猫头鹰转盘/滑块相关的知识，希望对你有一定的参考价值。

Adev carousel Should get it from Bitbucket
All CSS/JS located In Bitbucket : 
#JS:  js/jquery.min.js || js/owl.carousel.js
#CSS: css/owl.carousel.min.css || css/owl.theme.default.min.css || css/docs.theme.min.css

##########################################################################
### Bitbucket link : https://bitbucket.org/abdodeve/owl-carousel-html ####
##########################################################################

<!DOCTYPE html>
<html>
  <head>

    <!-- Owl Stylesheets -->
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/docs.theme.min.css">
    <!-- Yeah i know js should not be in header. Its required for demos.-->
    <!-- javascript -->
    <script src="js/jquery.min.js"></script>
    <script src="js/owl.carousel.js"></script>
  </head>

  <body>
      
  <!--  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>
          
          <script>
            //Important script
            /*
            * Init Carousel
            */
            $(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
                                            }
                                    }
                             })
            })
          </script>
        </div>
      </div>
    </section>

  </body>
</html>

以上是关于html 样品猫头鹰转盘/滑块的主要内容，如果未能解决你的问题，请参考以下文章