Webflow Slider Plugin

Design help Custom code
1

Hello!
I wrote a small plugin that complements webflow slider and allows you to switch sliders using thumbnails:
http://monterart-webflow-slider.webflow.io
> ;(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);
          var slide = $(".w-slide", this);
          sliderHeightInit();
          function sliderHeightInit() {
            sliderHeight = slide.eq(0).height();
            $(".ma-slider", MAParent).animate({
              height: sliderHeight
            }, 200);
          }
          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");
            slide.removeClass("active").eq(index).addClass("active");
            sliderHeight = slide.eq(index).height();
            $(".ma-slider", MAParent).animate({
              height: sliderHeight
            }, 200);
          });
          $(".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");
            slide.removeClass("active").eq(index).addClass("active");
            sliderHeight = slide.eq(index).height();
            $(".ma-slider", MAParent).animate({
              height: sliderHeight
            }, 200);
          })
          $(".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");
            slide.removeClass("active").eq(index).addClass("active");
            sliderHeight = slide.eq(index).height();
            $(".ma-slider", MAParent).animate({
              height: sliderHeight
            }, 200);
          })
        })
      }
    })
  })(jQuery);

Additionally, you can enable automatic height.
Everything works except for the autoplay, tell me how to keep track of the slide switch, can then the plugin will be much less.
P.S I can not paste the code :frowning:

4 Likes
2

That’s… very cool, and that’s great of you to share it!

I’ve read requests for this quite a few time on this forum so no doubt you’ll bring joy to some :slight_smile:

2 Likes
3

Very nice of you @Vyacheslav ! Thanks

1 Like
4

@vincent @thesergie @bartekkustra @danro

Any chance you could tell me how to also include autoplay with this method? I tried doing the same trick with the (new animation system) which can work, however is extremely tedious and long job, while this would do it in a few clicks. Everything works, except autoplay, and i cannot find the “event” either.

Kind Regards, Bart