tessl/npm-slick-carousel

Responsive jQuery carousel plugin with extensive customization options for creating interactive slide presentations

—

Pending

Overview

Eval results

Files

Playback Control

Name: tessl/npm-slick-carousel
Author: tessl

Autoplay functionality control for starting, stopping, and managing automatic slide progression. Provides methods to control the built-in autoplay timer and handle play/pause states.

Capabilities

Start Autoplay

Starts or resumes automatic slide progression with the configured timing.

/**
 * Start or resume autoplay
 * Sets autoplay option to true and begins automatic progression
 */
$('.slider').slick('slickPlay');

Usage Examples:

// Start autoplay programmatically
$('.slider').slick('slickPlay');

// Start autoplay on user interaction
$('#play-btn').click(function() {
  $('.slider').slick('slickPlay');
  $(this).hide();
  $('#pause-btn').show();
});

// Auto-start after initialization
$('.slider').slick({
  autoplay: false,
  autoplaySpeed: 3000
});
// Start autoplay after setup
setTimeout(function() {
  $('.slider').slick('slickPlay');
}, 1000);

// Resume autoplay after user interaction
$('.slider').on('mouseleave', function() {
  if (!$(this).data('user-paused')) {
    $(this).slick('slickPlay');
  }
});

Pause Autoplay

Pauses automatic slide progression while maintaining the current position.

/**
 * Pause autoplay
 * Stops automatic progression but keeps current slide position
 */
$('.slider').slick('slickPause');

Usage Examples:

// Pause autoplay programmatically
$('.slider').slick('slickPause');

// Pause on user interaction
$('#pause-btn').click(function() {
  $('.slider').slick('slickPause');
  $('.slider').data('user-paused', true);
  $(this).hide();
  $('#play-btn').show();
});

// Pause on hover (if not configured automatically)
$('.slider').on('mouseenter', function() {
  $(this).slick('slickPause');
});

// Pause when page becomes hidden
$(document).on('visibilitychange', function() {
  if (document.hidden) {
    $('.slider').slick('slickPause');
  } else {
    $('.slider').slick('slickPlay');
  }
});

// Pause for specific duration
function pauseForDuration(duration) {
  $('.slider').slick('slickPause');
  setTimeout(function() {
    $('.slider').slick('slickPlay');
  }, duration);
}

Autoplay Configuration Options

Autoplay behavior is controlled through configuration options:

interface AutoplayOptions {
  /** Enable autoplay (default: false) */
  autoplay?: boolean;
  
  /** Autoplay interval in milliseconds (default: 3000) */
  autoplaySpeed?: number;
  
  /** Pause autoplay on hover (default: true) */
  pauseOnHover?: boolean;
  
  /** Pause autoplay when focused (default: true) */
  pauseOnFocus?: boolean;
  
  /** Pause autoplay on dot hover (default: false) */
  pauseOnDotsHover?: boolean;
}

Usage Examples:

// Basic autoplay setup
$('.slider').slick({
  autoplay: true,
  autoplaySpeed: 4000,
  pauseOnHover: true
});

// Advanced autoplay configuration
$('.slider').slick({
  autoplay: true,
  autoplaySpeed: 2500,
  pauseOnHover: false,     // Continue playing on hover
  pauseOnFocus: true,      // Pause when slider gains focus
  pauseOnDotsHover: true   // Pause when hovering over dots
});

// Runtime autoplay configuration changes
$('.slider').slick('slickSetOption', 'autoplaySpeed', 5000, false);
$('.slider').slick('slickSetOption', 'pauseOnHover', false, false);

Play/Pause State Management

// Track autoplay state
function getAutoplayState() {
  return $('.slider').slick('slickGetOption', 'autoplay');
}

// Toggle autoplay
function toggleAutoplay() {
  if (getAutoplayState()) {
    $('.slider').slick('slickPause');
  } else {
    $('.slider').slick('slickPlay');
  }
}

// Update UI based on autoplay state
function updatePlayPauseButton() {
  const isPlaying = getAutoplayState();
  const $playBtn = $('#play-btn');
  const $pauseBtn = $('#pause-btn');
  
  if (isPlaying) {
    $playBtn.hide();
    $pauseBtn.show();
  } else {
    $pauseBtn.hide();
    $playBtn.show();
  }
}

Advanced Autoplay Patterns

Conditional Autoplay

// Only autoplay if multiple slides exist
$('.slider').on('init', function(event, slick) {
  if (slick.slideCount > 1) {
    $(this).slick('slickPlay');
  }
});

// Autoplay based on viewport visibility
function handleVisibilityChange() {
  if (document.hidden) {
    $('.slider').slick('slickPause');
  } else if (!$('.slider').data('user-paused')) {
    $('.slider').slick('slickPlay');
  }
}

document.addEventListener('visibilitychange', handleVisibilityChange);

Progressive Autoplay Speed

// Gradually increase autoplay speed
let currentSpeed = 4000;
const minSpeed = 1000;
const speedDecrement = 200;

$('.slider').on('afterChange', function() {
  if (currentSpeed > minSpeed) {
    currentSpeed -= speedDecrement;
    $(this).slick('slickSetOption', 'autoplaySpeed', currentSpeed, false);
  }
});

Smart Pause/Resume

// Pause on user interaction, resume after inactivity
let userInteractionTimeout;

function pauseWithTimeout() {
  $('.slider').slick('slickPause');
  $('.slider').data('user-paused', true);
  
  // Clear existing timeout
  clearTimeout(userInteractionTimeout);
  
  // Resume after 10 seconds of inactivity
  userInteractionTimeout = setTimeout(function() {
    $('.slider').data('user-paused', false);
    $('.slider').slick('slickPlay');
  }, 10000);
}

// Pause on navigation clicks
$('.slick-arrow, .slick-dots li').on('click', pauseWithTimeout);

// Pause on manual swipe
$('.slider').on('swipe', pauseWithTimeout);

Autoplay with Progress Indicator

// Visual progress indicator for autoplay
function initializeProgressBar() {
  const $progressBar = $('<div class="autoplay-progress"><div class="progress-fill"></div></div>');
  $('.slider').append($progressBar);
  
  let progressInterval;
  
  $('.slider').on('beforeChange', function() {
    // Reset progress
    $('.progress-fill').css('width', '0%');
    clearInterval(progressInterval);
  });
  
  $('.slider').on('afterChange', function() {
    if ($(this).slick('slickGetOption', 'autoplay')) {
      startProgressAnimation();
    }
  });
  
  function startProgressAnimation() {
    const autoplaySpeed = $('.slider').slick('slickGetOption', 'autoplaySpeed');
    let progress = 0;
    const increment = 100 / (autoplaySpeed / 50); // Update every 50ms
    
    progressInterval = setInterval(function() {
      progress += increment;
      if (progress >= 100) {
        progress = 100;
        clearInterval(progressInterval);
      }
      $('.progress-fill').css('width', progress + '%');
    }, 50);
  }
}

Responsive Autoplay Behavior

// Different autoplay settings for different screen sizes
$('.slider').slick({
  autoplay: true,
  autoplaySpeed: 4000,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        autoplay: true,
        autoplaySpeed: 6000  // Slower on mobile
      }
    },
    {
      breakpoint: 480,
      settings: {
        autoplay: false  // Disable on small screens
      }
    }
  ]
});

// Conditional autoplay based on device capabilities
function initializeResponsiveAutoplay() {
  const isTouchDevice = 'ontouchstart' in window;
  const isSlowConnection = navigator.connection && navigator.connection.effectiveType === 'slow-2g';
  
  $('.slider').slick({
    autoplay: !isTouchDevice && !isSlowConnection,
    autoplaySpeed: isTouchDevice ? 5000 : 3000
  });
}

Install with Tessl CLI