方法
第一步:找到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/flickity@2/dist/flickity.pkgd.js"></script> <!--幻灯片-->
第二步:找到b2主题后台>常规设置,找到下面”头部HTML标签“,添加一行代码:
<link rel="stylesheet" href="https://www.gcz.mx/wp-content/themes/b2/Assets/fontend/library/flickity.css">

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