title: Slick Slider: Scroll to last slide if slider is in viewport
body: <p>I want to show a slider which should scroll to the last slide if the slider gets in the viewport.</p>
  
  <p>I'm using the Slick Slider (<a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">http://kenwheeler.github.io/slick/</a>) for that.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
      &lt;div class="slider-games"&gt;
     &lt;div&gt;
      &lt;h1&gt;Headline 1&lt;/h1&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
     &lt;/div&gt;
     &lt;div&gt;
      &lt;h1&gt;Headline 2&lt;/h1&gt;
      &lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.&lt;/p&gt;
     &lt;/div&gt;
     &lt;div&gt;
      &lt;h1&gt;Headline 3&lt;/h1&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
     &lt;/div&gt;
     &lt;div&gt;
      &lt;h1&gt;Headline 4&lt;/h1&gt;
      &lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.&lt;/p&gt;
     &lt;/div&gt;
     &lt;div&gt;
      &lt;h1&gt;Headline 5&lt;/h1&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
     &lt;/div&gt;
     &lt;div&gt;
      &lt;h1&gt;Headline 6&lt;/h1&gt;
      &lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.&lt;/p&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>The slide "Headline 6" should be active.</strong></p>
  
  <p>And here's the JS code:</p>
  
  <pre><code>$('.slider-games').slick({
      dots: true,
      arrows: true,
      slidesToShow: 1,
  });
  </code></pre>
  
  <p>I tried the attribute <code>rtl:true</code> but that's not working in my case.</p>
  
  <p>And I saw that there is a method called <code>slickGoTo</code>. I guess that's what I need. But I don't know how to use it.</p>
  
  <p>Also there is the unsolved problem, that the slider should scroll at the end when the slider gets in the visible area of the viewport.</p>
  
  <p>Here's an example of it: <a href="https://codepen.io/cray_code/pen/mQEyma" rel="nofollow noreferrer">https://codepen.io/cray_code/pen/mQEyma</a></p>