图片上的jQuery幻灯片插件文本
[英]Jquery slide plugin text on image
问题描述
I'm using slider plugin: owlcarousel2. 
我正在使用滑块插件：owlcarousel2。 The problem that i want the 我想要的问题
text to be on the picture not in next slide. 图片上的文字不在下一张幻灯片中。 I want also the div tag to group elements, not to be ignored. 我也希望div标签将元素分组，而不是被忽略。
<html>
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">
<script src="jquery.js"></script>
<script src="owl.carousel.min.js"></script>
<head>
<style>
*{margin:0;padding:0;overflow:hidden}
img{
width:100vw;
height:100vh;
}
p{
background-color:black;
opacity:0.7;
z-index:9999
}
</style>
<div class="owl-carousel">
<div>
<img src='img.jpeg' alt='Hi!'></a>
<p class='text'>hi</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:false,
items:1,
center:true
})
});
</script>
</html>
1 个解决方案
解决方案1
0 2018-02-17 22:45:28
Your javascript is fine, but there are some other mistakes that prevent it from working. 您的javascript很好，但是还有其他一些错误使它无法正常工作。 I'll walk you through it. 我会引导您完成。 First, close your <head> and wrap the carousel in <body> tags. 首先，关闭您的<head>并将旋转木马包裹在<body>标签中。 Remove the rogue </a> after the slide image and the unnecessary </div> located just before the script at the bottom. 删除幻灯片图片后的流氓</a>和位于底部脚本之前的不必要</div> 。
To get the text on top of the image you can set an absolute position on the paragraph element and a relative position on it's parent. 要使文本位于图像顶部，您可以在段落元素上设置绝对位置，并在其父元素上设置相对位置。
Here's what your code should look like after these adjustments: 经过这些调整后，代码如下所示：
$(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop: true, margin: 10, nav: false, items: 1, center: true }); });
* { margin: 0; padding: 0; overflow: hidden; } .slide { position: relative; } img { width: 100vw; height: 100vh; background: #f00; } p { background-color: black; opacity: 0.7; position: absolute; z-index: 9999; }
<!DOCTYPE html> <html> <head> <title>Example</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script> </head> <body> <div class="owl-carousel"> <div class="slide"> <img src='img.jpeg' alt='Hi!'> <p class='text'>hi</p> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.