Your IP : 216.73.216.50
<html><body></body></html>.su-panel-slider {
position: relative;
color: #fff;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
}
.su-panel-slider .swiper-container {
cursor: -webkit-grab;
}
.su-panel-slider .su-panel-slide .su-pnls-desc {
-webkit-transition: .3s ease-out;
transition: .3s ease-out;
-webkit-transition-property: opacity,transform,filter;
transition-property: opacity,transform,filter;
-webkit-transform: translateY(100%);
transform: translateY(100%);
margin: 30px;
position: absolute;
bottom: 0;
left: 0;
color: rgba(255, 255, 255, 0.5);
z-index: 1;
opacity: 0;
}
.su-panel-slider .su-panel-slide:hover .su-pnls-desc {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.su-panel-slider .su-panel-slide {
position: relative;
}
.su-panel-slider .su-panel-slide:after {
content: '';
background: -moz-linear-gradient(top, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
-webkit-transition: .3s ease-out;
transition: .3s ease-out;
-webkit-transition-property: opacity,transform,filter;
transition-property: opacity,transform,filter;
}
.su-panel-slider .su-panel-slide:hover:after {
opacity: 1;
}
.su-panel-slider .su-slide-title {
color: #fff;
margin-top: 15px;
margin-bottom: 0;
text-transform: uppercase;
}
.su-panel-slider .su-link {
color: #fff;
text-decoration: none;
font-size: 16px
}
.su-panel-slider .swiper-button-prev,
.su-panel-slider .swiper-container-rtl .swiper-button-next {
left: 30px;
}
.su-panel-slider .swiper-button-next,
.su-panel-slider .swiper-container-rtl .swiper-button-prev {
right: 30px;
}
.su-panel-slider .su-panel-slide .su-pnls-thumb img {
opacity: 0.5;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.su-panel-slider .su-panel-slide:hover .su-pnls-thumb img {
opacity: 1;
}<html><body></body></html><?php
/**
* @package Shortcode Ultimate
* @author BdThemes http://www.bdthemes.com
* @copyright Copyright (C) BdThemes Ltd
* @license http://www.gnu.org/licenses/gpl.html GNU/GPL
*/
defined( '_JEXEC' ) or die( 'Restricted access' );
class Su_Shortcode_panel_slider_config extends Su_Data {
function __construct() {
parent::__construct();
}
static function get_config() {
return array(
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_PANEL_SLIDER'),
'type' => 'wrap',
'group' => 'extra gallery',
'badge' => 'NEW',
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_PANEL_SLIDER_DESC'),
'icon' => 'desktop',
'function' => array( 'Shortcodes_Ultimate_Extra_Shortcodes', 'panel_slider' ),
'atts' => array(
'small' => array(
'type' => 'slider',
'min' => 1,
'max' => 6,
'step' => 1,
'default' => 1,
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_SMALL_DEVICE_ITEM'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_SMALL_DEVICE_ITEM_DESC'),
'child' => array(
'medium' => array(
'type' => 'slider',
'min' => 1,
'max' => 6,
'step' => 1,
'default' => 2,
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_MEDIUM_DEVICE_ITEM'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_MEDIUM_DEVICE_ITEM_DESC')
),
'large' => array(
'type' => 'slider',
'min' => 1,
'max' => 6,
'step' => 1,
'default' => 3,
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_LARGE_DEVICE_ITEM'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_LARGE_DEVICE_ITEM_DESC')
)
)
),
'gutter' => array(
'type' => 'select',
'default' => 'collapse',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_GUTTER'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_PS_GUTTER_DESC'),
'values' => array(
'small' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_SMALL'),
'medium' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_MEDIUM'),
'Large' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_LARGE'),
'collapse' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_COLLAPSE'),
)
),
'autoplay' => array(
'type' => 'bool',
'default' => 'yes',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_AUTOPLAY'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_AUTOPLAY_DESC'),
'child' => array(
'loop' => array(
'type' => 'bool',
'default' => 'yes',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_LOOP'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_LOOP_DESC')
),
)
),
'navigation' => array(
'type' => 'bool',
'default' => 'yes',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_NAVIGATION'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_NAVIGATION_DESC'),
'child' => array(
'pagination' => array(
'type' => 'bool',
'default' => 'no',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_PAGINATION'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_PAGINATION_DESC'),
),
)
),
'scroll_reveal' => array(
'default' => '',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_SCROLL_REVEAL'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_SCROLL_REVEAL_DESC')
),
'class' => array(
'default' => '',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_CLASS'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_CLASS_DESC')
)
),
'content' => sprintf( '[__panel_slide] %1$s1 [/__panel_slide]%2$s[__panel_slide] %1$s2 [/__panel_slide]%2$s[__panel_slide] %1$s3 [/__panel_slide]', 'Slide content', "\n" )
);
}
}
<html><body></body></html><?php
/**
* @package Shortcode Ultimate
* @author BdThemes http://www.bdthemes.com
* @copyright Copyright (C) BdThemes Ltd
* @license http://www.gnu.org/licenses/gpl.html GNU/GPL
*/
defined( '_JEXEC' ) or die( 'Restricted access' );
class Su_Shortcode_panel_slider extends Su_Shortcodes {
function __construct() {
parent::__construct();
}
public static function panel_slider($atts = null, $content = null) {
$atts = su_shortcode_atts(array(
'large' => '3',
'medium' => '2',
'small' => '1',
'gutter' => 'collapse',
'navigation' => 'yes',
'pagination' => 'no',
'autoplay' => 'yes',
'loop' => 'yes',
'scroll_reveal' => '',
'class' => ''
), $atts, 'panel_slider');
$id = uniqid('supnls_');
$classes = ['su-panel-slider', su_ecssc($atts)];
$output = [];
if ($atts['gutter'] == 'large') { $gutter = 50; }
elseif ($atts['gutter'] == 'medium') { $gutter = 25;}
elseif ($atts['gutter'] == 'small') { $gutter = 10;}
elseif ($atts['gutter'] == 'collapse') { $gutter = 0;}
$autoplay = ($atts['autoplay'] =='yes') ? 5000 : 'false';
$loop = ($atts['loop'] =='yes') ? 'true' : 'false';
$large = $atts['large'];
$medium = $atts['medium'];
$small = $atts['small'];
$output[] = '<div id ="'.$id.'" class="'.su_acssc($classes).'" '.su_scroll_reveal($atts).'>';
$output[] = '<div class="swiper-container">';
$output[] = '<div class="swiper-wrapper">';
$output[] = su_do_shortcode($content);
$output[] = '</div>';
$output[] = '</div>';
/* Add Pagination */
if ( $atts['pagination'] == 'yes' ) {
$output[] = '<div class="swiper-pagination"></div>';
}
/* Add Arrows */
if ( $atts['navigation'] == 'yes' ) {
$output[] = '<div class="swiper-button-next swiper-button-white"></div><div class="swiper-button-prev swiper-button-white"></div>';
}
$output[] ='</div>';
/* Initialize Swiper */
$output[] = "<script>
jQuery(document).ready(function ($) {
var swiper = new Swiper('#$id .swiper-container', {
pagination: '#$id .swiper-pagination',
paginationClickable: true,
nextButton: '#$id .swiper-button-next',
prevButton: '#$id .swiper-button-prev',
autoplay: $autoplay,
loop: $loop,
autoplayDisableOnInteraction: false,
slidesPerView: $large,
spaceBetween: $gutter,
breakpoints: {
1024: {
slidesPerView: $large,
spaceBetween: $gutter
},
768: {
slidesPerView: $medium,
spaceBetween: $gutter
},
640: {
slidesPerView: $small,
spaceBetween: $gutter
}
}
});
});
</script>";
suAsset::addFile('css', 'panel_slider.css', __FUNCTION__);
suAsset::addFile('css', 'swiper.min.css');
suAsset::addFile('js', 'swiper.jquery.min.js');
return implode("\n", $output);
}
}