[Thủ Thuật FlatSome] Hướng dẫn tạo Thumbnail Slider trong Flatsome với Flickity

Giới thiệu Slider Flickity trong Flatsome

Flatsome đang sử dụng thư viện slider Flickity, nên các bạn có thể vào document của nó để đọc được nhiều thứ hay ho hơn nhé.

Một số chức năng cơ bản mà thư viện này có thể thực hiện được gồm có:

• draggable
• Freescoll
• wrapAround
• groupCells
• autoPlay
• fullscreen
• fade
• ...

Xem thêm:

• [Flatsome] Custom Slider Flatsome cực đẹp - 2
• [Flatsome] Custom Slider Flatsome cực đẹp

Hướng dẫn tạo Thumbnail Slider trong Flatsome với Flickity

Các thao tác được thực hiện trong file functions.php của theme childtheme.

Bước 1 - Khai báo element Thumbnail Slider

Tạo một khai báo element thumbnail slider dựa trên UX Slider của flatsome

/wp-content/themes/flatsome/inc/builder/shortcodes/ux_slider.php

function get_template_slider_thumbnail(){
    ob_start();
    include get_template_directory(). '/inc/builder/shortcodes/templates/ux_slider.html';
    return ob_get_clean();
}
function register_shortcode_slider_thumbnail()
{
    add_ux_builder_shortcode('slider_thumbnail', array(
        'type' => 'container',
        'name' => __('Slider Thumbnail'),
        '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_slider_thumbnail(),
        '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', 'register_shortcode_slider_thumbnail');

Như vậy bạn đã tạo thành công một element tên là Slider Thumbnail

Image

Bước 2:  Tạo function hiển thị short code Thumbnail Slider

function func_short_code_slider_thumbnail($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' => '',
        // Derpicated
        'mobile' => 'true',

    ), $atts));

    // Stop if visibility is hidden
    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;

    // Bullet style
    if ($bullet_style) $classes[] = 'slider-nav-dots-' . $bullet_style;

    // Nav style
    if ($nav_style) $classes[] = 'slider-nav-' . $nav_style;

    // Nav size
    if ($nav_size) $classes[] = 'slider-nav-' . $nav_size;

    // Nav Color
    if ($nav_color) $classes[] = 'slider-nav-' . $nav_color;

    // Nav Position
    if ($nav_pos) $classes[] = 'slider-nav-' . $nav_pos;

    // Add timer
    if ($auto_slide == 'true') $auto_slide = $timer;

    // Add Slider style
    if ($style) $classes[] = 'slider-style-' . $style;
    // Always show Nav if set
    if ($hide_nav ==  'true') {
        $classes[] = 'slider-show-nav';
    }

    // Slider Nav visebility
    $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);

    // Inline CSS
    $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="slider-custom <?php echo $classes; ?> " data-flickity-options='{
              "asNavFor": "<?php echo '.' . $_id; ?>",
              "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="loading-spin dark large centered"></div>

        <style scope="scope">
            .slider-custom {
                padding: 0 50px;
                bottom: 120px;

            }

            .slider-custom .flickity-slider .img {
                max-width: 20% !important;
                margin: 5px;
                border: 2px solid #fff;
            }

            <?php if ($slide_width) 
                { ?><?php echo '#'.$_id .'.flickity-slider>* {max-width:'. $slide_width .'!important;}'; ?> <?php } ?>
        </style>
    </div><!-- .ux-slider-wrapper -->

<?php
    $content = ob_get_contents();
    ob_end_clean();
    return $content;
}

add_shortcode('slider_thumbnail', 'func_short_code_slider_thumbnail');