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

方法

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

<!--幻灯片-->
<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>
<!--幻灯片-->

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

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