Issue with jQuery-based carousel and window resize

Question

I have a weird bug in my code that is causing my carousel to act funny if the window is resized.

I haven't been able to pin-point what may be causing the issue, but if you run the code and then resize the window, the carousel will start to move back and forth rapidly, avoiding the 10-second timer that I have placed on it.

Here is a link to my example fiddle: https://jsfiddle.net/zeropsi/ufvLn25b/

Any thoughts?

I don't know what the bug is but can reproduce the error. Looks like the more you resize, the more repetitions it does (ie just resize a tiny bit and it'll just go back and forth one/twice but do it a huge amount up and down and it'll repeat 10-12 times or more). — Taryn East, Dec 19 '17 at 04:06
downvotes probably because you don't have your code in your question, so it doesn't fit the standard S/O format ;) (I'm guessing - I didn't downvote) — Taryn East, Jan 08 '18 at 01:51

score 1 · Answer 1 · answered Dec 19 '17 at 10:59

The trouble is when window is being resized, the window.resize gets triggered a number of times and because of that carousel keeps sliding rapidly. I searched for 'jquery window resize trigger once complete' and found help. This is how I modified your code from the fiddle.

        <script>

        $(document).ready(function() {
          $(document).on("click", ".carousel-indicators li", function() {
            $(".carousel-indicators li").removeClass("active");
            var a = $(this).data("slide");
            $(this).addClass("active");
            $("div#billboards").animate({
              "left": (a * -100) + "%"
            });
            $(".billboard").removeClass("active");
            $(".billboard[data-billboard='" + a + "']").addClass("active");
            return false;
          });

        //  var resizeTimer;
        //
        //  $(window).on("resize", function() {
        //      console.log("window resized");
        //      
        //      clearTimeout(resizeTimer);
        //      resizeTimer = setTimeout(function() {
        //        // run code here, resizing has stopped
        //        BillboardCarousel.init();
        //      },10000);
        //    
        //  });

        var id;
        $(window).on("resize", function() {
            clearTimeout(id);
            id = setTimeout(doneResizing, 500);

        });

        function doneResizing(){
          BillboardCarousel.init();
        }

          if ($("section#carousel").length === 1) {
            BillboardCarousel.init();
          }

        });

        var BillboardCarousel = {
          init: function() {
            BillboardCarousel.resize();
          },
          imagesLoaded: function() {
            var imagesLoaded = 0;
            $(".billboard").each(function() {
              var image = new Image();
              image.src = $(this).data("image");
              image.onload = function() {
                imagesLoaded++;
                if (imagesLoaded === $(".billboard").length) {
                  BillboardCarousel.startCarousel();
                }
              };
            });
          },
          startCarousel: function() {
            var interval = parseInt($("div#billboards").data('interval'));
            window.setInterval(function() {
              BillboardCarousel.timer();
            }, 10000);
          },
          resize: function() {
            var a = $(".billboard").length;
            var b = $(window).width();
            $(".billboard").css({
              "width": b + "px",
              "float": "left",
              "display": "inline-block"
            });
            $("div#billboards").css({
              "width": a * 100 + "%",
              "left": "0%"
            });
            $("div#billboards").attr("data-interval", 10000);
            BillboardCarousel.imagesLoaded();
          },
          timer: function() {
            var a = $(".billboard.active").data("billboard");
            a++;
            if (a >= $(".billboard").length) {
              a = 0;
            }
            $(".billboard").removeClass("active");
            $(".carousel-indicators li").removeClass("active");
            $(".billboard[data-billboard='" + a + "']").addClass("active");
            $(".carousel-indicators li[data-slide='" + a + "']").addClass("active");
            $("div#billboards").animate({ "left": (a * -100) + "%" });
          }
        };


    </script>

These are a few helpful links - JQuery: How to call RESIZE event only once it's FINISHED resizing? http://jsfiddle.net/Zevan/c9UE5/1/ https://css-tricks.com/snippets/jquery/done-resizing-event/

Issue with jQuery-based carousel and window resize

1 Answers1