jnsdbr/gsap_slider.html

## gsap_slider.html
<html>
<head>
<title>Slider test</title>
<style>
* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    font-family: 'Roboto';
}

.slideshow {
    position: relative;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
    display: block;
    height: 80%;
    overflow: hidden;
}

li {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 1em 0.5em;
    font-size: 120px;
}
</style>
<script>
var Slider = {
    elementName: null,
    element: null,
    viewWidth: 0,
    viewHeight: 0,
    currentPos: 0,
    startPos: 0,
    loopInterval: null,
    defaultOptions: {
        autoplay: false,
        timer: 10
    },
    settings: {},
    currentSlide: 0,
    loop: null,

    init: function(options) {
        var _this = this;
        this.element = document.querySelector(options.element);
        this.elementName = options.element;

        // Resize
        this.resizeListener();

        // Clone first element
        var ul = this.element.querySelector('ul');
        var firstLiClone = ul.children[0].cloneNode(true);
        var lastLiClone = ul.children[ul.children.length - 1].cloneNode(true);
        ul.appendChild(firstLiClone);
        ul.insertBefore(lastLiClone, ul.children[0]);

        this.currentPos -= this.viewWidth;
        this.startPos = this.currentPos;
        TweenLite.to(ul, 0, {
            x: _this.currentPos
        });

        this.settings.element = options.element;
        this.settings.elementName = options.element;

        if (options.autoplay) {
            var timer = this.defaultOptions.timer;
            if (options.timer) {
                timer = options.timer;
            }

            this.settings.timer = timer;
            this.settings.autoplay = true;
            this.setLoop();
        }

        window.addEventListener('resize', function() {
            _this.resizeListener();
        }, true);
    },
    setLoop: function() {
        var _this = this;
        this.loop = setInterval(function() {
            _this.nextSlide();
        }, _this.settings.timer * 1000);
    },
    removeLoop: function() {
        clearInterval(this.loop);
    },
    resizeListener: function() {
        this.viewWidth = parseInt(window.getComputedStyle(this.element).width.slice(0, -2));
        this.viewHeight = parseInt(window.getComputedStyle(this.element).height.slice(0, -2));

        // Set ul width
        var ul = document.querySelector(this.elementName + ' ul');
        var ulWidth = 0;

        for (var i = 0; i < ul.children.length; i++) {
            ul.children[i].style.width = this.viewWidth + 'px';
            ulWidth += parseInt(this.viewWidth);
        }
        ul.style.width = ulWidth + 'px';
    },
    nextSlide: function(slideDelay) {
        var _this = this;
        var ul = this.element.querySelector('ul');

        this.currentPos -= this.viewWidth;
        this.currentSlide++;

        if (this.currentSlide == ul.children.length - 1) {
            this.currentPos = this.startPos;
            this.currentSlide = 0;

            TweenLite.to(ul, 0, {
                x: this.startPos,
                delay: 0,
                onComplete: function() {
                    _this.nextSlide();
                }
            });
        }
        else {
            TweenLite.to(ul, 1, {
                x: _this.currentPos,
                delay: slideDelay
            });
        }
    },
    prevSlide: function(slideDelay) {
        var _this = this;
        var ul = this.element.querySelector('ul');

        this.currentPos += this.viewWidth;
        this.currentSlide--;

        if (this.currentSlide == -2) {
            this.currentPos = -this.viewWidth * (ul.children.length - 2);
            this.currentSlide = ul.children.length - 3;

            TweenLite.to(ul, 0, {
                x: _this.currentPos,
                delay: 0,
                onComplete: function() {
                    _this.prevSlide();
                }
            });
        } else {
            TweenLite.to(ul, 1, {
                x: _this.currentPos,
                delay: slideDelay
            });
        }
    }
};
</script>
</head>

<body>
    <div class="slideshow">
        <ul>
            <li style="background: red">1</li>
            <li style="background: orange">2</li>
            <li style="background: yellow">3</li>
            <li style="background: green">4</li>
        </ul>
    </div>
    <button id="prev">Prev</button>
    <button id="next">Next</button>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/ScrollToPlugin.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
    Slider.init({
        element: '.slideshow',
        timer: 3,
        autoplay: true
    });
});
document.onkeyup = function(e) {
    var key = e.keyCode ? e.keyCode : e.which;
    if (key == 39) {
        Slider.nextSlide();
    }
    if (key == 37) {
        Slider.prevSlide();
    }
};
document.getElementById('next').addEventListener('click', function(e) {
    Slider.removeLoop();
    Slider.nextSlide(0);
});
document.getElementById('prev').addEventListener('click', function(e) {
    Slider.removeLoop();
    Slider.prevSlide(0);
});
</script>
</html>
	<html>
	<head>
	<title>Slider test</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
	font-family: 'Roboto';
	}

	.slideshow {
	position: relative;
	font-size: 0;
	line-height: 0;
	white-space: nowrap;
	display: block;
	height: 80%;
	overflow: hidden;
	}

	li {
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: 1em 0.5em;
	font-size: 120px;
	}
	</style>
	<script>
	var Slider = {
	elementName: null,
	element: null,
	viewWidth: 0,
	viewHeight: 0,
	currentPos: 0,
	startPos: 0,
	loopInterval: null,
	defaultOptions: {
	autoplay: false,
	timer: 10
	},
	settings: {},
	currentSlide: 0,
	loop: null,

	init: function(options) {
	var _this = this;
	this.element = document.querySelector(options.element);
	this.elementName = options.element;

	// Resize
	this.resizeListener();

	// Clone first element
	var ul = this.element.querySelector('ul');
	var firstLiClone = ul.children[0].cloneNode(true);
	var lastLiClone = ul.children[ul.children.length - 1].cloneNode(true);
	ul.appendChild(firstLiClone);
	ul.insertBefore(lastLiClone, ul.children[0]);

	this.currentPos -= this.viewWidth;
	this.startPos = this.currentPos;
	TweenLite.to(ul, 0, {
	x: _this.currentPos
	});

	this.settings.element = options.element;
	this.settings.elementName = options.element;

	if (options.autoplay) {
	var timer = this.defaultOptions.timer;
	if (options.timer) {
	timer = options.timer;
	}

	this.settings.timer = timer;
	this.settings.autoplay = true;
	this.setLoop();
	}

	window.addEventListener('resize', function() {
	_this.resizeListener();
	}, true);
	},
	setLoop: function() {
	var _this = this;
	this.loop = setInterval(function() {
	_this.nextSlide();
	}, _this.settings.timer * 1000);
	},
	removeLoop: function() {
	clearInterval(this.loop);
	},
	resizeListener: function() {
	this.viewWidth = parseInt(window.getComputedStyle(this.element).width.slice(0, -2));
	this.viewHeight = parseInt(window.getComputedStyle(this.element).height.slice(0, -2));

	// Set ul width
	var ul = document.querySelector(this.elementName + ' ul');
	var ulWidth = 0;

	for (var i = 0; i < ul.children.length; i++) {
	ul.children[i].style.width = this.viewWidth + 'px';
	ulWidth += parseInt(this.viewWidth);
	}
	ul.style.width = ulWidth + 'px';
	},
	nextSlide: function(slideDelay) {
	var _this = this;
	var ul = this.element.querySelector('ul');

	this.currentPos -= this.viewWidth;
	this.currentSlide++;

	if (this.currentSlide == ul.children.length - 1) {
	this.currentPos = this.startPos;
	this.currentSlide = 0;

	TweenLite.to(ul, 0, {
	x: this.startPos,
	delay: 0,
	onComplete: function() {
	_this.nextSlide();
	}
	});
	}
	else {
	TweenLite.to(ul, 1, {
	x: _this.currentPos,
	delay: slideDelay
	});
	}
	},
	prevSlide: function(slideDelay) {
	var _this = this;
	var ul = this.element.querySelector('ul');

	this.currentPos += this.viewWidth;
	this.currentSlide--;

	if (this.currentSlide == -2) {
	this.currentPos = -this.viewWidth * (ul.children.length - 2);
	this.currentSlide = ul.children.length - 3;

	TweenLite.to(ul, 0, {
	x: _this.currentPos,
	delay: 0,
	onComplete: function() {
	_this.prevSlide();
	}
	});
	} else {
	TweenLite.to(ul, 1, {
	x: _this.currentPos,
	delay: slideDelay
	});
	}
	}
	};
	</script>
	</head>

	<body>
	<div class="slideshow">
	<ul>
	<li style="background: red">1</li>
	<li style="background: orange">2</li>
	<li style="background: yellow">3</li>
	<li style="background: green">4</li>
	</ul>
	</div>
	<button id="prev">Prev</button>
	<button id="next">Next</button>
	</body>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/ScrollToPlugin.min.js"></script>
	<script>
	document.addEventListener('DOMContentLoaded', function(e) {
	Slider.init({
	element: '.slideshow',
	timer: 3,
	autoplay: true
	});
	});
	document.onkeyup = function(e) {
	var key = e.keyCode ? e.keyCode : e.which;
	if (key == 39) {
	Slider.nextSlide();
	}
	if (key == 37) {
	Slider.prevSlide();
	}
	};
	document.getElementById('next').addEventListener('click', function(e) {
	Slider.removeLoop();
	Slider.nextSlide(0);
	});
	document.getElementById('prev').addEventListener('click', function(e) {
	Slider.removeLoop();
	Slider.prevSlide(0);
	});
	</script>
	</html>