示例：图片轮播 - 代码示例

示例：图片轮播

窗口调整

来自 Ceastld 大佬的优质动作，自由快速调整窗口，可以媲美PowerToys软件！

图片压缩

无损图像压缩，采用MozJPEG算法（同squoosh）和libimagequant开源项目 —— Cesaryuan

云板

即用即关，自动保存云同步，体验最优雅的记事工作，简约到极致的美感。—— 治钧

Previous Next

给class添加 carousel-fade 就可以让轮播特效变成淡入淡出的效果；
默认是：<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
修改后：<div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-ride="carousel">

效果如下：

窗口调整

来自 Ceastld 大佬的优质动作，自由快速调整窗口，可以媲美PowerToys软件！

图片压缩

无损图像压缩，采用MozJPEG算法（同squoosh）和libimagequant开源项目 —— Cesaryuan

云板

即用即关，自动保存云同步，体验最优雅的记事工作，简约到极致的美感。—— 治钧

Previous Next

代码如下：

<!-------------图片轮播开始了---------------->
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
<img src="https://files.getquicker.net/_sitefiles/_guides/ead85b98-49f5-4e73-3000-08d9b733fc81/2021/12/13/215658_202824_1.jpg" class="d-block w-100" style="height:180px ; object-fit: cover;">
      <div class="carousel-caption d-none d-md-block">
<h5><a href="Guide?id=041be915-ad74-4718-3a42-08d9bb111e36&step=7b5f929f-d06a-4937-a9d9-08d9a8aacebd">
<font color=#FFF>窗口调整</a></font></h5>
        <p>来自 Ceastld 大佬的优质动作，自由快速调整窗口，可以媲美PowerToys软件！</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/04/220642_202824_1.jpg" class="d-block w-100" style="height:180px ; object-fit: cover;">
      <div class="carousel-caption d-none d-md-block">
<h5><a href="Guide?id=fa7df9bc-17f5-459c-3a3f-08d9bb111e36&step=4ccfcc5c-9288-4dbe-8b9a-08d9a65bf374">
<font color=#FFF>图片压缩</a></font></h5>
        <p>无损图像压缩，采用MozJPEG算法（同squoosh）和libimagequant开源项目 —— Cesaryuan</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/04/220824_202824_1.jpg" class="d-block w-100" style="height:180px ; object-fit: cover;">
      <div class="carousel-caption d-none d-md-block">
<h5><a href="Guide?id=041be915-ad74-4718-3a42-08d9bb111e36&step=2ca434bf-7f3d-42df-a9db-08d9a8aacebd">
<font color=#FFF>云板</a></font></h5>
        <p>即用即关，自动保存云同步，体验最优雅的记事工作，简约到极致的美感。—— 治钧</p>
      </div>
    </div>
  </div>

<span class="sr-only">Previous</span>
<span class="sr-only">Next</span>
</div>
<!-------------图片轮播结束了---------------->

下一页