Hello!
I apologize that my post is in Russian, and I’ll be grateful if someone could translate this.
EDIT CREDIT: @VladimirVitaliyevich with collaboration of @bart.
In one of my projects I needed a slider with a thumbnail. Inspired by @bart’s post. I decided to write a small plugin, so these kind of sliders won’t be difficult to make for any user. Plugin is very adaptable.
http://monterart-webflow-slider.webflow.io
I made the slider to work with swipe on touch devices - thumbnails will also be highlighted.
To make this work insert the code correctly before </body>
in custom code:
<script>
;(function($) {
$.fn.extend({
MASlider: function(options) {
this.defaults = {};
var settings = $.extend({}, this.defaults, options);
return this.each(function() {
var MAParent = this;
var preview = $(".ma-preview", this);
preview.click(function(e) {
e.preventDefault();
preview.removeClass("active");
$(this).addClass("active");
var index = preview.index(this);
var round = $(".w-slider-dot", MAParent);
round.eq(index).trigger("tap")
});
$(".ma-slider", this).on("swipe", function(e, a) {
var round = $(".w-slider-dot", MAParent);
index = round.index($(".w-slider-dot.w-active", MAParent));
a.direction == "right" ? index-- : index++;
index < 0 && (index = preview.length - 1);
index == preview.length && (index = 0);
preview.removeClass("active").eq(index).addClass("active")
})
$(".ma-slider-arrow", this).on("click", function(e) {
e.preventDefault();
var round = $(".w-slider-dot", MAParent);
index = round.index($(".w-slider-dot.w-active", MAParent));
preview.removeClass("active").eq(index).addClass("active")
})
})
}
})
})(jQuery);
</script>
In Designer you need to create <div>
block with any class, for example ma-slider-wrapper
. Inside of it add Slider Component and give it a class ma-slider
. Add another <div>
block that will be a wrapper for the thumbnails, and add links/thumbnails to the sliders. Each thumbnail link should have a class ma-preview
.
The structure should look like this:
ma-slider-wrapper (div)
|– ma-slider (Slider Component)
|–Mask
|– Slide 1
|– Slide 2
|– Slide 3
|–ma-slider-arrow
|–ma-slider-arrow
|– ma-preview-wrapper (div)
|– ma-preview (link)
|– Image (thumbnail image)
|– ma-preview (link)
|– Image (thumbnail image)
|– ma-preview (link)
|– Image (thumbnail image)
All you have left to do is to initialize the plugin with $(‘ma-slider-wrapper’).MASlider();
Entire code will look like this:
<script>
;(function($) {
$.fn.extend({
MASlider: function(options) {
this.defaults = {};
var settings = $.extend({}, this.defaults, options);
return this.each(function() {
var MAParent = this;
var preview = $(".ma-preview", this);
preview.click(function(e) {
e.preventDefault();
preview.removeClass("active");
$(this).addClass("active");
var index = preview.index(this);
var round = $(".w-slider-dot", MAParent);
round.eq(index).trigger("tap")
});
$(".ma-slider", this).on("swipe", function(e, a) {
var round = $(".w-slider-dot", MAParent);
index = round.index($(".w-slider-dot.w-active", MAParent));
a.direction == "right" ? index-- : index++;
index < 0 && (index = preview.length - 1);
index == preview.length && (index = 0);
preview.removeClass("active").eq(index).addClass("active")
})
$(".ma-slider-arrow", this).on("click", function(e) {
e.preventDefault();
var round = $(".w-slider-dot", MAParent);
index = round.index($(".w-slider-dot.w-active", MAParent));
preview.removeClass("active").eq(index).addClass("active")
})
})
}
})
})(jQuery);
$('.ma-slider-wrapper').MASlider ();
</script>
You can have as many sliders as you would like. If you have any questions let me know
– Vyacheslav Yashnikov
UPD1 Add arrows control