Slider Bar

Akilar

发布于 2021-06-11 11:10:51

7390

发布于 2021-06-11 11:10:51

文章被收录于专栏：Akilarの糖果屋Akilarの糖果屋

点击查看更新记录

更新记录

2020-12-29:正式版v1.1

基于冰老师的轮播方案进行修改
修改了样式，转为styl
去jquery（貌似本来就不依赖jquery）
依赖项改为CDN链接
适配pjax
使用循环节配合data.slider来添加新制定信息

2021-1-31:正式版v1.1.1

更新v3.6.0适配方案

点击查看参考教程

参考方向	教程原贴
Codepen源项目	Responsive Blog Card Slider
沿用冰老师对上述项目重构的样式	教程：基于Butterfly主题的轮播手动置顶文章
swiper初始化参数配置	Swiper官方文档

写在最前

本项目是对冰卡诺老师写的教程：基于Butterfly主题的轮播手动置顶文章进行重构，精简了部分样式。适配pjax。

资源下载

由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。

下载资源文件

预览效果

魔改步骤

新建

.blog-slider.swiper-container-fade.swiper-container-horizontal#swiper_container
  .blog-slider__wrp.swiper-wrapper(style='transition-duration: 0ms;')
    if site.data.slider
      each i in site.data.slider
        .blog-slider__item.swiper-slide(style='width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;')
          a.blog-slider__img(href=url_for(i.link)  alt='')|
            img(width='48' height='48' src=url_for(i.cover) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'`, alt='')
          .blog-slider__content
            span.blog-slider__code= i.timeline
            a.blog-slider__title(href=url_for(i.link)  alt='')= i.title
            .blog-slider__text= i.description
            a.blog-slider__button(href=url_for(i.link)  alt='')= i.button      
  .blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets
script(defer src=url_for(theme.CDN.swiper_js))
script(defer data-pjax src=url_for(theme.CDN.swiper_init))

修改，引入轮播图版块，注意取消了缓存配置，转为完全默认，需要将改为：

新建[Blogroot]\themes\butterfly\source\js\swiper_init.js,

var swiper = new Swiper('.blog-slider', {
  passiveListeners: true,
  spaceBetween: 30,
  effect: 'fade',
  loop: true,
  autoplay: {
    disableOnInteraction: true,
    delay: 3000
  },
  mousewheel: false,
  // autoHeight: true,
  pagination: {
    el: '.blog-slider__pagination',
    clickable: true,
  }
});

var comtainer = document.getElementById('swiper_container');
comtainer.onmouseenter = function() {
  swiper.autoplay.stop();
};
comtainer.onmouseleave = function() {
  swiper.autoplay.start();
}

新建[Blogroot]\themes\butterfly\source\css\_layout\swiperstyle.styl

配置CDN依赖项，

新建[Blogroot]\source\_data\slider.yml,在里面填写想要置顶的文章的信息

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-12-29，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery