title: Get Info about previous and next slider from data attribute
body: <p>I have a task to write <code>slider</code> with information about previous  and next slider.</p>
  
  <p>For example in slider you have left <code>&lt;</code> and right <code>&gt;</code> 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(<strong>prev or next</strong>) image in this circle which  get from  data attribute inspired from  <a href="https://black-star.ru/" rel="nofollow noreferrer"><strong>this carousel</strong> </a></p>
  
  <p>I realized everything beside getting info from data attribute's about <code>prev</code> or <code>next</code> image.</p>
  
  <p>Please help me.</p>
  
  <p><a href="https://codepen.io/DuudeXX8/pen/rKXwGo" rel="nofollow noreferrer"><strong>Codepen link</strong></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
    var $owl = $('.owl-carousel'),
        isDragged = false;
  
    $owl.owlCarousel({
      margin: 0,
      navSpeed: 500,
      nav: true,
      items: 1,
      navText : ["&lt;img src='https://cdn4.iconfinder.com/data/icons/arrows-9/100/arrow-9-512.png'&gt;&lt;span&gt;&lt;/span&gt;","&lt;img src='http://pixsector.com/cache/81183b13/avcc910c4ee5888b858fe.png'&gt;&lt;span&gt;&lt;/span&gt;"]
    });
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="owl-carousel"&gt;       
    &lt;div class="item" date-text="witcher"&gt;&lt;img src="https://nerdist.com/wp-content/uploads/2017/05/the-witcher-featured-image-970x545.jpg"&gt; &lt;/div&gt;
    &lt;div class="item" date-text="bulbasaur"&gt;&lt;img src="https://dingo.care2.com/pictures/petition_images/petition/685/852582-1505568504-wide.jpg"&gt; &lt;/div&gt;
    &lt;div class="item" date-text="t-rex"&gt;&lt;img src="https://i.redd.it/mkzm86rrnso01.jpg"&gt; &lt;/div&gt;
    &lt;div class="item" date-text="math"&gt;&lt;img src="http://bsnscb.com/data/out/124/38995301-maths-wallpapers.png"&gt; &lt;/div&gt;
    &lt;div class="item" date-text="girl"&gt;&lt;img src="http://globalmedicalco.com/photos/globalmedicalco/23/112016.jpg"&gt;  &lt;/div&gt;
    &lt;div class="item" date-text="linux"&gt;&lt;img src="https://cn.pling.com/img/f/2/e/7/5fa66423c18fcdf85af6c318d82bae08ad22.png"&gt; &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>