😁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/

// ==
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');

PreviousR.test SAT NextLấy _page_title, _page_url, _post_id, _cf7_debug on Contact Form 7 (ok)

Last updated 1 year ago

Was this helpful?

// == 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> <?php $content = ob_get_contents(); ob_end_clean(); return $content; } add_shortcode('slider_thumnail', 'slider_thumnail');