add swiper

themes/butterfly/source/css/swiper.css

@@ -0,0 +1,74 @@
+/* 1. 强制清空外层所有可能的背景、边框和阴影 */
+#swiperBox, 
+#swiper_container, 
+.blog-slider,
+.swiper-container {
+    padding: 0 !important;
+    margin: 0 auto !important;
+    background: none !important; /* 彻底删掉白色底色 */
+    border: none !important;
+    box-shadow: none !important;
+    width: 100% !important;
+    overflow: hidden !important;
+}
+
+/* 2. 针对容器下方的白边进行“零间距”处理 */
+div#swiperBox {
+    margin-bottom: 20px !important; /* 只保留外部下边距，内部不留白 */
+}
+
+div#swiper_container {
+    height: 250px !important;
+    display: block !important;
+    border-radius: 12px;
+}
+
+/* 3. 彻底隐藏那个奇怪的橙色方块 */
+/* 那个方块通常是 swiper-pagination-bullet-active 或导航按钮的背景 */
+.blog-slider__pagination .swiper-pagination-bullet,
+.swiper-pagination-bullet,
+.swiper-button-next,
+.swiper-button-prev {
+    outline: none !important;
+}
+
+/* 如果你不需要底部的圆点，直接用下面这行彻底删掉它 */
+.blog-slider__pagination, .swiper-pagination {
+    display: none !important; 
+}
+
+/* 4. 修复图片和内容的覆盖，确保不露底色 */
+.blog-slider__item {
+    width: 100% !important;
+    height: 100% !important;
+    background-size: cover !important;
+    background-position: center !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+/* 5. 修正文字布局，防止重叠 */
+.blog-slider__content {
+    background: rgba(0, 0, 0, 0.45); /* 黑色半透明遮罩 */
+    width: 100% !important;
+    height: 100% !important;
+    padding: 0 40px !important;
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+a.blog-slider__title {
+    font-size: 1.5rem !important;
+    color: #fff !important;
+    margin: 5px 0 !important;
+    display: block !important;
+}
+
+/* 6. 解决左右箭头样式异常 */
+.swiper-button-next::after, .swiper-button-prev::after {
+    font-size: 1.2rem !important;
+    color: #fff !important;
+    background: none !important; /* 彻底去掉背景色 */
+}