Question

我在一个项目上工作，我得到了一个我需要实现滑块的部分。由于我不擅长JavaScript，我决定使用名为owlcarousel的插件。

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

我想做同样的演示：http://www.owlcarousel.owlgraphic.com/demos/basic.html

然而，到目前为止，我所做的是：

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

std::forward_list

正如您所看到的，我已将项目数设置为3，因为它不起作用。点也没有出现。

请让我知道如何为每件商品制作相同尺寸为380px的设计

Answer 1

您应该创建另一个类，例如.wrapper，并在其上设置宽度，而不是在.carousel上添加width属性。将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">

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

与owlcarousel的滑块

1 个答案: