將elementor的圖片輪播功能carousel，dot部分更換為縮圖方式
佈景主題function中加入以下代碼：
add_filter( 'elementor/widget/render_content', 'change_widget_content', 10, 2 );
function change_widget_content( $widget_content, $widget ) {
if ( 'image-carousel' === $widget->get_name() ) {
$settings = $widget->get_settings_for_display();
$ids = $settings["carousel"];
if ( is_array($ids) ){
$thumbs = "<style>";
$i = 0;
foreach ( $ids as $thumb_id ) {
$thumbs .= '.swiper-pagination [data-bullet-index="' . $i . '"] { background-image: url(' . wp_get_attachment_image_src( $thumb_id["id"], 'thumbnail' )[0] . ');}';
$i++;
}
$thumbs .= ".swiper-pagination-bullet { width: 100px !important; height: 100px !important; background-size: cover; }</style>"; // add more style either here or in Custom CSS
$widget_content .= $thumbs;
}
}
return $widget_content;
}
並修改其CSS呈現：
.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
position: relative;
margin-top: 10px
}
.swiper-pagination-bullet {
border-radius: 0;
margin: 0 !important;
}