带猫头鹰旋转木马的滑块

Question

我正在做一个项目，我到了必须实现滑块的部分。由于我不擅长 JavaScript，我决定使用一个名为 owlcarousel 的插件。

我面临的问题是关于各种物品的容器的大小。我无法给容器一个初始大小

我想做与演示相同的事情：http://www.owlcarousel.owlgraphic.com/demos/basic.html

但是到目前为止我所做的是：

.carousel {
 width: 800px;
}

/*Text over image*/
h2.header {
    bottom: 0;
    position: absolute;
    text-align: center;
 margin: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
 padding: 35px 0px 35px 0px;
 font-family: FeaturedItem;
}
.item {
    position: relative;
 width: 100%;
}

.item img {
   display: block;
   max-width:100%;
}

.item .overlay {
    position: absolute;
    top:0;
    left:0;
    width:380px;
    height:100%;
    color:white;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>owlcarousel</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
    </head>
 
    <body>
  <div class="carousel">
   <div class="item">
    <img src="images/2.jpg"  alt="" />
    
    <div class="overlay">
     <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
    </div>
   </div>
   
   <div class="item">
    <img src="images/1.jpg"  alt="" />
    
    <div class="overlay">
     <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
    </div>
   </div>
   
   <div class="item">
    <img src="images/3.jpg"  alt="" />
    
    <div class="overlay">
     <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
    </div>
   </div>
   
   <div class="item">
    <img src="images/4.jpg"  alt="" />
    
    <div class="overlay">
     <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
    </div>
   </div>
   
   <div class="item">
    <img src="images/5.jpg"  alt="" />
    
    <div class="overlay">
     <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
    </div>
   </div>
   
   <div class="item">
    <img src="images/6.jpg"  alt="" />
    
    <div class="overlay">
     <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
    </div>
   </div>
   
  </div>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script>
   (function($){
 
    $('.carousel').owlCarousel({
     items: 3,
     loop:true,
     margin:10,
     nav:true,
     dots: true,
     responsive:{
      0:{
       items:1
      },
      600:{
       items:3
      },
      1000:{
       items:5
      }
     }
    })
    
   })(jQuery);
  </script>
 </body>
</html>

如您所见，我已将项目数设置为 3 无效。也没有出现点。

请告诉我如何为每个项目制作尺寸为 380px 的相同设计

Answer 1

您不应在 .carousel 上添加宽度属性，而应创建另一个 class，比如 .wrapper 并在其上设置宽度。将 div 和 .carousel 以及 div 和 .item 放在你的 .wrapper div 中：

CSS

.wrapper { width: 60%; }

HTML

 <div class="wrapper">
   <div class="carousel">
     <div class="item">
         ...
     <div class="item">
   </div>
 </div>

其次，要显示圆点，您必须包含默认主题 CSS，或者自己为圆点定义 CSS。默认主题 CSS 如下：

<link rel="stylesheet" href="owl.theme.default.css">

点需要宽度、高度、背景等才能显示。

带猫头鹰旋转木马的滑块

Slider with owlcarousel

html

javascript

css

jquery

owl-carousel