slide

作品集

Class：arrow 改箭頭

.arrow .elementor-swiper-button-next,
.arrow .elementor-swiper-button-prev {
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

/* 隱藏原本的 SVG */
.arrow .elementor-swiper-button-next svg,
.arrow .elementor-swiper-button-prev svg {
display: none;
}

/* 下一張按鈕：直接使用圖片 */
.arrow .elementor-swiper-button-next {
background-image: url(‘https://f.fenstudio.tw/wp-content/uploads/2025/07/button-right.svg’);
}

/* 上一張按鈕：左右反轉圖片 */
.arrow .elementor-swiper-button-prev {
background-image: url(‘https://f.fenstudio.tw/wp-content/uploads/2025/07/button-left.svg’);
}

Class：carousel 加入連結

});

// 加入內容文字

jQuery(document).ready(function(jQuery) {
jQuery(‘.carousel a’).each(function(index) {
var description = jQuery(this).attr(‘data-elementor-lightbox-description’);

var caption = jQuery(this).closest(‘.elementor-image-carousel-wrapper’)
.find(‘.elementor-image-carousel-caption’).eq(index);

if (description && caption.length) {
caption.after(‘<div class=”custom-lightbox-description”>’ + description + ‘</div>’);
}
});
});

</script>

遮罩

Class：mask 滿版

.mask .swiper {
position: relative;
overflow: visible;
}

遮罩02

Class：mask02 左右淡色

.mask02 .swiper {
position: relative;
overflow: visible;
}

.mask02 .swiper:before {
content: ”;
background: #ffffffc4;
width: 5000px;
height: 100%;
position: absolute;
top: 0;
left: -5000px;
z-index: 5;
}
.mask02 .swiper:after {
content: ”;
background: #ffffffc4;
width: 5000px;
height: 100%;
position: absolute;
top: 0;
right: -5000px;
z-index: 5;
}

無限滾動

Class：AutoScroll

/* AutoScroll：無限水平滑動動畫 */
@keyframes about_slide {0% {transform: translateX(0%);} 100% {transform:translateX(-50%);}}
.AutoScroll .swiper-wrapper {animation: about_slide 80s linear infinite; display: flex; width: max-content; /* 確保可以無限滾動 */}