I'm having an issue with a TweenMax slider.
In particular, after the first fire basically when I resize the window the images in the div go flying, they exit out of the screen and so on: video of the issue..
This is the code I'm using to make the slider work:
function funct_tween() {
console.log("SLIDER IMAGES EXIST NOW");
var s = $('.slider'),
sWrapper = s.find('.slider-wrapper'),
sItem = s.find('.slide'),
btn = s.find('.slider-link'),
sWidth = sItem.width(),
sCount = sItem.length,
slide_date = s.find('.slide-date'),
slide_title = s.find('.slide-title'),
slide_text = s.find('.slide-text'),
slide_more = s.find('.slide-more'),
slide_image = s.find('.slide-image img'),
sTotalWidth = sCount * sWidth;
sWrapper.css('width', sTotalWidth);
var clickCount = 0;
btn.on('click', function (e) {
e.preventDefault();
if ($(this).hasClass('next')) {
console.log("clicked next");
(clickCount < (sCount - 1)) ? clickCount++ : clickCount = 0;
} else if ($(this).hasClass('prev')) {
(clickCount > 0) ? clickCount-- : (clickCount = sCount - 1);
}
TweenMax.to(sWrapper, 0.4, {x: '-' + (sWidth * clickCount)})
var fromProperties = {autoAlpha: 0, x: '-50', y: '-10'};
var toProperties = {autoAlpha: 0.8, x: '0', y: '0'};
TweenLite.fromTo(slide_image, 1, {autoAlpha: 0, y: '40'}, {autoAlpha: 1, y: '0'});
TweenLite.fromTo(slide_date, 0.4, fromProperties, toProperties);
TweenLite.fromTo(slide_title, 0.6, fromProperties, toProperties);
TweenLite.fromTo(slide_text, 0.8, fromProperties, toProperties);
TweenLite.fromTo(slide_more, 1, fromProperties, toProperties);
});
}
(function ($) {
$(document).ready(function () {
console.log("Slider function-document is ready");
funct_tween();
});
})(jQuery);
And this is a snippet I made to show the issue I'm having: JSfiddle Link. Does anyone know what's causing this issue?
At first I thought it could be related to the sWrapper property being called once and not on window resize, so I tried to add an event that gets fired on window resize;
$(window).resize(function () {
funct_tween();
});
but it didn't solve the issue...
Could anyone help me out troubleshooting where is the issue at? Even just pointing me to the right direction would help me a lot.
Thank you guys in advance.