Question

我的任务是写slider，其中包含上一个和下一个滑块的信息。

例如，在滑块中，您向左<和向右>箭头后面有一个圆圈。当您将鼠标悬停在下一个箭头或上一个滑块上时，您会看到相应的信息文本此圈子中的这张（上一个或下一个）图片来自this carousel

的数据属性

除了从prev或next图片的数据属性中获取信息之外，我还意识到了一切。

请帮助我。

$(function () {
  var $owl = $('.owl-carousel'),
      isDragged = false;

  $owl.owlCarousel({
    margin: 0,
    navSpeed: 500,
    nav: true,
    items: 1,
    navText : ["<img src='https://cdn4.iconfinder.com/data/icons/arrows-9/100/arrow-9-512.png'><span></span>","<img src='http://pixsector.com/cache/81183b13/avcc910c4ee5888b858fe.png'><span></span>"]
  });


});

.owl-carousel {
  position: relative;
  top: -65px;
}
.owl-carousel .item {
  position: relative;
  height: 816px;
}
.owl-carousel .item img {
  position: absolute;
  height: 816px;
  width: 100vw !important;
}
.owl-carousel .owl-prev:hover span {
  max-width: 200px;
  padding: 5px 5px 0 25px;
  background: #fbfbfb;
  height: 15px;
  margin-top: -1.3rem;
  font-size: 15px;
}
@media only screen and (max-width: 768px) {
  .owl-carousel .owl-prev:hover span {
    margin-top: -1rem;
  }
}
.owl-carousel .owl-prev:hover span:before {
  width: 10px;
  height: 10px;
  top: 1.5px;
  left: 2px;
}
.owl-carousel .owl-prev img {
  left: 1%;
}
.owl-carousel .owl-prev span {
  top: 50%;
  left: 3.5%;
}
@media only screen and (max-width: 992px) {
  .owl-carousel .owl-prev span {
    left: 5%;
  }
}
@media only screen and (max-width: 768px) {
  .owl-carousel .owl-prev span {
    top: 48.5%;
  }
}
.owl-carousel .owl-prev span:before {
  right: -15px;
}
.owl-carousel .owl-next:hover span {
  max-width: 200px;
  padding: 5px 5px 0 25px;
  background: #fbfbfb;
  height: 15px;
  margin-top: -1.3rem;
  font-size: 15px;
}
@media only screen and (max-width: 768px) {
  .owl-carousel .owl-next:hover span {
    margin-top: -1rem;
  }
}
.owl-carousel .owl-next:hover span:before {
  width: 10px;
  height: 10px;
  top: 1.5px;
  left: 17px;
}
.owl-carousel .owl-next img {
  right: 1%;
}
.owl-carousel .owl-next span {
  top: 50%;
  right: 3.5%;
}
@media only screen and (max-width: 992px) {
  .owl-carousel .owl-next span {
    right: 5%;
  }
}
@media only screen and (max-width: 768px) {
  .owl-carousel .owl-next span {
    top: 48.5%;
  }
}
.owl-carousel .owl-next span:before {
  right: -15px;
}

.owl-carousel .owl-prev img, .owl-carousel .owl-next img {
  position: absolute;
  top: 45%;
  height: 7%;
}
@media only screen and (max-width: 768px) {
  .owl-carousel .owl-prev img, .owl-carousel .owl-next img {
    height: 5%;
  }
}

.owl-carousel .owl-prev span, .owl-carousel .owl-next span {
  border: 1px solid #fff;
  float: left;
  border-radius: 100rem;
  height: 5px;
  padding: 5px;
  cursor: pointer;
  max-width: 0;
  overflow: hidden;
  position: absolute;
  margin-top: -1.3rem;
  white-space: nowrap;
  line-height: 0;
  transition: padding 0.2s linear, max-width 0.2s linear;
  -webkit-transition: padding 0.2s linear, max-width 0.2s linear;
}
@media only screen and (max-width: 768px) {
  .owl-carousel .owl-prev span, .owl-carousel .owl-next span {
    margin-top: -1rem;
  }
}
.owl-carousel .owl-prev span:before, .owl-carousel .owl-next span:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  background: #bebebe;
  border-radius: 100rem;
  top: 0;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

<div class="owl-carousel">       
  <div class="item" date-text="witcher"><img src="https://nerdist.com/wp-content/uploads/2017/05/the-witcher-featured-image-970x545.jpg"> </div>
  <div class="item" date-text="bulbasaur"><img src="https://dingo.care2.com/pictures/petition_images/petition/685/852582-1505568504-wide.jpg"> </div>
  <div class="item" date-text="t-rex"><img src="https://i.redd.it/mkzm86rrnso01.jpg"> </div>
  <div class="item" date-text="math"><img src="http://bsnscb.com/data/out/124/38995301-maths-wallpapers.png"> </div>
  <div class="item" date-text="girl"><img src="http://globalmedicalco.com/photos/globalmedicalco/23/112016.jpg">  </div>
  <div class="item" date-text="linux"><img src="https://cn.pling.com/img/f/2/e/7/5fa66423c18fcdf85af6c318d82bae08ad22.png"> </div>
</div>

Answer 1

只需添加此jQuery代码并将类名称添加到 span

  $(document).ready(function () {

        $(".owl-prev").hover(function () {
            $(".data-text").html($(".owl-item.active").prev().find(".item").attr("data-text"));
        })
        $(".owl-prev").on("click", function () {
            $(".data-text").html($(".owl-item.active").prev().find(".item").attr("data-text"));
        })
        $(".owl-next").hover(function () {
            $(".data-text").html($(".owl-item.active").next().find(".item").attr("data-text"));
        })
        $(".owl-next").on("click", function () {
            $(".data-text").html($(".owl-item.active").next().find(".item").attr("data-text"));
        })
    });

从数据属性获取有关上一个和下一个滑块的信息

1 个答案: