CODEWITHSUNDEEP
javascriptjqueryhtmlcssslick.js
Cray
Cray

Reputation: 5483

Slick Slider: Scroll to last slide if slider is in viewport

I want to show a slider which should scroll to the last slide if the slider gets in the viewport.

I'm using the Slick Slider (http://kenwheeler.github.io/slick/) for that.

<html>

    <div class="slider-games">
			<div>
				<h1>Headline 1</h1>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			</div>
			<div>
				<h1>Headline 2</h1>
				<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			</div>
			<div>
				<h1>Headline 3</h1>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			</div>
			<div>
				<h1>Headline 4</h1>
				<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			</div>
			<div>
				<h1>Headline 5</h1>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			</div>
			<div>
				<h1>Headline 6</h1>
				<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
			</div>
		</div>


</html>

The slide "Headline 6" should be active.

And here's the JS code:

$('.slider-games').slick({
    dots: true,
    arrows: true,
    slidesToShow: 1,
});

I tried the attribute rtl:true but that's not working in my case.

And I saw that there is a method called slickGoTo. I guess that's what I need. But I don't know how to use it.

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.

Here's an example of it: https://codepen.io/cray_code/pen/mQEyma

Upvotes: 1

Views: 2823

Answers (3)

Slluxx
Slluxx

Reputation: 35

$( window.top ).scroll( function () {
    var windowHeight = $( window.top ).height();
    var scrolledHeight = $( window.top ).scrollTop();
    var sliderPosition = $( window.top.document ).find( ".slider-games" ).offset().top;
    var sliderheight = $( window.top.document ).find( ".slider-games" ).height();
    if ( ( windowHeight + scrolledHeight ) > ( sliderPosition + ( sliderheight / 2 ) ) ) {
        $('.slider-games').slick('slickGoTo', $('.slider-games').get(0).slick.$slides.length-1);
    }
} );

This finds out the position of your slider on the page and once you scrolled past 50% of the element, it will scroll to the last slide. To trigger the scroll event from jquery, you need to be able to scroll. Instead of the scroll event you can create a timer aswell.

Upvotes: 0

Jack
Jack

Reputation: 26

$('.fade').on('init', function(event, slick) {$(this).find(".slick-dots li").last().trigger("click"); });

Just keep this before your slick slider code and else everything is perfect

Upvotes: 1

LDS
LDS

Reputation: 362

Here another example I am providing 

<html>
<head>
    <title>My Now Amazing Webpage</title>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.css" />
</head>
<body>

    <div class="fade">
        <div>
            <h1>Headline 1</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
        <div>
            <h1>Headline 2</h1>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </div>
        <div>
            <h1>Headline 3</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
        <div>
            <h1>Headline 4</h1>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </div>
        <div>
            <h1>Headline 5</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
        <div>
            <h1>Headline 6</h1>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function () {
            $('.fade').slick({
                dots: true,
                infinite: true,
                speed: 700,
                autoplay: true,
                autoplaySpeed: 2000,
                arrows: false,
                slidesToShow: 1,
                slidesToScroll: 1
            });

        });
    </script>

</body>
</html>

Upvotes: 0

Related Questions