我想要猫头鹰旋转木马上的隐藏 div。请帮我 。 我正在从 owl carousel 调用所有 css 文件。 这是我的调用 css 文件
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/owl-carousel/owl.carousel.css">
/owl-carousel/owl.theme.css"> /owl-carousel/owl.transitions.css">
这是我调用的JS文件
<script src="<?php echo get_template_directory_uri(); ?>/owl-carousel/owl.carousel.min.js"></script>
我起床了 我的 HTML 源文件
<div id="owl-demo" class="owl-carousel">
<div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x400/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x200/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x250/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x350/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x100/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
</div>
最佳答案
利用slick.js制作HTML代码
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script src="app2.js"></script>
<style>
body {
background-color: lightblue;
}
#slickslide {
height: 200px;
background: lightgray;
}
#content {
margin: auto;
padding: 20px;
width: 80%;
}
</style>
</head>
<body>
<div id="demo"></div>
<div id=content>
<div id="slickslide" slick="">
<div><h1>Test1</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p></div>
<div><h1>Test2</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p></div>
<div><h1>Test3</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p></div>
<div><h1>Test4</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p></div>
<div><h1>Test5</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut. </p></div>
</div>
</div>
</body>
</html>
Javascript 代码
$(document).ready(function(){
$('#slickslide').slick({
dots: true,
infinite: true,
speed: 300,
autoplay:true,
autoplaySpeed: 1000,
slidesToShow: 1,
slidesToScroll: 1
});
});
关于javascript - 想要生成带有猫头鹰图像的轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30157867/