title: Autostart Function For JavaScript
body: <p>I'm still a beginner at JS and am having trouble with one of my <a href="http://palaceliquorstore.com" rel="nofollow">sites</a>. The homepage features a slider that I would like to autostart.</p>
  
  <p>I have been trying to solve the issue by looking at this Stack Overflow link (<a href="https://stackoverflow.com/questions/21696133/autostart-jquery-slider">Autostart jQuery slider</a>), but the JS on the website template I am using seems to be different.</p>
  
  <p>Below is the JavaScript from the website I am trying to build.</p>
  
  <pre><code>(function($) {
  window.HomePageSlider = {
  
      currentSlide: 0,
  
      init: function() {
          this.container = $("#thb-home-slides");
          this.pictures = $(".thb-home-slide &gt; img");
  
          this.header = $(".header-container");
          this.footer = $(".home-footer-container");
  
          this.captions = $(".thb-home-slide-caption");
          this.banners = $(".thb-banner");
          this.homeExpand = $(".thb-home-expand");
          this.controlNext = $(".thb-home-slides-next");
          this.controlPrev = $(".thb-home-slides-prev");
          this.pagerContainer = $(".thb-home-slides-pager");
          this.pager = $(".thb-home-slides-pager a");
  
          $("body").addClass("thb-loading");
  
          this.bindEvents();
          this.showHideControls();
          this.loadFrontImage();
      },
  
      positionElements: function() {
          var $w = $(window),
              header_height = $(".header-container").outerHeight() + ($("#wpadminbar").length ? 28 : 0),
              footer_height = $(".home-footer-container").outerHeight(),
              diff = parseInt( (footer_height - header_height) / 2, 10 );
  
          if( !footer_height ) {
              footer_height = 48;
          }
  
          HomePageSlider.captions.css({
              'top' : header_height,
              'bottom' : footer_height
          });
  
          if( $("html").hasClass("no-csstransforms") ) {
              HomePageSlider.banners.each(function() {
                  $(this).css("margin-top", - ($(this).outerHeight() / 2) + diff );
              });
          }
          else {
              HomePageSlider.banners.each(function() {
                  $(this).css("margin-top", diff );
              });
          }
  
          HomePageSlider.pagerContainer.css({
              bottom: footer_height
          });
      },
  
      loadFrontImage: function() {
          setTimeout(function() {
              if( ! HomePageSlider.pictures.length ) {
                  HomePageSlider.container.addClass("thb-slider-loaded");
              }
              else {
                  $.thb.loadImage( HomePageSlider.pictures, {
                      imageLoaded: function( image ) {
                          image.parent().thb_stretcher({
                              adapt: false
                          });
  
                          image.parent().addClass("thb-slide-loaded");
                          $("body").removeClass("thb-loading");
  
                          setTimeout(function() {
                              HomePageSlider.container.addClass("thb-slider-loaded");
                          }, 10);
                      }
                  } );
              }
          }, 500);
      },
  
      bindEvents: function() {
          $.thb.key("right", function() {
              HomePageSlider.right();
          });
  
          $.thb.key("left", function() {
              HomePageSlider.left();
          });
  
          HomePageSlider.controlNext.click(function() {
              HomePageSlider.right();
              return false;
          });
  
          HomePageSlider.controlPrev.click(function() {
              HomePageSlider.left();
              return false;
          });
  
          HomePageSlider.homeExpand.click(function() {
              if( $("body").hasClass("w-home-expand") ) {
                  $(this).attr("data-icon", "u");
                  $("body").removeClass("w-home-expand");
              }
              else {
                  $(this).attr("data-icon", "p");
                  $("body").addClass("w-home-expand");
              }
  
              return false;
          });
  
          HomePageSlider.pager.click(function() {
              if( ! HomePageSlider.container.hasClass("thb-slider-loaded") || thb_moving ) {
                  return false;
              }
  
              var target = $(this).data("target");
  
              HomePageSlider.pager.removeClass("active");
              $(this).addClass("active");
  
              if( target !== HomePageSlider.currentSlide ) {
                  if( target &gt; HomePageSlider.currentSlide ) {
                      for(i=HomePageSlider.currentSlide; i&lt;target; i++) {
                          HomePageSlider.right(true);
                      }
                  }
                  else {
                      for(i=HomePageSlider.currentSlide; i&gt;target; i--) {
                          HomePageSlider.left(true);
                      }
                  }
              }
  
              return false;
          });
  
          $('body.thb-mobile').hammer().bind('swipeleft', function() {
              HomePageSlider.right();
              return false;
          });
  
          $('body.thb-mobile').hammer().bind('swiperight', function() {
              HomePageSlider.left();
              return false;
          });
      },
  
      right: function( programmatic ) {
          if( ! programmatic &amp;&amp; (! HomePageSlider.container.hasClass("thb-slider-loaded") || thb_moving) ) {
              return false;
          }
  
          var active_slides = $(".thb-home-slide.active"),
              slides = $(".thb-home-slide"),
              last_active = active_slides.last();
  
          if( active_slides.length &lt; slides.length ) {
              $.thb.transition(last_active, function() {
                  thb_moving = false;
              });
  
              last_active.addClass("out");
              last_active.next().addClass("active");
  
              this.currentSlide++;
              thb_moving = true;
          }
          else {
              thb_moving = true;
  
              $("#thb-home-slides").stop().animate({
                  "margin-left": -20
              }, 150, 'linear', function() {
                  $(this).stop().animate({
                      "margin-left": 0
                  }, 500, 'easeOutElastic', function() {
                      thb_moving = false;
                  });
              });
          }
  
          this.showHideControls();
      },
  
      left: function( programmatic ) {
          if( ! programmatic &amp;&amp; (! HomePageSlider.container.hasClass("thb-slider-loaded") || thb_moving) ) {
              return false;
          }
  
          var active_slides = $(".thb-home-slide.active"),
              last_active = active_slides.last();
  
          if( active_slides.length &gt; 1 ) {
              $.thb.transition(last_active, function() {
                  thb_moving = false;
              });
  
              last_active.prev().removeClass("out");
              last_active.removeClass("active");
  
              this.currentSlide--;
              thb_moving = true;
          }
          else {
              thb_moving = true;
  
              $("#thb-home-slides").stop().animate({
                  "margin-left": 20
              }, 150, 'linear', function() {
                  $(this).stop().animate({
                      "margin-left": 0
                  }, 500, 'easeOutElastic', function() {
                      thb_moving = false;
                  });
              });
          }
  
          this.showHideControls();
      },
  
      showHideControls: function() {
          var active_slides = $(".thb-home-slide.active"),
              slides = $(".thb-home-slide");
  
          HomePageSlider.controlPrev.css({'visibility': 'visible'});
          HomePageSlider.controlNext.css({'visibility': 'visible'});
  
          if( active_slides.length === 1 ) {
              HomePageSlider.controlPrev.css({'visibility': 'hidden'});
          }
  
          if( active_slides.length === slides.length ) {
              HomePageSlider.controlNext.css({'visibility': 'hidden'});
          }
  
          HomePageSlider.pager.removeClass("active");
          HomePageSlider.pager.eq(active_slides.last().index()).addClass("active");
      }
  };
  </code></pre>