slick轮播图使用大全

let oSlick = {
    dom: null,
    isMobile: false,
    slickInited: false,
    barInterval:null,
    currentSlide:0,
    lastCurrent:-1,
    init: function () {
        let self = this
        if (!this.slickInited) {
            console.time('oSlick')
            let sWinWidth = $(window).width()
            if(sWinWidth<=750){
                $("#slick_dom").draggable("destory"); 
                let jSlick = this.dom = $("#slick_dom")
                let banner = $('.banner_img')

                jSlick
                    .find('.pc')
                    .remove()

                if(banner.length>1){
                    if (jSlick.length <= 0) return false
                    this.slickInited = true
                    this.bind()
                }
            }else{
                let jSlick = this.dom = $("#slick_dom")
                // let _this = this
                // jSlick.click(function(){
                //     _this.bind()
                // });

                jSlick
                    .find('.mobile')
                    .remove()

                if (jSlick.length <= 0) return false
                this.slickInited = true
                this.bind()
                // setInterval( function(){
                //     if(self.lastCurrent ===self.currentSlide){
                //         jSlick.slick('slickPlay');
                //         // jSlick.slick('slickGoTo', self.currentSlide+1);
                //         // jSlick.on('afterChange', function(event, slick, currentSlide, nextSlide){
                //         //     self.currentSlide = currentSlide
                //         //     // console.log(event, slick, currentSlide, nextSlide)
                //         //     // var elSlide = $(slick.$slides[currentSlide]);
                //         //     // var dataIndex = elSlide.data('index');
                        
                //         // }); 
                //     }
                //     self.lastCurrent = self.currentSlide
                //     console.log(self.currentSlide)
                // }, 6000);
            }
            
            
            console.timeEnd('oSlick')
        }
    },
    bind: function () {
        let self = this,
            jSlick = self.dom
        if($('.slick-initialized').length > 0){
            return false;
        }
        
        //新版gallery：http://kenwheeler.github.io/slick/
        jSlick.slick({
            dots: true,
            autoplay: true,
            autoplaySpeed: 8000,
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            pauseOnHover: false,
            arrows:true,
            draggable:true,
            customPaging: function (slider, i) {
                let bar = $(`<div class="bar_${i}"></div>`)
                this.barInterval = setInterval(function () {
                    if (slider.currentSlide === i) {
                        bar.addClass("rotation")
                    }
                    if (slider.currentSlide !== i) {
                        bar.removeClass("rotation");
                    }
                }, 1);
                return bar
            },
            onAfterChange: function(){
                var currentSlide = jSlick.slick('slickCurrentSlide');
               console.log("11111",currentSlide)
              }
        });
        
        
        jSlick.on('afterChange', function(event, slick, currentSlide, nextSlide){
            setInterval( function(){
                if(currentSlide !== self.currentSlide){
                    return
                }
                jSlick.slick("slickNext")
            }, 8200);
            self.currentSlide = currentSlide
            
            // console.log(event, slick, currentSlide, nextSlide)
            // var elSlide = $(slick.$slides[currentSlide]);
            // var dataIndex = elSlide.data('index');
        
        });
        
        
         self.arrowShow()
        //  jSlick.slick("slickSetOption", "autoplay", true,true);
    },
    arrowShow: function () {
        let self = this,
            jSlick = self.dom,
            iSlickW = jSlick.width()

        jSlick
            .mousemove(function (event) {
                let iX = event.pageX

                if (iX < iSlickW / 3) {
                    jSlick
                        .addClass('show_arrow_left')
                        .removeClass('show_arrow_right')
                } else if (iX > (iSlickW * 2) / 3) {
                    jSlick
                        .addClass('show_arrow_right')
                        .removeClass('show_arrow_left')
                } else {
                    jSlick.removeClass('show_arrow_left show_arrow_right')
                }
            })
            .mouseleave(function () {
                jSlick.removeClass('show_arrow_left show_arrow_right')
            })
    },
    destroy: function () {
        this.slickInited = false
        clearInterval(this.barInterval)
        let sWinWidth = $(window).width()
            if(sWinWidth<=750){
                let banner = $('.banner_img')
                if(banner.length>1){
                    this.dom && this.dom.slick &&
                        this.dom
                            .slick('unslick')
                            .off('mousemove mouseleave')
                
            }
        }
    }
}