做教育集团的网站建设,网站是做流程,口碑营销策略,网站的增加条件设计相比于Swiper而选择使用Slick.js的原因主要是因为其兼容不错并且在手机端的滑动效果更顺畅 参数#xff1a; 1.基本使用#xff1a;一般使用只需前十个属性
$(.box ul).slick({autoplay: true, //是否自动播放pauseOnHover: false, //鼠标悬停暂停自动播放speed: 1500, //… 相比于Swiper而选择使用Slick.js的原因主要是因为其兼容不错并且在手机端的滑动效果更顺畅 参数 1.基本使用一般使用只需前十个属性
$(.box ul).slick({autoplay: true, //是否自动播放pauseOnHover: false, //鼠标悬停暂停自动播放speed: 1500, //切换动画速度autoplaySpeed: 5000, //自动播放速度slidesToShow: 1, //要显示的动画速度swipeToSlide: true, //允许用户直接拖动或滑动到幻灯片上touchThreshold: 100, //更换幻灯片需滑动宽度1 / touchThresholdcenterMode: true, //启动居中centerPadding: 0, //处于中心模式时的侧面填充像素或arrows: false, //是否开启左右切换draggable: true, //是否启用鼠标拖动rows: 2, //显示几行默认为 1vertical: false //是否开启垂直滑动模式verticalSwiping: false, //是否开启垂直滑动切换});2.轮播效果
fadetrue // 开启渐隐切换模式
// 进阶添加缓动
cssEase: cubic-bezier(0.7, 0, 0.3, 1) // 自定义缓动
cssEase: linear, // 缓动库缓动// 不间断轮播演示即利用缓动库实现轮播没有停顿
$(#index-body .gallery .gallery-box ul).slick({autoplay: true,pauseOnHover: true,speed: 4000,autoplaySpeed: 0,slidesToShow: 3,touchThreshold: 100,cssEase: linear,
});3.将两个序列关联起来.list ul li是列表.box ol 是幻灯片
$(.box ol).on(beforeChange, function(event, slick, currentSlide, nextSlide){$(.list ul li).eq(nextSlide).addClass(active).siblings().removeClass(active);});
});div classlistul classtimeli classline2003/lili classline2001/lili classline1998/li/uldiv classsmall/div/divdiv classboxollidiv classgriddiv classleftspan1998 year/spanh4第一个幻灯片/h4div classcon1998 ind/divdiv classmorea classprevprevious/aa classnextnext 2000/a/div/divdiv classrightdiv classimg-boximg src1.img/div/div/div/li
li
div classgriddiv classleftspan2001 year/spanh4第一个幻灯片/h4div classconthis is 2001/divdiv classmorea classprevprevious/aa classnextnext 2000/a/div/divdiv classrightdiv classimg-boximg src1.img/div/div/div
/li
li
div classgriddiv classleftspan2003 year/spanh4第一个幻灯片/h4div classconthis is 2003/divdiv classmorea classprevprevious/aa classnextnext 2000/a/div/divdiv classrightdiv classimg-boximg src1.img/div/div/div
/li/ol
/div !-- JS: --script
$(.box ol).slick({
// autoplay: true,
pauseOnHover: false,
speed: 1500,
autoplaySpeed: 5000,
slidesToShow: 1,
swipeToSlide: true,
touchThreshold: 100,
centerMode: true,
centerPadding: 0,
prevArrow: $(.box .left .more a.prev),
nextArrow: $(.box .left .more a.next),
});$(.list .time).on(beforeChange, function(event, slick, currentSlide, nextSlide) {
var i (nextSlide ? nextSlide : 0) 1;
$(.list .small).text(i / slick.slideCount);
$(.box ol).slick(slickGoTo, nextSlide);
});
/script点击列表元素获得对应Index给幻灯片使切换到对应的幻灯片.list ul li是列表.box ol 是幻灯片 $(.list ul li).click(function() {$(.box ol).slick(slickGoTo, $(this).index());$(this).addClass(active).siblings().removeClass(active);});
