CODEWITHSUNDEEP
javascriptjqueryhtmlcss
wegelagerer
wegelagerer

Reputation: 3720

jQuery slider not displaying effects on first slide load

I'm new to jQuery and I have a problem that, I believe, for some of you will be a piece of cake. :)

I created custom a custom image slider which works almost as I wanted it to work except for one thing. Effects that should occur on every slide transition are displayed only after passing through all of the slides. Before that they display instantly - no effect at all.

Here is the JSFiddle link and the code snippet is below.

        $(document).ready(function () {

        var slideHovered = null;
        var slideDuration = 7000;
        var slideEffectDuration = 2500;

        //Initial hiding of inactive slides - is it actually necessary?
        $('.slide:not(.active)').each(function () {
            $(this).css({
                "visibility": "hidden"
            });
        });

        //Check if mouse is hovering over slider
        setInterval(function () {
            slideHovered = $('.leftContentWrapper').is(":hover");
        }, 500);

        //Function to start slideshow
        function startSlides(slideDirection) {
            var slideNumber = $('.slide.active').data('slide');
            var highestSlideNumber = null;

            //Function to find highest slide number
            $('.slide').each(function () {
                var value = parseFloat($(this).attr('data-slide'));
                highestSlideNumber = (value > highestSlideNumber) ? value : highestSlideNumber;
            });

            slideNumber = slideDirection == 'next' ? slideNumber = slideNumber + 1 : slideNumber = slideNumber - 1;
            slideNumber = slideNumber <= 0 ? slideNumber = highestSlideNumber : slideNumber = slideNumber;
            slideNumber = slideNumber > highestSlideNumber ? slideNumber = 1 : slideNumber = slideNumber;

            $('.slide.active').removeClass('active').hide();
            $('[data-slide="' + slideNumber + '"]').addClass('active').fadeIn(slideEffectDuration, function () {});
            $('.slide.active').css({
                'visibility': 'visible'
            });
        }

        //Function to change slide every x seconds if there is no hovering over
        setInterval(function () {
            if (slideHovered === false) {
                startSlides('next');
            } else {
                return false;
            }
        }, slideDuration);

        $('.control').click(function () {
            var slideDirection = $(this).attr('id');
            startSlides(slideDirection);
        });
    });

P.S. Any additional code suggestion or advice is appreciated.

Upvotes: 0

Views: 107

Answers (1)

Aboba
Aboba

Reputation: 286

Your initial hide is the problem, change it to:

            $(this).css({
                "display": "none"
            });

Upvotes: 1

Related Questions