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

查看演示立即下载

插件描述：slick.js 基础改造小红书app轮播效果点击还能像朋友圈放大

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

html结构

<section class="photo-slider center slider">
        <div class="slick-slide">
            <img src="/">
        </div>
        <div class="slick-slide">
            <img src="/">
        </div>
        <div class="slick-slide">
            <img src="/">
        </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, 大概就这样吧。整理出来花了时间。哪里有疑问，欢迎留言沟通。不一定啥时间回...见谅

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery html5画板(原创)
下一个特效：简易仿bootstrap模态框多步骤