javascript JS：Slick：页面上有多个相同的滑块。

Posted 2021-05-03

function featuredCardSlider() {
  $( '.featured-cards-slider' ).each( function() {
    $( this ).slick( {
      touchThreshold: 20,
      mobileFirst: true,
      slidesToShow: 1,
      speed: 500,
      arrows: false,
      fade: false,
      dots: true,
      appendDots: $( this ).parent().find( '.featured-cards-slider-dots' ),
      responsive: [
        {
          breakpoint: 768,
          settings: "unslick"
        }
      ]
    } );
  } );
}
if ( $( window ).innerWidth() < 768 ) {
	featuredCardSlider();
}

// Use this only when we need to unslick or reinitialize slider
$( window ).on( 'resize orientationchange', function() {
  if ( $( this ).innerWidth() < 768 ) {
  	if ( !$( '.featured-cards-slider' ).hasClass( 'slick-initialized' ) ) {
      featuredCardSlider();
    }
  } else {
    if ( $( '.featured-cards-slider' ).hasClass( 'slick-initialized' ) ) {
	    $( '.featured-cards-slider' ).slick( 'unslick' );
  	}
  }
} );