Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

123
Visualizações
Tweenmax slider resizing issue after first fire

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.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda