我想在猫头鹰旋转木马上藏一个div。请帮帮我。
我从owl carousel调用所有css文件。
这是我的呼叫css文件
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/owl-carousel/owl.carousel.css">
/猫头鹰旋转木马/owl.theme.css“>
/猫头鹰旋转木马/owl.transitions.css“>
这是我调用的JS文件
<script src="<?php echo get_template_directory_uri(); ?>/owl-carousel/owl.carousel.min.js"></script>
/猫头鹰旋转木马/active.js“>
我站起来
我的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
});
});