Hover slider

custom module - https://prnt.sc/nip624
output - https://prnt.sc/nip6cn
demo - http://huronassociates-5576036.hs-sites.com/ , http://huronassociates.com/


HTML ==============

<div class="cycle-slider-wrapper {{ module.content_size }}">
  <h2 style="text-align: center" class="cycle-slider-heading">{{ module.heading }}</h2>
  <div class="cycle-slider-box loop_{{ module.item|length }}">
    {% for item in module.item %}
    <div class="cycle-slider-box-item item_{{ loop.index }}">
      <div class="icon-wrapper">
        <div class="mpc-icon-wrap">
          <i class="mpc-icon-part mpc-regular mpc-transition  etl etl-{{ item.icon_name }}"></i>
        </div>
      </div>
      <div class="content-wrapper">
        <div class="content-wrapper-inner">
          <h3 class="content-heading">{{ item.title }}</h3>
          <div class="content-section">
            <p>{{ item.content }}</p>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>


JS ===============

$('.cycle-slider-wrapper .cycle-slider-box .cycle-slider-box-item:first-child').addClass('active');
$('.cycle-slider-wrapper .cycle-slider-box .cycle-slider-box-item.active .icon-wrapper').addClass('wow animated pulse active').parent().siblings('.cycle-slider-box-item').find('.icon-wrapper').removeClass('wow animated pulse active');


function eachSlide (){
  if ( $('.cycle-slider-wrapper .cycle-slider-box .cycle-slider-box-item.active').next('.cycle-slider-box-item').length > 0 ){
    $('.cycle-slider-wrapper .cycle-slider-box .cycle-slider-box-item.active').removeClass('active').next('.cycle-slider-box-item').addClass('active');
  }else{
    $('.cycle-slider-wrapper .cycle-slider-box .cycle-slider-box-item.active').removeClass('active').siblings('.cycle-slider-box-item:first-child').addClass('active');
  }
  $('.cycle-slider-wrapper .cycle-slider-box .cycle-slider-box-item.active .icon-wrapper').addClass('wow animated pulse active').parent().siblings('.cycle-slider-box-item').find('.icon-wrapper').removeClass('wow animated pulse active');
}

var mySlider = setInterval(eachSlide, 5000);

$('.cycle-slider-wrapper .cycle-slider-box .cycle-slider-box-item .icon-wrapper').hover(function(){
  clearInterval(mySlider);
  $(this).parent().addClass('active').siblings().removeClass('active');
  $('.cycle-slider-wrapper .cycle-slider-box .cycle-slider-box-item.active .icon-wrapper').addClass('wow animated pulse active').parent().siblings('.cycle-slider-box-item').find('.icon-wrapper').removeClass('wow animated pulse active');
  mySlider = setInterval(eachSlide, 5000);
});