Question

我正在使用滑块插件：owlcarousel2。我希望

文本在下一张幻灯片中的图片上的问题。我还希望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>

Answer 1

你的javascript很好，但还有其他一些错误阻止它工作。我将引导您完成它。首先，关闭<head>并将转轮包装在<body>标签中。删除幻灯片后面的流氓</a>和位于底部脚本之前的不必要的</div>。

要在图像顶部显示文本，您可以在段落元素上设置绝对位置，并在其上设置相对位置。

以下是这些调整后代码的外观：

＆＃13;

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
      loop: true,
      margin: 10,
      nav: false,
      items: 1,
      center: true
  });
});

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Jquery幻灯片插件文本图像上

1 个答案: