Flexslider Issue

by Baliga

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/jquery.flexslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/flexslider.min.css">
<div class="flexslider custom_slider" style="direction:ltr">
  <ul class="slides">
    <li>
      <div class="slider_image" style="background: url(https://homepages.cae.wisc.edu/~ece533/images/airplane.png) center/cover no-repeat;"></div>
    </li>
    <li>
      <div class="slider_image" style="background: url(https://homepages.cae.wisc.edu/~ece533/images/arctichare.png) center/cover no-repeat;"></div>
    </li>
    <li>
      <div class="slider_image" style="background: url(https://homepages.cae.wisc.edu/~ece533/images/baboon.png) center/cover no-repeat;"></div>
    </li>
    <li>
      <div class="slider_image" style="background: url(https://homepages.cae.wisc.edu/~ece533/images/mountain.png) center/cover no-repeat;"></div>
    </li>
    <li>
      <div class="slider_image" style="background: url(https://homepages.cae.wisc.edu/~ece533/images/cat.png) center/cover no-repeat;"></div>
    </li>
    <li>
      <div class="slider_image" style="background: url(https://homepages.cae.wisc.edu/~ece533/images/fruits.png) center/cover no-repeat;"></div>
    </li>
  </ul>
  <div class="custom_navigation tab_mob_hide">
    <a href="#" class="flex_prev flex_nav_btn">Prev</a>
    <a href="#" class="flex_next flex_nav_btn">Next</a>
  </div>
</div>

CSS

.section_carousel {
  height: 504px;
}

.custom_slider {
  background: transparent;
}

.custom_slider .flex-viewport,
.custom_slider .slides,
.custom_slider.flexslider {
  height: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
}

.custom_navigation .flex_nav_btn {
  background: url('images/apartments/gallery_left_arrow.svg') center no-repeat rgba(255, 255, 255, .9);
  display: inline-block;
  font-size: 0;
  height: 53px;
  position: absolute;
  width: 53px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.custom_navigation .flex_prev {
  left: 0;
}

.custom_navigation .flex_next {
  right: 0;
  transform: translateY(-50%) rotate(180deg);
}

.custom_slider .flex-control-paging li a {
  background: transparent;
  border: 1px solid #fff;
  box-shadow: none;
  height: 10px;
  width: 10px;
}

.custom_slider .flex-control-paging li a.flex-active {
  background: #fff;
}

.custom_slider .flex-control-nav {
  bottom: 8px;
  display: none;
}

.custom_slider.flexslider .slides>li {
  height: 100%;
}

.slider_image {
  height: 504px;
  width: 100%;
}

JavaScript

$(document).ready(function() {
  /* store the slider in a local variable */
  var $window = $(window),
    flexslider = {
      vars: {}
    };

  $('.custom_slider').flexslider({
    animation: "slide",
    controlNav: true,
    animationLoop: true,
    slideshow: true,
    directionNav: true,
    itemWidth: getSliderItemWidth(),
    itemMargin: 20,
    customDirectionNav: $(".custom_navigation a"),
    start: function(slider) {
      flexslider = slider;
    },
    after: function(slider) {
      slider.resize();
      /* auto-restart player if paused after action */
      if (!slider.playing) {
        slider.play();
      }
    }
  });

  /* check slider width on resize event */
  $window.resize(function() {
    var sliderItemWidth = getSliderItemWidth();
    flexslider.vars.itemWidth = sliderItemWidth;
  });


  function getSliderItemWidth() {
    var windowWidth = $(window).width(),
      desktopSliderWidth = (windowWidth / 2) - 70,
      sliderItemWidth = (windowWidth > 768) ? 		     desktopSliderWidth : windowWidth;
    return sliderItemWidth;
  }

});