jQuery addClass example

Change class name on click in jQuery

by Aditya Sharma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<div class="slider">
<div>
  <select name="test" multiple="" class="selectpicker" data-container="body">
  <option value="Created" data-subtext="">Created (91)</option>
  <option value="Approved" data-subtext="">Approved (6038)</option>
  <option value="Completed" data-subtext="">Completed (477)</option>
   <option value="Held" data-subtext="">Held (54)</option>
   <option value="Rejected" data-subtext="">Rejected (4)</option>
   <option value="Cancelled" data-subtext="">Cancelled (71)</option>
   <option value="Authorized" data-subtext="">Authorized (1)</option>
</select>
</div>
<div>
  <select name="test" multiple="" class="selectpicker" data-container="body">
  <option value="Created" data-subtext="">Created (91)</option>
  <option value="Approved" data-subtext="">Approved (6038)</option>
  <option value="Completed" data-subtext="">Completed (477)</option>
   <option value="Held" data-subtext="">Held (54)</option>
   <option value="Rejected" data-subtext="">Rejected (4)</option>
   <option value="Cancelled" data-subtext="">Cancelled (71)</option>
   <option value="Authorized" data-subtext="">Authorized (1)</option>
</select>

</div>
<div>
  <select name="test" multiple="" class="selectpicker" data-container="body">
  <option value="Created"...

JavaScript

// A $( document ).ready() block.
$( document ).ready(function() {
    var slickEle = jQuery(".slider");
    slickEle.slick({
      dots: false,
      infinite: true,
      variableWidth: false,
      slidesToShow: 1,
      slidesToScroll: 2,
      touchMove : true,
      mobileFirst: true
    })
    
    jQuery(window).resize(function(){
      console.log("====")
      slickEle.slick("refresh");
    })
});