Basic slider designed to be integrated with WordPress Visual Composer.

slicky.js

/**
 * @author Gabe Rose (gabe.s.rose@gmail.com)
 * Plugin Description:
 * This is a simple slider plugin designed to be used in WordPress Visual Composer to make easily customizable sliders.
 * @TODO: Reduce specifity so it can actually be used separate builds.
 */

var index = 1,
	maxIndex = 3,
	newIndex,
	isRunning = false,
	$wrapper = jQuery('.stories-slider-wrapper > .column_container > .wpb_wrapper');


// Setting data values for each slide so that we can grab slides by their original position.
jQuery('.slide').each(function() {
	jQuery(this).attr('data-index', index);
	index++;
});

//Initial actives slide
var $activeSlide = jQuery('.slide-top');


// Here's where the magic happens
jQuery('.stories-pagination-prev').click(function() {
	if (isRunning) {return;}
	isRunning = true;
	var $activeSlideIndex = $activeSlide.attr('data-index');
	// Prevents out of index errors
	if ($activeSlideIndex <= 1) {
		newIndex = 3;
	}else {
		newIndex = $activeSlideIndex - 1;
	}

	//Places our next slide underneath the current slide. This wil make it easy to implement nav buttons in the future if necessary.
	jQuery('.slide[data-index="' +  newIndex + '"').insertAfter($wrapper.children(':first'));


	$wrapper.animate({
		left: "-=" + $wrapper.parent().width()
	}, 1000, function() {
		//$activeSlide.removeClass('slide-top');
		$wrapper.css('left', '0').children(':first').appendTo($wrapper);
		setNewActive();
	});

	isRunning = false;



});

jQuery('.stories-pagination-next').click(function() {
	if (isRunning) {return;}
	var $activeSlideIndex = $activeSlide.attr('data-index');
	if ($activeSlideIndex >= 3) {
		newIndex = 1;
	}else {
		newIndex = Number($activeSlideIndex) + 1;
	}

	console.log('New Index: '+ newIndex);
	// Because everything is floating left, we need to absolutely position the next slide so that we don't slide right to white
	jQuery('.slide[data-index="' +  newIndex + '"').addClass('next').insertBefore($wrapper.children(':first'));

	$activeSlide.animate({
			left: "+=" + $wrapper.parent().width()
		}, 1000, function() {
			//$activeSlide.removeClass('slide-top');
			$activeSlide.css('left', '0');
			//Because technically our newest slide is on top, we have to append the 2nd child to maintain pagination order
			$wrapper.children(':nth-of-type(2)').appendTo($wrapper);
			setNewActive();
			$activeSlide.removeClass('next');
		});


	isRunning = false;


});

function setNewActive() {
	$activeSlide = jQuery('.slide[data-index="' +  newIndex + '"');
	//$activeSlide.addClass('slide-top');
	//$activeSlide.removeClass('slide-next');
}