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

所属分类:媒体-幻灯片和轮播图

 8381  40  查看评论 (0)
分享到微信朋友圈
X
jQuery轮播图插件slick.js点击图片放大显示 ie兼容9

更新时间: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, 大概就这样吧。 整理出来花了时间。哪里有疑问,欢迎留言沟通。不一定啥时间回...见谅

相关插件-幻灯片和轮播图

全屏无缝滚动加透明遮罩效果

全屏滚动JS 带有遮罩效果
  幻灯片和轮播图
 35687  413

jQuery响应式全屏轮播插件royalslider.js

全屏轮播插件可放大缩小,支持触控,移动端使用,本插件为收费插件,特意整理出来的
  幻灯片和轮播图
 48622  373

js垂直轮播广告幻灯片

js垂直轮播广告幻灯片
  幻灯片和轮播图
 38169  391

特好看的焦点轮播图

特好看的焦点轮播图
  幻灯片和轮播图
 55234  545

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复