swiper.thumbnails.js

swiper.thumbnails.js | 3.3 KB | Satir: 0 | js Geri

(function ($, window) {

/**
     * Enable thumbnail support for Swiper
     * @param swiper (pass swiper element)
     * @param settings (pass custom options)
     */
    window.swiperThumbs = function (swiper, settings) {

/**
         * Loop over swiper instances
         */
        $(swiper).each(function () {

var _this = this;

/**
             * Default settings
             */
            var options = {
                element: 'swiper-thumbnails',
                activeClass: 'is-active',
                scope: undefined
            };

/**
             * Merge user settings and default settings
             */
            $.extend(options, settings);

var element;
            if (typeof options.scope !== "undefined") {
                element = $(_this.wrapperEl).closest(options.scope).find('.' + options.element);
            } else {
                element = $('.' + options.element);
            }

/**
             * Get real activeIndex
             * @returns {*}
             */
            var realIndex = function (index) {
                // if index doesn't exist set index to activeIndex of swiper
                if (index === undefined) index = _this.activeIndex;

// Check if swiper instance has loop before getting real index
                if (_this.params.loop) {
                    return parseInt(_this.slides.eq(index).attr('data-swiper-slide-index'));
                } else {
                    return index;
                }
            };

var app = {

init: function () {
                    app.bindUIevents();
                    app.updateActiveClasses(realIndex(_this.activeIndex));
                },

bindUIevents: function () {
                    /**
                     * Bind click events to thumbs
                     */
                    element.children().each(function () {
                        $(this).on('mouseover', function () {

// Get clicked index
                            var index = parseInt($(this).index());

// Get difference between item clicked and current real active index.
                            var difference = (index - realIndex());

// Move to slide that makes sense for the user by
                            // checking what the current active slide is and adding the difference
                            // this makes sure the swiper moves to a natural direction the user expects.
                            app.moveToSlide(_this.activeIndex + difference);
                        })
                    });

/**
                     * Update thumbs on slideChange
                     */
                    _this.on('slideChange', function (swiper) {
                        app.updateActiveClasses(realIndex())
                    });
                },

moveToSlide: function (index) {
                    _this.slideTo(index);
                },

updateActiveClasses: function (index) {
                    element.children().removeClass(options.activeClass);
                    element.children().eq(index).addClass(options.activeClass);
                }
            };

app.init();

});

};

}(jQuery, window));

Ctrl+S ile kaydet