😁THEME FLATSOME, WORDPRESS Hướng dẫn tạo elementer slider thumnail với flatsome (ok)

https://pttuan410.com/huong-dan-tao-elementer-slider-thumnail-voi-flatsome/

Front-end

Back-end

// ==
function flatsome_ux_builder_template_pttuan($path)
{
  ob_start();
  include get_template_directory() . '/inc/builder/shortcodes/templates/' . $path;
  return ob_get_clean();
}
function flatsome_ux_builder_thumbnail_pttuan($name)
{
  return get_template_directory_uri() . '/inc/builder/shortcodes/thumbnails/' . $name . '.svg';
}
function flatsome_ux_builder_template_thumb_pttuan($name)
{
  return get_template_directory_uri() . '/inc/builder/templates/thumbs/' . $name . '.jpg';
}
function pttuan_custom_shortcode_slider_thumnail()
{
  add_ux_builder_shortcode('slider_thumnail', array(
    'type' => 'container',
    'name' => __('slider_thumnail'),
    'category' => __('Layout'),
    'message' => __('Add slides here'),
    'directives' => array('ux-slider'),
    'allow' => array('ux_banner', 'ux_image', 'section', 'row', 'ux_banner_grid', 'logo'),
    'template' => flatsome_ux_builder_template_pttuan('ux_slider.html'),
    'thumbnail' =>  flatsome_ux_builder_thumbnail_pttuan('slider'),
    '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', 'pttuan_custom_shortcode_slider_thumnail');
function slider_thumnail($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: <?php echo $slide_width; ?> !important;
        <?php } ?>
    </style>
  </div><!-- .ux-slider-wrapper -->
<?php
  $content = ob_get_contents();
  ob_end_clean();
  return $content;
}
add_shortcode('slider_thumnail', 'slider_thumnail');