http://verticalurbanism.org/wp-content/themes/mds-multiple-theme/assets/js/slick-init.js

1jQuery(document).ready(function ($) {
2    const $carousel = $('#homepage__marquee');
3
4    // ---------- Initialize Slick ----------
5    $carousel.slick({
6        slidesToShow: 5,
7        slidesToScroll: 1,
8        infinite: true,
9        centerMode: true,
10        centerPadding: '0px',    
11        arrows: false,
12        dots: false,
13        autoplay: false,
14        speed: 0,
15        cssEase: 'linear',
16        pauseOnHover: false,
17        pauseOnFocus: false,
18        responsive: [
19            { breakpoint: 768, settings: { slidesToShow: 3 } }
20        ]
21    });
22
23    // ---------- Variables ----------
24    let $track = $carousel.find('.slick-track'); // track reference
25    let xpos = 0;
26    let manualOffset = 0;
27    let paused = false;
28    let lastTime = null;
29    let rafId = null;
30
31    const autoSpeed = 50;
32    const decay = 0.85;
33
34    // ---------- Drag variables ----------
35    let isDragging = false;
36    let startX = 0;
37
38    // ---------- Animation loop ----------
39    function step(timestamp) {
40        if (!lastTime) lastTime = timestamp;
41        const delta = timestamp - lastTime;
42        lastTime = timestamp;
43
44        xpos += manualOffset;
45        if (!paused) xpos += autoSpeed * (delta / 1000);
46        manualOffset *= decay;
47
48        // loop logic
49        const trackWidth = $track[0].scrollWidth;
50        if (xpos >= trackWidth / 2) xpos -= trackWidth / 2;
51        if (xpos < 0) xpos += trackWidth / 2;
52
53        $track.css('transform', `translate3d(${-xpos}px,0,0)`);
54        rafId = requestAnimationFrame(step);
55    }
56
57    rafId = requestAnimationFrame(step);
58
59    // ---------- Hover pause ----------
60    $carousel.on('mouseenter', () => { paused = true; lastTime = null; })
61             .on('mouseleave', () => { paused = false; lastTime = null; });
62
63    // ---------- Wheel scroll ----------
64    $carousel.on('wheel', e => {
65        e.preventDefault();
66        const delta = e.originalEvent.deltaY;
67        manualOffset += delta;
68        const maxManual = 50; 
69        if (manualOffset > maxManual) manualOffset = maxManual;
70        if (manualOffset < -maxManual) manualOffset = -maxManual;
71    });
72
73    // ---------- Drag/Touch ----------
74    $carousel.on('mousedown touchstart', e => {
75        isDragging = true;
76        paused = true;
77        startX = e.touches ? e.touches[0].clientX : e.clientX;
78    });
79
80    $(window).on('mousemove touchmove', e => {
81        if (!isDragging) return;
82        const currentX = e.touches ? e.touches[0].clientX : e.clientX;
83        manualOffset += startX - currentX;
84        startX = currentX;
85    });
86
87    $(window).on('mouseup touchend', () => { isDragging = false; paused = false; });
88
89    // ---------- Handle window resize ----------
90    $(window).on('resize', () => {
91        // Refresh track reference because Slick rebuilds the DOM
92        $track = $carousel.find('.slick-track');
93        lastTime = null; // avoid jump
94    });
95
96    // ---------- Cleanup ----------
97    $(window).on('unload', () => cancelAnimationFrame(rafId));
98});