Cách làm Slider width thumb Flatsome

Flatsome là một theme WordPress mạnh mẽ, hỗ trợ nhiều tùy chỉnh linh hoạt. Nhưng nó lại không có slider có hình thumb ở dưới .  Dưới đây là đoạn code giúp bạn tạo Slider width thumb 1 cách dễ dàng. Bạn chỉ cần copy nó vào trong giao diện child của flatsome là xong:

function slider_thumnail_nguyenlan_ux(){
add_ux_builder_shortcode( 'slider_thumnail_nguyenlan', array(
'type' => 'container',
'name' => __( 'slider_thumnail_nguyenlan' ),
'category' => __( 'Layout' ),
'message' => __( 'Add slides here' ),
'directives' => array( 'ux-slider' ),
'allow' => array( 'ux_banner','ux_image','section','row','ux_banner_grid','logo'),
'template' => get_template_directory() . '/inc/builder/shortcodes/templates/ux_slider.html',
'thumbnail' => get_template_directory_uri() . '/inc/builder/shortcodes/thumbnails/slider.svg',
'tools' => 'shortcodes/ux_slider/ux-slider-tools.directive.html',
'wrap' => false,
'info' => '{{ label }}',
'priority' => -1,
'toolbar' => array(
'show_children_selector' => true,
'show_on_child_active' => true,
),
'children' => array(
'inline' => true,
'addable_spots' => array( 'left', 'right' )
),
'options' => array(
'label' => array(
'type' => 'textfield',
'heading' => 'Admin label',
'placeholder' => 'Enter admin label...'
),
'type' => array(
'type' => 'select',
'heading' => 'Type',
'default' => 'slide',
'options' => array(
'slide' => 'Slide',
),
),
'layout_options' => array(
'type' => 'group',
'heading' => __( 'Layout' ),
'options' => array(
'style' => array(
'type' => 'select',
'heading' => 'Style',
'default' => 'normal',
'options' => array(
'normal' => 'Default',
'container' => 'Container',
'focus' => 'Focus',
'shadow' => 'Shadow',
),
'conditions' => 'type !== "fade"',
),
'slide_width' => array(
'type' => 'scrubfield',
'heading' => 'Slide Width',
'placeholder' => 'Width in Px',
'default' => '',
'min' => '0',
'conditions' => 'type !== "fade"',
),
'slide_align' => array(
'type' => 'select',
'heading' => 'Slide Align',
'default' => 'center',
'options' => array(
'center' => 'Center',
'left' => 'Left',
'right' => 'Right',
),
'conditions' => 'type !== "fade"',
),
'bg_color' => array(
'type' => 'colorpicker',
'heading' => __('Bg Color'),
'format' => 'rgb',
'position' => 'bottom right',
'helpers' => require( get_template_directory(). '/inc/builder/shortcodes/helpers/colors.php' ),
),
'margin' => array(
'type' => 'scrubfield',
'responsive' => true,
'heading' => __('Margin'),
'default' => '0px',
'min' => 0,
'max' => 100,
'step' => 1
),
'infinitive' => array(
'type' => 'radio-buttons',
'heading' => __('Infinitive'),
'default' => 'false',
'options' => array(
'false' => array( 'title' => 'Off'),
'true' => array( 'title' => 'On'),
),
),
'freescroll' => array(
'type' => 'radio-buttons',
'heading' => __('Free Scroll'),
'default' => 'false',
'options' => array(
'false' => array( 'title' => 'Off'),
'true' => array( 'title' => 'On'),
),
),
'draggable' => array(
'type' => 'radio-buttons',
'heading' => __('Draggable'),
'default' => 'true',
'options' => array(
'false' => array( 'title' => 'Off'),
'true' => array( 'title' => 'On'),
),
),
'parallax' => array(
'type' => 'slider',
'heading' => 'Parallax',
'unit' => '+',
'default' => 0,
'max' => 10,
'min' => 0,
),
'mobile' => array(
'type' => 'radio-buttons',
'heading' => __('Show for Mobile'),
'default' => 'true',
'options' => array(
'false' => array( 'title' => 'Off'),
'true' => array( 'title' => 'On'),
),
),
),
),
'nav_options' => array(
'type' => 'group',
'heading' => __( 'Navigation' ),
'options' => array(
'hide_nav' => array(
'type' => 'radio-buttons',
'heading' => __('Always Visible'),
'default' => '',
'options' => array(
'' => array( 'title' => 'Off'),
'true' => array( 'title' => 'On'),
),
),
'nav_pos' => array(
'type' => 'select',
'heading' => 'Position',
'default' => '',
'options' => array(
'' => 'Inside',
'outside' => 'Outside',
)
),
'nav_size' => array(
'type' => 'select',
'heading' => 'Size',
'default' => 'large',
'options' => array(
'large' => 'Large',
'normal' => 'Normal',
)
),
'arrows' => array(
'type' => 'radio-buttons',
'heading' => __('Arrows'),
'default' => 'true',
'options' => array(
'false' => array( 'title' => 'Off'),
'true' => array( 'title' => 'On'),
),
),
'nav_style' => array(
'type' => 'select',
'heading' => __('Arrow Style'),
'default' => 'circle',
'options' => array(
'circle' => 'Circle',
'simple' => 'Simple',
'reveal' => 'Reveal',
)
),
'nav_color' => array(
'type' => 'radio-buttons',
'heading' => __('Arrow Color'),
'default' => 'light',
'options' => array(
'dark' => array( 'title' => 'Dark'),
'light' => array( 'title' => 'Light'),
),
),
'bullets' => array(
'type' => 'radio-buttons',
'heading' => __('Bullets'),
'default' => 'false',
'options' => array(
'false' => array( 'title' => 'Off'),
'true' => array( 'title' => 'On'),
),
),
'bullet_style' => array(
'type' => 'select',
'heading' => 'Bullet Style',
'default' => 'circle',
'options' => array(
'circle' => 'Circle',
'dashes' => 'Dashes',
'dashes-spaced' => 'Dashes (Spaced)',
'simple' => 'Simple',
'square' => 'Square',
)
),
),
),
'slide_options' => array(
'type' => 'group',
'heading' => __( 'Auto Slide' ),
'options' => array(
'auto_slide' => array(
'type' => 'radio-buttons',
'heading' => __('Auto slide'),
'default' => 'true',
'options' => array(
'false' => array( 'title' => 'Off'),
'true' => array( 'title' => 'On'),
),
),
'timer' => array(
'type' => 'textfield',
'heading' => 'Timer (ms)',
'default' => 6000,
),
'pause_hover' => array(
'type' => 'radio-buttons',
'heading' => __('Pause on Hover'),
'default' => 'true',
'options' => array(
'false' => array( 'title' => 'Off'),
'true' => array( 'title' => 'On'),
),
),
),
),
'advanced_options' => require( get_template_directory() . '/inc/builder/shortcodes/commons/advanced.php'),
),
) );
}
add_action('ux_builder_setup', 'slider_thumnail_nguyenlan_ux');
function slider_thumnail_nguyenlan( $atts, $content = null ){
extract( shortcode_atts( array(
'_id' => 'slider-'.rand(),
'timer' => '6000',
'bullets' => 'false',
'visibility' => '',
'class' => '',
'type' => '',
'bullet_style' => '',
'auto_slide' => 'true',
'auto_height' => 'true',
'bg_color' => '',
'slide_align' => 'center',
'style' => 'normal',
'slide_width' => '',
'arrows' => 'true',
'pause_hover' => 'true',
'hide_nav' => '',
'nav_style' => 'circle',
'nav_color' => 'light',
'nav_size' => 'large',
'nav_pos' => '',
'infinitive' => 'false',
'freescroll' => 'false',
'parallax' => '0',
'margin' => '',
'columns' => '1',
'height' => '',
'rtl' => 'false',
'draggable' => 'true',
'friction' => '0.6',
'selectedattraction' => '0.1',
'threshold' => '10',
'class_slider' => '',
'mobile' => 'true',

), $atts ) );
if($visibility == 'hidden') return;
if($mobile !== 'true' && !$visibility) {$visibility = 'hide-for-small';}

ob_start();
$wrapper_classes = array('slider-wrapper', 'relative');
if( $class ) $wrapper_classes[] = $class;
if( $visibility ) $wrapper_classes[] = $visibility;
$wrapper_classes = implode(" ", $wrapper_classes);
$classes = array('slider');
if ($type == 'fade') $classes[] = 'slider-type-'.$type;
if($bullet_style) $classes[] = 'slider-nav-dots-'.$bullet_style;
if($nav_style) $classes[] = 'slider-nav-'.$nav_style;
if($nav_size) $classes[] = 'slider-nav-'.$nav_size;
if($nav_color) $classes[] = 'slider-nav-'.$nav_color;
if($nav_pos) $classes[] = 'slider-nav-'.$nav_pos;
if($auto_slide == 'true') $auto_slide = $timer;
if($style) $classes[] = 'slider-style-'.$style;
if($hide_nav == 'true') {$classes[] = 'slider-show-nav';}
$is_arrows = 'true';
$is_bullets = 'true';

if($arrows == 'false') $is_arrows = 'false';
if($bullets == 'false') $is_bullets = 'false';

if(is_rtl()) $rtl = 'true';

$classes = implode(" ", $classes);
$css_args = array(
'bg_color' => array(
'attribute' => 'background-color',
'value' => $bg_color,
),
'margin' => array(
'attribute' => 'margin-bottom',
'value' => $margin,
)
);
?>
<div class="<?php echo $wrapper_classes; ?>" id="<?php echo $_id; ?>" <?php echo get_shortcode_inline_css($css_args); ?>>
<div class="<?php echo $classes; ?> <?php echo $_id; ?>"
data-flickity-options='{

"cellAlign": "<?php echo $slide_align; ?>",
"imagesLoaded": true,
"lazyLoad": 1,
"freeScroll": <?php echo $freescroll; ?>,
"wrapAround": <?php echo $infinitive; ?>,
"autoPlay": <?php echo $auto_slide;?>,
"pauseAutoPlayOnHover" : <?php echo $pause_hover; ?>,
"prevNextButtons": <?php echo $is_arrows; ?>,
"contain" : true,
"adaptiveHeight" : <?php echo $auto_height;?>,
"dragThreshold" : <?php echo $threshold ;?>,
"percentPosition": true,
"pageDots": <?php echo $is_bullets; ?>,
"rightToLeft": <?php echo $rtl; ?>,
"draggable": <?php echo $draggable; ?>,
"selectedAttraction": <?php echo $selectedattraction; ?>,
"parallax" : <?php echo $parallax; ?>,
"friction": <?php echo $friction; ?>
}'
>
<?php echo do_shortcode($content); ?>
</div>
<div class="nguyenlan_slider_custom <?php echo $classes; ?> "
data-flickity-options='{
"asNavFor": "<?php echo '.'.$_id;?>",
"cellAlign": "<?php echo $slide_align; ?>",
"imagesLoaded": true,
"freeScroll": <?php echo $freescroll; ?>,
"wrapAround": <?php echo $infinitive; ?>,
"autoPlay": <?php echo $auto_slide;?>,
"pauseAutoPlayOnHover" : <?php echo $pause_hover; ?>,
"prevNextButtons": <?php echo $is_arrows; ?>,
"contain" : true,
"adaptiveHeight" : <?php echo $auto_height;?>,
"dragThreshold" : <?php echo $threshold ;?>,
"percentPosition": true,
"pageDots": <?php echo $is_bullets; ?>,
"rightToLeft": <?php echo $rtl; ?>,
"draggable": <?php echo $draggable; ?>,
"selectedAttraction": <?php echo $selectedattraction; ?>,
"parallax" : <?php echo $parallax; ?>,
"friction": <?php echo $friction; ?>
}'
>
<?php echo do_shortcode($content); ?>
</div>
<div class="loading-spin dark large centered"></div>
</div>

<?php
$content = ob_get_contents();
ob_end_clean();
return $content;
}
add_shortcode('slider_thumnail_nguyenlan', 'slider_thumnail_nguyenlan');