<div class="carousel">


    <div class="carousel__content">
        <div class="item">
    <p class="title">First</p>
    <img src="http://placehold.it/1800x850/70AD96/FFF&text=&nbsp;" alt="">
  </div>
        <div class="item">
    <p class="title">Second</p>
    <img src="http://placehold.it/1800x850/EA4E23/FFF&text=&nbsp;" alt="">
  </div>
        <div class="item">
    <p class="title">Third</p>
    <img src="http://placehold.it/1800x850/9BA452/FFF&text=&nbsp;" alt="">
  </div>
        <div class="item">
    <p class="title">Fourth</p>
    <img src="http://placehold.it/1800x850/472D38/FFF&text=&nbsp;" alt="">
  </div>
        <div class="item">
    <p class="title">Fifth</p>
    <img src="http://placehold.it/1800x850/F77C85/FFF&text=&nbsp;" alt="">
  </div>
        <div class="item">
    <p class="title">Sixth</p>
    <p class="title title--sub">Last Item</p>
    <img src="http://placehold.it/1800x850/00FFAE/FFF&text=&nbsp;" alt="">
  </div>
    </div>

<div class="carousel__nav">
  <a href="#" class="nav nav--left">Previous</a>
  <a href="#" class="nav nav--right">Next</a>
</div>

( function () {
var carouselContent, carouselIndex, carouselLength, firstClone, firstItem, isAnimating, itemWidth, lastClone, lastItem;
carouselContent = $('.carousel__content');
carouselIndex = 0;
carouselLength = carouselContent.children().length;
isAnimating = false;
itemWidth = 100 / carouselLength;
firstItem = $(carouselContent.children()[0]);
lastItem = $(carouselContent.children()[carouselLength - 1]);
firstClone = null;
lastClone = null;
carouselContent.css('width', carouselLength * 100 + '%');
carouselContent.transition({ x: carouselIndex * -itemWidth + '%' }, 0);
$.each(carouselContent.children(), function () {
    return $(this).css('width', itemWidth + '%');
});
$('.nav--left').on('click', function () {
    if (isAnimating) {
        return;
    }
    isAnimating = true;
    carouselIndex--;
    if (carouselIndex === -1) {
        lastItem.prependTo(carouselContent);
        carouselContent.transition({ x: (carouselIndex + 2) * -itemWidth + '%' }, 0);
        return carouselContent.transition({ x: (carouselIndex + 1) * -itemWidth + '%' }, 1000, 'easeInOutExpo', function () {
            carouselIndex = carouselLength - 1;
            lastItem.appendTo(carouselContent);
            carouselContent.transition({ x: carouselIndex * -itemWidth + '%' }, 0);
            return isAnimating = false;
        });
    } else {
        return carouselContent.transition({ x: carouselIndex * -itemWidth + '%' }, 1000, 'easeInOutExpo', function () {
            return isAnimating = false;
        });
    }
});
$('.nav--right').on('click', function () {
    if (isAnimating) {
        return;
    }
    isAnimating = true;
    carouselIndex++;
    return carouselContent.transition({ x: carouselIndex * -itemWidth + '%' }, 1000, 'easeInOutExpo', function () {
        isAnimating = false;
        if (firstClone) {
            carouselIndex = 0;
            carouselContent.transition({ x: carouselIndex * -itemWidth + '%' }, 0);
            firstClone.remove();
            firstClone = null;
            carouselLength = carouselContent.children().length;
            itemWidth = 100 / carouselLength;
            carouselContent.css('width', carouselLength * 100 + '%');
            $.each(carouselContent.children(), function () {
                return $(this).css('width', itemWidth + '%');
            });
            return;
        }
        if (carouselIndex === carouselLength - 1) {
            carouselLength++;
            itemWidth = 100 / carouselLength;
            firstClone = firstItem.clone();
            firstClone.addClass('clone');
            firstClone.appendTo(carouselContent);
            carouselContent.css('width', carouselLength * 100 + '%');
            $.each(carouselContent.children(), function () {
                return $(this).css('width', itemWidth + '%');
            });
            return carouselContent.transition({ x: carouselIndex * -itemWidth + '%' }, 0);
        }
    });
});

function skinsave_2016_slider() {
wp_enqueue_script('skinsave_2016-slider-js', content_url('/js/slider-js.js'), array(), null, true);
}
add_action('wp_head', 'skinsave_2016_slider');

<script type="text/javascript" src="<?php bloginfo('skinsave_2016'); ?>/js/slider-js.js"></script>