JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-once/2.2.1/jquery.once.min.js"></script>
<div class="owl-controls">

  <div class="owl-nav owl-nav--prev blue pad--right text--no-wrap" style="">« Previous </div>

  <div class="owl-dots" style="">
    <div class="owl-dot has-counter active"><span>1</span></div>
    <div class="owl-dot has-counter"><span>2</span></div>
    <div class="owl-dot has-counter"><span>3</span></div>
    <div class="owl-dot has-counter"><span>4</span></div>
    <div class="owl-dot has-counter"><span>5</span></div>
  </div>

  <div class="owl-nav owl-nav--next blue pad--left text--no-wrap" style="">Next »</div>

</div>

JavaScript

//$('.owl-nav--next').insertAfter('.owl-nav--prev');

//$('.owl-nav--prev').nextUntil('.owl-dots').andSelf().css('background', '#F00');

//$('.owl-nav--prev').nextUntil('.owl-dots').andSelf().wrapAll('<div style="background: #FFCC00">');

/* $('.owl-nav--next').insertAfter('.owl-nav--prev');
$('.owl-nav--prev').nextUntil('.owl-dots').andSelf().wrapAll("<div class='owl-nav-wrap' style='background: #FFCC00;'></div>"); */



/* 
$('.owl-dots').insertAfter('.owl-nav--next');

  $('.owl-nav--prev, .owl-nav--next').one().wrapAll('<div class="new-wrap-1" />'); */

/* 
$('.owl-controls').once('mybehavior').each(function() {
  $('.owl-dots').insertAfter('.owl-nav--next');
  $('.owl-nav--prev, .owl-nav--next').wrapAll('<div class="new-wrap-1" />');
}); */


if ($('.owl-nav-wrap').length === 0) {
  $('.owl-dots').insertAfter('.owl-nav--next');
  $('.owl-nav--prev, .owl-nav--next').wrapAll('<div class="owl-nav-wrap" />');
}