给b2主题圈子顶部加上b2主题特色的轮播幻灯片

方法

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

20210714033808596.pnggcz

 

<!--幻灯片-->
<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/flickity@2/dist/flickity.pkgd.js"></script>
<!--幻灯片-->

20210714050421122.pnggcz

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

<link rel="stylesheet" href="https://www.gcz.mx/wp-content/themes/b2/Assets/fontend/library/flickity.css">
20210714050703315.pnggcz

原文地址https://www.gcz.mx/2837.html

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

B2主题史上最强wordpress暗黑模式代码详细教程(转载)

2021-8-2 22:36:38

WordPress教程

WordPress5.8经典小工具的安装,禁用小工具区块编辑

2021-8-11 11:45:46

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