Webflow slider with a thumbnail

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 :slight_smile:
– Vyacheslav Yashnikov

UPD1 Add arrows control

14 Likes

Thanks for the translation!

It works! Great! It’s easy and clear to implement! Thank you very much! :pray::pray::pray::pray:

1 Like

Cycle 2 js also works really well to make it dynamic if you are interested in that.

https://preview.webflow.com/preview/cms-slider-and-cycle2js?preview=70f4a72c44689e9836d42c6264e5b0aa

only viewable fully here

http://cms-slider-and-cycle2js.webflow.io/

1 Like

Does anyone know how to mod this for radio buttons instead of links? I tried but the radio doesn’t receive a checked state when clicked. The input received the active class but for some reason the radio doesn’t respond to being clicked.

Hi Everyone,

This works and gave me a functioning slider, but for some reason the JQuery prevents all of my Interactions (load-in animations, etc.) from working. Anyone have an idea of why that might be?

I put the code before the tag. Will it still work if I place this jQuery code in the Head tag?

Thanks!

@Vyacheslav This is awesome thanks for sharing, it works great! Is it possible to reset the autoplay when ma-preview link is clicked?

Thanks!

Dear Vyacheslav,

I’m new to webflow and I’d used your code for a project I’m working on and it works very nice… great work! But I’d like to show different MASliders in a Tab pane, but it’s not working. The hidden tabs are hiding the slider.

I’m trying to recreate an old MUSE webdesign in Webflow: http://webitself.com/sat/1813
This is what I have done yet: http://south-africa-travel.webflow.io

Can you help me fix this problem?

Thanx,
Ike

I think I have found the solution on this… very simple!
Give every Slide a unique class name… duh :wink:

1 Like

@ikeholland, I was having the same problem and your suggestion saved me many many minutes in searching for a solution :sweat_smile:, thank you!

1 Like

Life saver! Thanks so much for this! Was beating my brains :laughing:

1 Like