jquery_unslider_lazyload_extension_quickstart_with_data_src.ts

1import * as $ from 'jquery';
2// Import unslider and the lazyload extension
3// Note: These usually don't have types, so you may need to declare them if not using @types
4import 'unslider';
5import 'unslider-lazyload';
6
7/**
8 * Basic TypeScript interface extension for jQuery to support Unslider
9 */
10interface UnsliderOptions {
11  autoplay?: boolean;
12  speed?: number;
13  delay?: number;
14  keys?: boolean;
15  dots?: boolean;
16  arrows?: boolean;
17  lazyload?: boolean; // Added by unslider-lazyload
18}
19
20interface JQuery {
21  unslider(options?: UnsliderOptions): JQuery;
22}
23
24// Quickstart Initialization
25$(() => {
26  const $slider = $('.my-slider').unslider({
27    autoplay: true,
28    dots: true,
29    // The key option provided by the unslider-lazyload extension
30    lazyload: true 
31  });
32});
33
34/**
35 * Expected HTML structure:
36 * <div class="my-slider">
37 *   <ul>
38 *     <li><img data-src="path/to/image1.jpg" alt="Slide 1"></li>
39 *     <li><img data-src="path/to/image2.jpg" alt="Slide 2"></li>
40 *   </ul>
41 * </div>
42 */