first upload all files

Modules/Slider/Resources/assets/admin/js/Slide.js

@@ -0,0 +1,41 @@
+export default class {
+    constructor(data) {
+        this.slidePanelHtml = this.getSlidePanelHtml(data);
+    }
+
+    getSlidePanelHtml(data) {
+        data.slide.options = data.slide.options || this.getDefaultOptions();
+
+        let template = _.template($('#slide-template').html());
+
+        return $(template(data));
+    }
+
+    getDefaultOptions() {
+        return { caption_1: {}, caption_2: {}, direction: 'left', call_to_action: {} };
+    }
+
+    render() {
+        this.attachEventListeners();
+        this.showSelectedOptionBlock();
+
+        return this.slidePanelHtml;
+    }
+
+    attachEventListeners() {
+        this.slidePanelHtml.find('.delete-slide').on('click', () => {
+            this.slidePanelHtml.remove();
+        });
+
+        this.slidePanelHtml.find('.change-option-block').on('change', (e) => {
+            this.slidePanelHtml.find('.slide-options').hide();
+            this.slidePanelHtml.find(`.${e.currentTarget.value}`).show();
+        });
+    }
+
+    showSelectedOptionBlock() {
+        setTimeout(() => {
+            this.slidePanelHtml.find('.change-option-block').trigger('change');
+        });
+    }
+}

Modules/Slider/Resources/assets/admin/js/Slider.js

@@ -0,0 +1,58 @@
+import Slide from './Slide';
+
+export default class {
+    constructor() {
+        this.slideCount = 0;
+
+        this.addSlides(FleetCart.data['slider.slides']);
+
+        if (this.slideCount === 0) {
+            this.addSlide();
+        }
+
+        this.attachEventListeners();
+        this.makeSlidesSortable();
+    }
+
+    addSlides(slides) {
+        for (let attributes of slides) {
+            this.addSlide(attributes);
+        }
+    }
+
+    addSlide(attributes = {}) {
+        let slide = new Slide({ slideNumber: this.slideCount++, slide: attributes });
+
+        $('#slides-wrapper').append(slide.render());
+    }
+
+    attachEventListeners() {
+        $('.add-slide').on('click', () => {
+            this.addSlide();
+        });
+
+        this.attachImagePickerEventListener();
+    }
+
+    attachImagePickerEventListener() {
+        $('#slides-wrapper').on('click', '.slide-image', (e) => {
+            let picker = new MediaPicker({ type: 'image' });
+
+            picker.on('select', (file) => {
+                let html = `
+                    <img src="${file.path}">
+                    <input type="hidden" name="slides[${e.currentTarget.dataset.slideNumber}][file_id]" value="${file.id}">
+                `;
+
+                $(e.currentTarget).html(html);
+            });
+        });
+    }
+
+    makeSlidesSortable() {
+        Sortable.create(document.getElementById('slides-wrapper'), {
+            handle: '.slide-drag',
+            animation: 150,
+        });
+    }
+}

Modules/Slider/Resources/assets/admin/js/main.js

@@ -0,0 +1,9 @@
+import Slider from './Slider';
+
+new Slider();
+
+$('#autoplay').on('change', (e) => {
+    $('.autoplay-speed-field').toggleClass('hide');
+});
+
+window.admin.removeSubmitButtonOffsetOn('#slides');