owl carousel with dotsContainer (Dots + Text) (ok)

https://codepen.io/vbeetlejuice/pen/dRaero

<div class="bookmarks">
    <ul class="test">
        <li class="bookmark1 active" data="0">
            bookmark 1
        </li>
        <li class="bookmark2" data="1">
            bookmark 2
        </li>
        <li class="bookmark3" data="2">
            bookmark 3
        </li>
        <li class="bookmark4" data="3">
            bookmark 4
        </li>
        <li class="bookmark5" data="4">
            bookmark 5
        </li>
        <li class="bookmark6" data="5">
            bookmark 6
        </li>
    </ul>
</div>
<div class="owl-carousel owlExample">
    <div class="item" id="bookmark1">
        <p>
            1
        </p>
    </div>
    <div class="item" id="bookmark2">
        <p>
            2
        </p>
    </div>
    <div class="item" id="bookmark3">
        <p>
            3
        </p>
    </div>
    <div class="item" id="bookmark4">
        <p>
            4
        </p>
    </div>
    <div class="item" id="bookmark5">
        <p>
            5
        </p>
    </div>
    <div class="item" id="bookmark6">
        <p>
            6
        </p>
    </div>
</div>

 <link rel="stylesheet" type="text/css" href="https://www.bigbugfactory.pl/assets/owl/owl.carousel.css">
 <link rel="stylesheet" type="text/css" href="https://www.bigbugfactory.pl/assets/owl/owl.theme.css">
 <style type="text/css" media="screen">
 .bookmarks {
  margin-bottom: 50px;
  ul {
   display: block;
   border: 1px solid #ccc;
   border-radius: 4px;
   width: 640px;
   padding: 5px 0;
   margin: auto;
   @media (max-width: 767px) {
    width: 120px;
   }
   @media (min-width:480px) and (max-width:767px) {
    width: 180px;
   }
   li {
    display: inline-block;
    text-transform: uppercase;
    color: #ccc;
    letter-spacing: 1px;
    padding: 0 10px;
    cursor: pointer;
    font: {
     size: 11px;
     family: 'Arial';
    }
    @media (max-width:767px) {
     padding: 11px 11px;
     font-size: 12px;
     text-align: center;
     display: none;
    }
    &.active {
     color: blue;
     @media (max-width: 767px) {
      display: block;
     }
    }
   }
  }
 }
 .owlExample {
  .item {
   width: 400px;
   height: 200px;
   margin: auto;
   background: #6c6ea0;
   padding: 20px;
   @media (max-width: 767px) {
    width: 200px;
    height: 100px;
   }
   p {
    margin: 0;
    color: #fff;
    text-align: right;
    font: {
     family: 'Arial';
     size: 50px;
    }
   }
  }
  .owl-controls {
   position: absolute;
   top: 60px;
   width: 100%;
   @media (max-width: 767px) {
    top: -90px;
   }
   .owl-nav {
    div {
     position: absolute;
     letter-spacing: .5px;
     text-transform: uppercase;
     transition: all .4s linear;
     font: {
      family: 'Arial';
      size: 30px;
     }
     @media (max-width:767px) {
      font-size: 16px;
     }
     &:hover {
      letter-spacing: 2px;
      color: #ff1053;
     }
     &.owl-prev {
      left: 50px;
      @media (max-width: 767px) {
       left: 20px;
      }
     }
     &.owl-next {
      right: 50px;
      @media (max-width: 767px) {
       right: 20px;
      }
     }
    }
   }
  }
 }
 </style>

 <script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="https://www.bigbugfactory.pl/assets/owl/owl.carousel.js" type="text/javascript" charset="utf-8"></script>
 <script>
 var action = false,
  clicked = false;
 var Owl = {
  init: function() {
   Owl.carousel();
  },
  carousel: function() {
   var owl;
   $(document).ready(function() {
    owl = $('.owlExample').owlCarousel({
     items: 1,
     center: true,
     nav: true,
     dots: true,
     loop: true,
     margin: 10,
     dotsContainer: '.test',
     navText: ['prev', 'next'],
    });
    $('.bookmarks').on('click', 'li', function(e) {
     owl.trigger('to.owl.carousel', [$(this).index(), 300]);
    });
   });
  }
 };
 $(document).ready(function() {
  Owl.init();
 });
 </script>