7B2主题圈子顶部上面添加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">