https://www.diamondrocks.co.uk/assets/js/swiper-thumbnail.js

1(function ($, window) {
2
3    /**
4     * Enable thumbnail support for Swiper
5     * @param swiper (pass swiper element)
6     * @param settings (pass custom options)
7     */
8    window.swiperThumbs = function (swiper, settings) {
9
10        /**
11         * Loop over swiper instances
12         */
13        $(swiper).each(function () {
14
15            var _this = this;
16
17            /**
18             * Default settings
19             */
20            var options = {
21                element: 'swiper-thumbnails',
22                activeClass: 'is-active',
23                scope: undefined
24            };
25
26            /**
27             * Merge user settings and default settings
28             */
29            $.extend(options, settings);
30
31            var element;
32            if (typeof options.scope !== "undefined") {
33                element = $(_this.wrapperEl).closest(options.scope).find('.' + options.element);
34            } else {
35                element = $('.' + options.element);
36            }
37
38            /**
39             * Get real activeIndex
40             * @returns {*}
41             */
42            var realIndex = function (index) {
43                // if index doesn't exist set index to activeIndex of swiper
44                if (index === undefined) index = _this.activeIndex;
45
46                // Check if swiper instance has loop before getting real index
47                if (_this.params.loop) {
48                    return parseInt(_this.slides.eq(index).attr('data-swiper-slide-index'));
49                } else {
50                    return index;
51                }
52            };
53
54            var app = {
55
56                init: function () {
57                    app.bindUIevents();
58                    app.updateActiveClasses(realIndex(_this.activeIndex));
59                },
60
61                bindUIevents: function () {
62                    /**
63                     * Bind click events to thumbs
64                     */
65                    element.children().each(function () {
66                        $(this).on('click', function () {
67
68                            // Get clicked index
69                            var index = parseInt($(this).index());
70
71                            // Get difference between item clicked and current real active index.
72                            var difference = (index - realIndex());
73
74                            // Move to slide that makes sense for the user by
75                            // checking what the current active slide is and adding the difference
76                            // this makes sure the swiper moves to a natural direction the user expects.
77                            app.moveToSlide(_this.activeIndex + difference);
78                        })
79                    });
80
81                    /**
82                     * Update thumbs on slideChange
83                     */
84                    _this.on('slideChange', function (swiper) {
85                        app.updateActiveClasses(realIndex())
86                    });
87                },
88
89                moveToSlide: function (index) {
90                    _this.slideTo(index);
91                },
92
93                updateActiveClasses: function (index) {
94                    element.children().removeClass(options.activeClass);
95                    element.children().eq(index).addClass(options.activeClass);
96                }
97            };
98
99            app.init();
100
101        });
102
103    };
104
105}(jQuery, window));