javascript JS：Slick：Inview上的单个幻灯片进度条

Posted 2021-05-03

function cswvnSlider() {
	$( '.cswvn-slider' ).each( function() {
		var $cswvnSliderInstance = $( this ).slick({
			mobileFirst: true,
			autoplay: true,
			autoplaySpeed: 5000,
			touchThreshold: 30,
			infinite: false,
			speed: 500,
			arrows: false,
			fade: true,
			pauseOnHover: false,
			pauseOnFocus: false,
			pauseOnDotsHover: false,
			asNavFor: $( this ).parents('.wrapper').find( '.cswvn-nav-slider' ),
		});
		$cswvnSliderInstance.slick('slickPause');
		$( this ).one( 'inview', function( event, isInView ) {
			if ( isInView ) {
				var $currentSlide = $( this ).find('.slick-current').removeClass('slick-current');
				setTimeout(function() {
					$currentSlide.addClass('slick-current');
				}, 100);
				$cswvnSliderInstance.slick('slickPlay');
			}
		} );
	} );
}
cswvnSlider();