7B2主题圈子顶部上面添加B2主题特色轮播幻灯片

释放双眼,带上耳机,听听看~!

方法

第一步:找到b2主题根目录下的archive-circle.php,在<div id=”primary-home” class=”wrapper content-area”>这行代码的后面<main class=”site-main”>前面,添加下面的代码。记得看代码的注释!!!

7B2主题圈子顶部上面添加B2主题特色轮播幻灯片--七宝美图
<!--幻灯片-->
<div class="carousel" data-flickity>
    <!-----    在这里添加幻灯片的内容。你要放图片就放<img>标签,放链接就放<a>标签,有一定的html基础的人都会吧~ 官网:www.gcz.mx    ----->
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <!--    这个地方结束。下面的css和js你可以自己改换哦。官网:www.gcz.mx    -->
</div>
<style>
.carousel-cell {
  width: 100%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
}
.carousel-cell:before {
  display: block;
  text-align: center;
  line-height: 200px;
  font-size: 80px;
  color: white;
}
.flickity-page-dots {
  bottom: -22px;
  display: none;
}
.flickity-enabled.is-draggable {
    margin-bottom: 13px;
}
/* dots are lines */
.flickity-page-dots .dot {
  height: 4px;
  width: 40px;
  margin: 0;
  border-radius: 0;
}
.flickity-button {
    background: #fff0;
}
.flickity-page-dots {
    bottom: 177px;
    right: -566px;
}
.flickity-page-dots .dot {
    height: 4px;
    width: 27px;
    margin: 0;
    margin-right: 4px;
    border-radius: 0;
}
</style>
<script src="https://npmcdn.com/[email protected]/dist/flickity.pkgd.js"></script>
<!--幻灯片-->
7B2主题圈子顶部上面添加B2主题特色轮播幻灯片-1-七宝美图

第二步:找到b2主题后台>常规设置,找到下面”头部HTML标签“,添加一行代码:

<link rel="stylesheet" href="https://www.gcz.mx/wp-content/themes/b2/Assets/fontend/library/flickity.css">
7B2主题圈子顶部上面添加B2主题特色轮播幻灯片-2-七宝美图
温馨提示:

1.本站部分内容均收集于网络!若内容若侵犯到您的权益,请联系站长处理!【站点简介】

2.如果您喜欢我们,可开通终身会员,享受全站资源免费下载!

3.本站部分内容只做学习和交流使用。 版权归原作者所有。

4.联系方式:QQ(153287191)-添加时请一定要注明来意和问题,近期有太多没事添加聊骚的╮(╯▽╰)╭

PC用户点这里      手机QQ点这里

给TA打赏
共{{data.count}}人
人已打赏
WordPress建站码农天地

360搜索 - 自动收录 js 提交代码报错问题

2021-7-15 13:11:37

WordPress建站码农天地

WordPress 5.7自带的jQuery 3.5.1升级到jQuery 3.6.0

2021-7-15 14:21:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索