jQuery轮播图插件slick.js点击图片放大显示

更新时间：2021-05-07 23:16:54

html结构

<section class="photo-slider center slider">
        <div class="slick-slide">
            <img src="https://www.jq22.com/img/cs/500x300-1.png">
        </div>
        <div class="slick-slide">
            <img src="https://www.jq22.com/img/cs/500x300-2.png">
        </div>
        <div class="slick-slide">
            <img src="https://www.jq22.com/img/cs/500x300-3.png">
        </div>
</section

因为我的需求是放大，下面出现数字进程。如果不需要， 这一段删除 

$(".modal_box").on('init', function(event, slick) {
        if (!$(".slider_counter").length) {
            $slider_counter = $('<div />').addClass('slider_counter')
            $slider_current = $('<span />').addClass('slider_current').text(_index + 1);
            $slider_counter.append($slider_current);
            $slider_counter.append('/');
            $slider_counter.append($('<span />').addClass('slider_current').text(slick.slideCount));
            $(this).after($slider_counter);
        }
        // else{
        // 	$slider_current.text(_index + 1);
        // }
    })
    .on('beforeChange', function(event, slick, currentSlide, nextSlide) {
        $slider_current.text(nextSlide + 1);
    });

这一段中

$(".modal_box").slick({
    arrows: false,
    dots: false,
    infinite: false,
    useCSS: true,
    initialSlide: _index,
})

dots: false,改成dots: true, 大概就这样吧。 整理出来花了时间。哪里有疑问，欢迎留言沟通。不一定啥时间回...见谅

PREVIOUS:
NEXT:
简易仿bootstrap模态框多步骤
jQuery html5画板(原创)