title: Add class then remove on change of owl carousel
body: <p>I am detecting when my owl carousel changes, then firing my <strong>change</strong> function which simply gets the number of slide and adds a class to one of the parent divs.</p>
  
  <pre><code>function change(event) {
    // Listen to owl events:
    var item = event.page.index;
    $('.venue-whats-on').toggleClass('rotw-'+item+'');
  }
  </code></pre>
  
  <p>At the moment, jquery is adding the class but when it changes again, the old class remains whilst it puts another.</p>
  
  <pre><code>&lt;div class="venue-whats-on rotw-1 rotw-2 rotw-3"&gt;
  </code></pre>
  
  <p>How could I remove the previous <strong>rotw-*</strong> class and replace it with a new/next one?</p>