Carousel Plugin Beautification Based on the Butterfly Theme

For the plugin installation guide, please refer to this article by 店长: Swiper Bar

Before making any beautification tweaks, make sure your blog is running on the Hexo framework with the Butterfly theme; other frameworks or themes may not work.

Adding the Style Code

Add the following style code to your custom CSS file:

/* 文章置顶滚动栏(店长) */
.blog-slider {
  height: 260px !important;
}

.blog-slider__img {
  width: 40% !important;
  height: 100% !important;
}

@media screen and (max-width: 600px) {
  .blog-slider {
    padding: 0 !important;
  }

  .blog-slider__img {
    width: 100% !important;
    height: 40% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

What this code does is change the post cover images on desktop from squares into rectangles, while on mobile they now fill the full width from edge to edge, which looks much easier on the eye.

You can keep adding your own styles either to the existing elements above, or by pressing F12 and using 开发者工具 to locate the ID of the corresponding element.

Before and After

Desktop

Mobile

Credits

Akilarの糖果屋: SwiperBar