[slick.js] How to add a slide reordering feature

Example

Click "Move this slide left/right" to move the slide.

How to

Here's the HTML.

<div class="slider">
	<div class="slide">
		<p><img src="img01.jpg"></p>
		<button data-move="l">Move this slide left</button>
		<button data-move="r">Move this slide right</button>
	</div>
	<div class="slide">
		<p><img src="img02.jpg"></p>
		<button data-move="l">Move this slide left</button>
		<button data-move="r">Move this slide right</button>
	</div>
	<div class="slide">
		<p><img src="img03.jpg"></p>
		<button data-move="l">Move this slide left</button>
		<button data-move="r">Move this slide right</button>
	</div>
	<div class="slide">
		<p><img src="img04.jpg"></p>
		<button data-move="l">Move this slide left</button>
		<button data-move="r">Move this slide right</button>
	</div>
</div>

And here's the JS.

$(function(){
	// slick definition
	function slick_start(){
		$(".slider").slick({
			autoplay: true,
			dots: true,
			centerMode: true,
			variableWidth: true
		});
		// Reordering definition
		slick_move();
	}
	// First execution
	slick_start();

	// Reordering definition
	function slick_move(){
		// Remove event
		$(".slider .slide button").off();
		// When move button is clicked
		$(".slider .slide button").on("click", function(){
			// Add class to slide to be moved
			$(this).closest(".slide").addClass("_current");
			// Get data-move attribute
			let to = $(this).attr("data-move");
			// Unslick
			$(".slider.slick-initialized").slick("unslick");
			// Get HTML of slide to be moved
			let slideHTML = $(".slider .slide._current").prop("outerHTML");
			// When "left" is clicked
			if(to == "l"){
				// Get previous element
				let prev = $(".slider .slide._current").prev();
				// Remove slide to be moved
				$(".slider .slide._current").remove();
				// If there is a previous element
				if(prev.length){
					// Insert before previous element
					prev.before(slideHTML);
				}else{
					// If there is no previous element, insert at the end
					$(".slider .slide:last-child").after(slideHTML);
				}
			}else{
				// When "right" is clicked
				// Get next element
				let next = $(".slider .slide._current").next();
				// Remove slide to be moved
				$(".slider .slide._current").remove();
				// If there is a next element
				if(next.length){
					// Insert after next element
					next.after(slideHTML);
				}else{
					// If there is no next element, insert at the beginning
					$(".slider .slide:first-child").before(slideHTML);
				}
			}
			// Remove ._current
			$(".slider .slide._current").removeClass("_current");
			// Remove slick attributes
			$(".slider .slide").removeAttr("tabindex role id aria-describedby aria-hidden")
			// Reslick
			slick_start();
		});
	}
});

It might look a bit messy, but essentially,

When a button is clicked, slick is first "unslicked", the slides are reordered, and then slick is re-initialized.

Comments

We also welcome reports such as "It worked!".