从data属性获取关于上一次和下一次滑块的信息

Question

我有一项任务要编写slider，其中包含有关上一次和下一次滑块的信息。

例如，在滑块中，您已经离开了<，而右>箭头在该箭头的后面有一个circle.When，您可以将其悬停到任意箭头，下一步更改，或者prev滑块，您可以在这个圆圈中看到相应的信息文本(、prev或next)，这是从 的数据属性中得到的。

我意识到除了从数据属性中获取关于prev或next图像的信息之外的其他一切。

请帮帮我。

Codepen link

​

$(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"));
        })
    });