Get Info about previous and next slider from data attribute

Question

I have a task to write slider with information about previous and next slider.

For example in slider you have left < and right > arrow's behind this arrow's have a circle.When you hover to any arrow change next or prev slider you see information text accordingly about this(prev or next) image in this circle which get from data attribute inspired from this carousel

I realized everything beside getting info from data attribute's about prev or next image.

Please help me.

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

Just need to add this jQuery code and add class name to 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"));
        })
    });