carousel + instagram

by Anton Kolesnikov

HTML

<script src="http://www.macmachine.ru/assets/templates/macmachine_v1/js/instafeed.min.js"></script>
<script src="http://www.macmachine.ru/assets/templates/macmachine_v1/js/instafeed_frontend_2.js"></script>
<span class="insta_title"><i class="fa fa-instagram"></i> Наш Instagram</span>
<div id="instafeed"></div>

CSS

#instafeed {
  margin: 10px 0;
  width: 580px; /* Update to your slider width */
  height: 250px; /* Update to your slider height */
  position: relative;
  overflow: hidden;
}

.insta_element {
  display: none;
  position: absolute; 
  top: 0; 
  left: 0; 
}

JavaScript

// settings
var $slider = $('#instafeed'); // class or id of carousel slider
var $slide = '.insta_element'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 2000; // 4 seconds

function slides(){
  return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll 
$interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();
    
      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);
    
      if (slides().length == $i + 1) $i = -1; // loop to start
    
      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
);