title: owl carousel navigation dots change active class smoothly
body: <p>In owl carousel, I want a transition in dots navigation I tried to like this but it's not working.
  <a href="https://i.stack.imgur.com/vP11g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vP11g.png" alt="dots Navigation"></a></p>
  
  <pre><code> .slider.owl-theme .owl-dots .owl-dot span {
      display: none;
      position: absolute;
      width: 0; 
      height: 0; 
      top: -34px;
      left: 40%;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-bottom: 30px solid #ffffff;
      margin: 5px 7px;
      transition: all 0.7s ease;
      background: transparent;
   }
  </code></pre>
  
  <p>can anyone suggest me how I will achieve this help will be appreciated.</p>
  
  <p>Thanks in advance...</p>