Question

我按照owl carousel网站上的说明实现了代码和文件，但看起来只有全宽的大图像，滑块不起作用。我的代码有什么问题吗？

编辑：在我将其实施到我的网站后，它再次无效，请检查我在下面添加的JavaScript的更新：注意我的网站上有两个滑块

<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<script src="jquery.min.js"></script>
<script src="owl-carousel/owl.carousel.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="mine.js"></script>
        <title>UltraMax</title>
    <script type="text/javascript">
            jssor_1_slider_init = function() {

                var jssor_1_SlideoTransitions = [
                  [{b:900,d:2000,x:-379,e:{x:7}}],
                  [{b:900,d:2000,x:-379,e:{x:7}}],
                  [{b:-1,d:1,o:-1,sX:2,sY:2},{b:0,d:900,x:-171,y:-341,o:1,sX:-2,sY:-2,e:{x:3,y:3,sX:3,sY:3}},{b:900,d:1600,x:-283,o:-1,e:{x:16}}]
                ];

                var jssor_1_options = {
                  $AutoPlay: 1,
                  $SlideDuration: 800,
                  $SlideEasing: $Jease$.$OutQuint,
                  $CaptionSliderOptions: {
                    $Class: $JssorCaptionSlideo$,
                    $Transitions: jssor_1_SlideoTransitions
                  },
                  $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$
                  },
                  $BulletNavigatorOptions: {
                    $Class: $JssorBulletNavigator$
                  }
                };

                var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

                /*responsive code begin*/
                /*remove responsive code if you don't want the slider scales while window resizing*/
                function ScaleSlider() {
                    var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                    if (refSize) {
                        refSize = Math.min(refSize, 1920);
                        jssor_1_slider.$ScaleWidth(refSize);
                    }
                    else {
                        window.setTimeout(ScaleSlider, 30);
                    }
                }
                ScaleSlider();
                $Jssor$.$AddEvent(window, "load", ScaleSlider);
                $Jssor$.$AddEvent(window, "resize", ScaleSlider);
                $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
                /*Jssor Slider Begin end*/
            };

                    $(document).ready(function() {

                  $("#owl-demo").owlCarousel({

                      autoPlay: 3000, //Set AutoPlay to 3 seconds

                      items : 4,
                      itemsDesktop : [1199,3],
                      itemsDesktopSmall : [979,3]

                  });

                });
        </script>

        </head>
        <body>
            <div id="owl-demo">      
          <div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
          <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
          <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
          <div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
          <div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
          <div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
          <div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
          <div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
        </div>    

        </body>
        </head>
        </html>

这是css

#owl-demo .item{
  margin: 3px;
}
#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
}

Answer 1

更改jquery库的顺序如下： -

<script src="jquery.min.js"></script>
<script src="owl-carousel/owl.carousel.js"></script>

你很高兴。

猫头鹰旋转木马不能正常工作

1 个答案: