https://odo-golf.com/assets/js/split-slideshow.js

1
2(function(){
3    
4var $slider = $('.slideshow .slider'),
5  maxItems = $('.item', $slider).length,
6  dragging = false,
7  tracking,
8  rightTracking;
9
10$sliderRight = $('.slideshow').clone().addClass('slideshow-right').appendTo($('.split-slideshow'));
11
12rightItems = $('.item', $sliderRight).toArray();
13reverseItems = rightItems.reverse();
14$('.slider', $sliderRight).html('');
15for (i = 0; i < maxItems; i++) {
16  $(reverseItems[i]).appendTo($('.slider', $sliderRight));
17}
18
19$slider.addClass('slideshow-left');
20$('.slideshow-left').slick({
21    autoplay: true,
22  vertical: true,
23  verticalSwiping: true,
24  arrows: false,
25  infinite: true,
26  dots: true,
27  speed: 700,
28  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
29}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
30
31  if (currentSlide > nextSlide && nextSlide == 0 && currentSlide == maxItems - 1) {
32    $('.slideshow-right .slider').slick('slickGoTo', -1);
33    $('.slideshow-text').slick('slickGoTo', maxItems);
34  } else if (currentSlide < nextSlide && currentSlide == 0 && nextSlide == maxItems - 1) {
35    $('.slideshow-right .slider').slick('slickGoTo', maxItems);
36    $('.slideshow-text').slick('slickGoTo', -1);
37  } else {
38    $('.slideshow-right .slider').slick('slickGoTo', maxItems - 1 - nextSlide);
39    $('.slideshow-text').slick('slickGoTo', nextSlide);
40  }
41}).on("mousewheel", function(event) {
42  event.preventDefault();
43  if (event.deltaX > 0 || event.deltaY < 0) {
44    $(this).slick('slickNext');
45  } else if (event.deltaX < 0 || event.deltaY > 0) {
46    $(this).slick('slickPrev');
47  };
48}).on('mousedown touchstart', function(){
49  dragging = true;
50  tracking = $('.slick-track', $slider).css('transform');
51  tracking = parseInt(tracking.split(',')[5]);
52  rightTracking = $('.slideshow-right .slick-track').css('transform');
53  rightTracking = parseInt(rightTracking.split(',')[5]);
54}).on('mousemove touchmove', function(){
55  if (dragging) {
56    newTracking = $('.slideshow-left .slick-track').css('transform');
57    newTracking = parseInt(newTracking.split(',')[5]);
58    diffTracking = newTracking - tracking;
59    $('.slideshow-right .slick-track').css({'transform': 'matrix(1, 0, 0, 1, 0, ' + (rightTracking - diffTracking) + ')'});
60  }
61}).on('mouseleave touchend mouseup', function(){
62  dragging = false;
63});
64
65$('.slideshow-right .slider').slick({
66  swipe: false,
67  vertical: true,
68  arrows: false,
69  infinite: true,
70  speed: 650,
71  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
72  initialSlide: maxItems - 1
73});
74$('.slideshow-text').slick({
75  swipe: false,
76  vertical: true,
77  arrows: false,
78  infinite: true,
79  speed: 600,
80  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
81});
82
83}());