Merge pull request 'fix(header): align header-slider DOM/height with zibll demo' (#270) from worktree-fix-top-multifunc-cards into main
Reviewed-on: CYL/wordpress-theme-aksrt#270
This commit is contained in:
@@ -58,7 +58,12 @@
|
||||
|
||||
/* zibll mobile (max-width: 767px) search / card offsets */
|
||||
@media (max-width: 767px) {
|
||||
.header-components {
|
||||
.header-slider-container .new-swiper.slide-header .swiper-wrapper,
|
||||
.new-swiper.slide-index.slide-header .swiper-wrapper {
|
||||
height: var(--m-height);
|
||||
}
|
||||
|
||||
.header-components:not(.new-swiper) {
|
||||
height: var(--m-height);
|
||||
}
|
||||
|
||||
|
||||
@@ -22,9 +22,61 @@
|
||||
/* Fixed homepage hero under-nav is owned by nav/base.css (body.nav-fixed). */
|
||||
|
||||
/* ============================================================
|
||||
* Layer 1: Swiper shell
|
||||
* Layer 1: Swiper shell — zibll .new-swiper.slide-header
|
||||
* Height lives on CSS vars of .new-swiper; wrapper height = --pc-height / --m-height
|
||||
* ============================================================ */
|
||||
.header-components {
|
||||
.header-slider-container .new-swiper.slide-header,
|
||||
.new-swiper.slide-index.slide-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding-top: 0;
|
||||
border-radius: 0;
|
||||
background: #111;
|
||||
/* Defaults if PHP did not set style vars */
|
||||
--pc-height: 550px;
|
||||
--m-height: 280px;
|
||||
}
|
||||
|
||||
.header-slider-container .new-swiper.slide-header .swiper-wrapper,
|
||||
.new-swiper.slide-index.slide-header .swiper-wrapper {
|
||||
height: var(--pc-height);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-slider-container .new-swiper.slide-header .swiper-slide,
|
||||
.new-swiper.slide-index.slide-header .swiper-slide {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* zibll: slide media fill wrapper height */
|
||||
.header-slider-container .new-swiper.slide-header .swiper-slide img,
|
||||
.header-slider-container .new-swiper.slide-header .swiper-slide video,
|
||||
.new-swiper.slide-index.slide-header .swiper-slide img,
|
||||
.new-swiper.slide-index.slide-header .swiper-slide video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 0 !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header-slider-container .new-swiper.slide-header .swiper-slide > a,
|
||||
.header-slider-container .new-swiper.slide-header .swiper-slide > span,
|
||||
.new-swiper.slide-index.slide-header .swiper-slide > a,
|
||||
.new-swiper.slide-index.slide-header .swiper-slide > span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Keep legacy .header-components shell for gradient fallback only */
|
||||
.header-components:not(.new-swiper) {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
--pc-height: 550px;
|
||||
@@ -35,7 +87,7 @@
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.header-components.slide-header {
|
||||
.header-components.slide-header:not(.new-swiper) {
|
||||
padding-top: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
@@ -63,20 +115,21 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.header-components .swiper-wrapper {
|
||||
.header-components:not(.new-swiper) .swiper-wrapper {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-components .swiper-slide {
|
||||
.header-components:not(.new-swiper) .swiper-slide {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Legacy BEM slide bg — only when old markup still present */
|
||||
.header-components__slide-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
@@ -48,7 +48,7 @@ if (!function_exists('aksrt_get_search_keywords_but')) :
|
||||
if ($kw === '') {
|
||||
continue;
|
||||
}
|
||||
$out .= '<a class="but jb-sm search_keywords" data-search-keyword="' . esc_attr($kw) . '" href="'
|
||||
$out .= '<a class="search_keywords muted-2-color but em09 mr6 mb6" data-search-keyword="' . esc_attr($kw) . '" href="'
|
||||
. esc_url(home_url('/?s=' . rawurlencode($kw))) . '">'
|
||||
. esc_html($kw) . '</a> ';
|
||||
}
|
||||
|
||||
@@ -225,138 +225,219 @@ if (!empty($hero_banners)) :
|
||||
echo '<style id="aksrt-header-slider-nav-color">body.nav-fixed:not(.body-scroll):not(.mobile-navbar-show) .header.show-slide{--header-color:' . esc_attr($_nav_color_for_header) . ';}</style>';
|
||||
}
|
||||
|
||||
// zibll zib_new_slider defaults for header_slider_option.
|
||||
$direction = in_array(($slider_cfg['direction'] ?? 'horizontal'), ['horizontal', 'vertical'], true) ? $slider_cfg['direction'] : 'horizontal';
|
||||
$effect = sanitize_key((string) ($slider_cfg['effect'] ?? 'slide')) ?: 'slide';
|
||||
$loop_on = $slide_count > 1 && (!isset($slider_cfg['loop']) || !empty($slider_cfg['loop']));
|
||||
$button_on = $slide_count > 1 && (!isset($slider_cfg['button']) || !empty($slider_cfg['button']) || !empty($slider_cfg['navigation']));
|
||||
$pag_on = $slide_count > 1 && (!isset($slider_cfg['pagination']) || !empty($slider_cfg['pagination']));
|
||||
$autoplay_on = $slide_count > 1 && (!isset($slider_cfg['autoplay']) || !empty($slider_cfg['autoplay']) || !empty($slider_cfg['autoplay_interval']));
|
||||
$interval_ms = max(1000, min(30000, (int) ($slider_cfg['autoplay_interval'] ?? 4000)));
|
||||
// zibll stores interval in seconds sometimes (<999).
|
||||
if ($interval_ms < 999) {
|
||||
$interval_ms *= 1000;
|
||||
}
|
||||
$speed_ms = max(0, (int) ($slider_cfg['speed'] ?? 0));
|
||||
$space_between = max(0, (int) ($slider_cfg['space_between'] ?? 0));
|
||||
$scale_height = !empty($slider_cfg['scale_height']);
|
||||
$scale_pct = max(10, min(100, (int) ($slider_cfg['scale'] ?? 40)));
|
||||
|
||||
// Heights: demo uses style="--m-height :300px;--pc-height :560px;" on .new-swiper
|
||||
$pc_h = trim((string) ($slider_cfg['pc_height'] ?? ''));
|
||||
$m_h = trim((string) ($slider_cfg['mobile_height'] ?? ''));
|
||||
// Defaults match zibll header_slider_option (550 / 280).
|
||||
if ($pc_h === '') {
|
||||
$pc_h = '550';
|
||||
}
|
||||
if ($m_h === '') {
|
||||
$m_h = '280';
|
||||
}
|
||||
// Normalize to unitless px numbers for CSS vars.
|
||||
$pc_h_num = (int) preg_replace('/[^0-9]/', '', $pc_h) ?: 550;
|
||||
$m_h_num = (int) preg_replace('/[^0-9]/', '', $m_h) ?: 280;
|
||||
|
||||
$swiper_class = 'swiper new-swiper slide-index slide-header';
|
||||
if ($scale_height && $direction !== 'vertical') {
|
||||
$swiper_class .= ' scale-height';
|
||||
}
|
||||
if ($slide_count === 1) {
|
||||
$swiper_class .= ' swiper-container-initialized';
|
||||
}
|
||||
|
||||
$style_vars = '';
|
||||
if ($scale_height && $direction !== 'vertical') {
|
||||
$style_vars = '--scale-height :' . $scale_pct . '%';
|
||||
} else {
|
||||
$style_vars = '--m-height :' . $m_h_num . 'px;--pc-height :' . $pc_h_num . 'px;';
|
||||
}
|
||||
|
||||
// data-* attrs for zibll main.js / our slider.js dual path.
|
||||
$data_attrs = ' data-direction="' . esc_attr($direction) . '"';
|
||||
$data_attrs .= ' data-effect="' . esc_attr($effect) . '"';
|
||||
$data_attrs .= $loop_on ? ' data-loop="true"' : '';
|
||||
$data_attrs .= $autoplay_on ? ' data-autoplay="1" data-interval="' . esc_attr((string) $interval_ms) . '"' : '';
|
||||
$data_attrs .= $speed_ms > 299 ? ' data-speed="' . esc_attr((string) $speed_ms) . '"' : '';
|
||||
$data_attrs .= ' data-spaceBetween="' . esc_attr((string) $space_between) . '"';
|
||||
|
||||
$swiper_config = [
|
||||
'effect' => $slider_cfg['effect'] ?? 'fade',
|
||||
'loop' => $slide_count > 1 && ($slider_cfg['loop'] ?? true),
|
||||
'speed' => 600,
|
||||
'autoplay' => $slide_count > 1 ? ['delay' => ($slider_cfg['autoplay_interval'] ?? 5000), 'disableOnInteraction' => false] : false,
|
||||
'keyboard' => ['enabled' => true],
|
||||
'effect' => $effect,
|
||||
'direction' => $direction,
|
||||
'loop' => $loop_on,
|
||||
'speed' => $speed_ms > 299 ? $speed_ms : 600,
|
||||
'spaceBetween' => $space_between,
|
||||
'autoplay' => $autoplay_on ? ['delay' => $interval_ms, 'disableOnInteraction' => false] : false,
|
||||
'keyboard' => ['enabled' => true],
|
||||
'autoHeight' => false,
|
||||
];
|
||||
if (!empty($slider_cfg['pagination'])) {
|
||||
if ($pag_on) {
|
||||
$swiper_config['pagination'] = ['clickable' => true];
|
||||
} else {
|
||||
$swiper_config['pagination'] = false;
|
||||
}
|
||||
if (!empty($slider_cfg['navigation'])) {
|
||||
if ($button_on) {
|
||||
$swiper_config['navigation'] = true;
|
||||
}
|
||||
$pc_height = $slider_cfg['pc_height'] ?? '';
|
||||
$mobile_height = $slider_cfg['mobile_height'] ?? '';
|
||||
$height_style = '';
|
||||
if ($pc_height !== '') {
|
||||
$height_style .= '--pc-height:' . esc_attr($pc_height) . ';';
|
||||
}
|
||||
if ($mobile_height !== '') {
|
||||
$height_style .= '--m-height:' . esc_attr($mobile_height) . ';';
|
||||
} else {
|
||||
$swiper_config['navigation'] = false;
|
||||
}
|
||||
?>
|
||||
<div class="<?php echo esc_attr(implode(' ', $container_classes)); ?>" id="aksrt-header-components"<?php if ($height_style !== '') : ?> style="<?php echo $height_style; ?>"<?php endif; ?>>
|
||||
<div class="<?php echo esc_attr(implode(' ', $container_classes)); ?>" id="aksrt-header-components">
|
||||
<div class="relative zib-slider">
|
||||
<div class="swiper new-swiper header-components slide-index slide-header" data-swiper-config="<?php echo esc_attr(wp_json_encode($swiper_config)); ?>">
|
||||
<div class="<?php echo esc_attr($swiper_class); ?>"<?php echo $data_attrs; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> data-swiper-config="<?php echo esc_attr(wp_json_encode($swiper_config)); ?>" style="<?php echo esc_attr($style_vars); ?>">
|
||||
<div class="swiper-wrapper">
|
||||
<?php foreach ($hero_banners as $index => $slide) :
|
||||
$device_vis = $slide['device_visibility'] ?? 'all';
|
||||
$is_mobile_now = function_exists('wp_is_mobile') && wp_is_mobile();
|
||||
$device_vis = (string) ($slide['device_visibility'] ?? ($slide['hide'] ?? 'all'));
|
||||
// zibll hide / device_visibility: skip when current device is hidden.
|
||||
if (in_array($device_vis, ['pc', 'only_pc'], true) && $is_mobile_now) {
|
||||
continue;
|
||||
}
|
||||
if (in_array($device_vis, ['m', 'mobile', 'only_sm', 'm-only'], true) && !$is_mobile_now) {
|
||||
continue;
|
||||
}
|
||||
|
||||
$slide_classes = 'swiper-slide';
|
||||
if ($device_vis === 'pc') {
|
||||
$slide_classes .= ' hero-slide--pc-only';
|
||||
} elseif ($device_vis === 'mobile') {
|
||||
$slide_classes .= ' hero-slide--mobile-only';
|
||||
$video_url = (string) ($slide['video_url'] ?? $slide['background_video'] ?? '');
|
||||
$image_url = (string) ($slide['image'] ?? $slide['background'] ?? '');
|
||||
// Link may be string or zibll link array.
|
||||
$link_raw = $slide['link'] ?? '';
|
||||
$link_url = '';
|
||||
$link_target = '';
|
||||
if (is_array($link_raw)) {
|
||||
$link_url = (string) ($link_raw['url'] ?? '');
|
||||
$link_target = (string) ($link_raw['target'] ?? '');
|
||||
} else {
|
||||
$link_url = (string) $link_raw;
|
||||
$link_target = (string) ($slide['link_target'] ?? '');
|
||||
}
|
||||
if (!empty($slide['video_url'])) {
|
||||
$slide_classes .= ' hero-slide--has-video';
|
||||
$blank = ($link_target === '_blank' || $link_target === '1') ? ' target="_blank"' : '';
|
||||
|
||||
// Video bg only on desktop (zibll).
|
||||
$use_video = ($video_url !== '' && !$is_mobile_now);
|
||||
if ($use_video) {
|
||||
$slide_classes .= ' slide-background-video';
|
||||
}
|
||||
$link_target = !empty($slide['link_target']) ? $slide['link_target'] : '_self';
|
||||
$has_layers = !empty($slide['layers']) && is_array($slide['layers']);
|
||||
$text_parallax = !empty($slide['text_parallax']);
|
||||
// Align CSS vars with zibll --text-size-pc / --text-size-m.
|
||||
$text_style = '';
|
||||
if (!empty($slide['text_size_pc'])) {
|
||||
$text_style .= '--text-size-pc:' . esc_attr((int) $slide['text_size_pc']) . 'px;';
|
||||
$text_style .= '--hero-text-size-pc:' . esc_attr($slide['text_size_pc']) . ';';
|
||||
|
||||
$img_alt = (string) ($slide['title'] ?? '');
|
||||
if ($img_alt === '') {
|
||||
$img_alt = get_bloginfo('name');
|
||||
}
|
||||
if (!empty($slide['text_size_m'])) {
|
||||
$text_style .= '--text-size-m:' . esc_attr((int) $slide['text_size_m']) . 'px;';
|
||||
$text_style .= '--hero-text-size-m:' . esc_attr($slide['text_size_m']) . ';';
|
||||
|
||||
// Decorative text from slide (optional; main copy is search before_html).
|
||||
$show_text = !isset($slide['show_text']) || $slide['show_text'];
|
||||
$title = (string) ($slide['title'] ?? ($slide['text']['title'] ?? ''));
|
||||
$desc = (string) ($slide['subtitle'] ?? $slide['description'] ?? ($slide['text']['desc'] ?? ''));
|
||||
if (is_array($slide['text'] ?? null)) {
|
||||
$title = (string) ($slide['text']['title'] ?? $title);
|
||||
$desc = (string) ($slide['text']['desc'] ?? $desc);
|
||||
}
|
||||
if ($text_parallax) {
|
||||
$text_style .= '--hero-text-parallax:1;';
|
||||
}
|
||||
?>
|
||||
<div class="<?php echo esc_attr($slide_classes); ?>"<?php if (!empty($slide['link'])) : ?> data-link="<?php echo esc_url($slide['link']); ?>" data-target="<?php echo esc_attr($link_target); ?>"<?php endif; ?>>
|
||||
<div class="header-components__slide-bg">
|
||||
<?php if (!empty($slide['video_url'])) : ?>
|
||||
<video class="header-components__video" autoplay muted loop playsinline preload="metadata">
|
||||
<source src="<?php echo esc_url($slide['video_url']); ?>" type="video/mp4">
|
||||
</video>
|
||||
<?php endif; ?>
|
||||
<?php if (!empty($slide['image'])) : ?>
|
||||
<img
|
||||
src="<?php echo esc_url($slide['image']); ?>"
|
||||
alt="<?php echo esc_attr($slide['title'] ?: get_bloginfo('name')); ?>"
|
||||
loading="<?php echo 0 === $index ? 'eager' : 'lazy'; ?>"
|
||||
decoding="async"
|
||||
class="fit-cover"
|
||||
>
|
||||
<?php elseif (empty($slide['video_url'])) : ?>
|
||||
<div class="header-components__slide-fallback"></div>
|
||||
<?php endif; ?>
|
||||
<?php if ($has_layers) : ?>
|
||||
<?php foreach ($slide['layers'] as $layer) :
|
||||
if (empty($layer['image'])) continue;
|
||||
$layer_classes = 'header-components__layer';
|
||||
if (!empty($layer['parallax'])) $layer_classes .= ' header-components__layer--parallax';
|
||||
if (!empty($layer['free_size'])) $layer_classes .= ' header-components__layer--free-size';
|
||||
$layer_style = '';
|
||||
if (!empty($layer['align']) && $layer['align'] !== 'center') {
|
||||
$layer_style .= 'background-position:' . esc_attr($layer['align']) . ';';
|
||||
}
|
||||
if (!empty($layer['parallax'])) {
|
||||
$pscale = isset($layer['parallax_scale']) ? (float) $layer['parallax_scale'] : 0.3;
|
||||
$popacity = isset($layer['parallax_opacity']) ? (float) $layer['parallax_opacity'] : 0.6;
|
||||
$layer_style .= '--layer-parallax-scale:' . esc_attr($pscale) . ';';
|
||||
$layer_style .= '--layer-parallax-opacity:' . esc_attr($popacity) . ';';
|
||||
}
|
||||
?>
|
||||
<div class="<?php echo esc_attr($layer_classes); ?>" style="background-image:url('<?php echo esc_url($layer['image']); ?>')<?php echo $layer_style ? ';' . $layer_style : ''; ?>"></div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="header-components__slide-overlay"></div>
|
||||
<?php
|
||||
// Per-slide decorative text only (zibll .abs-center.slide-text).
|
||||
// Hero main title/subtitle must live in search before_html.
|
||||
$show_text = !isset($slide['show_text']) || $slide['show_text'];
|
||||
$has_title = !empty($slide['title']);
|
||||
$has_subtitle = !empty($slide['subtitle']);
|
||||
$has_description = !empty($slide['description']);
|
||||
$text_align = $slide['text_align'] ?? '';
|
||||
$text_align_class = '';
|
||||
if ($text_align !== '' && $text_align !== 'left') {
|
||||
// zibll uses conter-bottom / left-bottom etc.; keep text-* for existing data.
|
||||
$text_align_class = ' text-' . sanitize_html_class($text_align);
|
||||
if (in_array($text_align, ['center', 'conter-conter', 'conter-bottom'], true)) {
|
||||
$text_align_class .= ' conter-conter';
|
||||
} elseif ($text_align === 'left-bottom') {
|
||||
$text_align_class .= ' left-bottom';
|
||||
} elseif ($text_align === 'right-bottom') {
|
||||
$text_align_class .= ' right-bottom';
|
||||
}
|
||||
$text_align = (string) ($slide['text_align'] ?? ($slide['text']['text_align'] ?? 'left-bottom'));
|
||||
$text_size_pc = (int) ($slide['text_size_pc'] ?? ($slide['text']['text_size_pc'] ?? 0));
|
||||
$text_size_m = (int) ($slide['text_size_m'] ?? ($slide['text']['text_size_m'] ?? 0));
|
||||
$text_parallax = (int) ($slide['text_parallax'] ?? ($slide['text']['parallax'] ?? 0));
|
||||
|
||||
$s_text = '';
|
||||
if ($show_text && ($title !== '' || $desc !== '')) {
|
||||
$s_text = $title !== '' ? '<div class="slide-title">' . esc_html($title) . '</div>' : '';
|
||||
$s_text .= $desc !== '' ? '<div class="slide-desc">' . esc_html($desc) . '</div>' : '';
|
||||
$s_text_class = 'abs-center slide-text';
|
||||
if ($text_align !== '') {
|
||||
$s_text_class .= ' ' . sanitize_html_class($text_align);
|
||||
}
|
||||
?>
|
||||
<?php if ($show_text && ($has_title || $has_subtitle || $has_description)) : ?>
|
||||
<div class="abs-center slide-text header-components__content<?php echo esc_attr($text_align_class); ?><?php echo $text_parallax ? ' has-text-parallax' : ''; ?>"<?php echo $text_style ? ' style="' . $text_style . '"' : ''; ?>>
|
||||
<?php if ($has_title) : ?>
|
||||
<div class="header-components__title slide-title"><?php echo esc_html($slide['title']); ?></div>
|
||||
<?php endif; ?>
|
||||
<?php if ($has_subtitle) : ?>
|
||||
<div class="header-components__subtitle slide-desc"><?php echo esc_html($slide['subtitle']); ?></div>
|
||||
<?php endif; ?>
|
||||
<?php if ($has_description) : ?>
|
||||
<div class="header-components__description"><?php echo esc_html($slide['description']); ?></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
$s_text_style = '';
|
||||
if ($text_size_pc > 0) {
|
||||
$s_text_style .= '--text-size-pc:' . $text_size_pc . 'px;';
|
||||
}
|
||||
if ($text_size_m > 0) {
|
||||
$s_text_style .= '--text-size-m:' . $text_size_m . 'px;';
|
||||
}
|
||||
$s_text = '<div class="' . esc_attr($s_text_class) . '"' . ($s_text_style !== '' ? ' style="' . esc_attr($s_text_style) . '"' : '') . '>' . $s_text . '</div>';
|
||||
if ($text_parallax) {
|
||||
$s_text = '<div class="absolute" data-swiper-parallax="' . esc_attr((string) $text_parallax) . '">' . $s_text . '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// Background media (zibll order: video > image).
|
||||
$s_background = '';
|
||||
if ($use_video) {
|
||||
$poster = $image_url !== '' ? ' poster="' . esc_url($image_url) . '"' : '';
|
||||
$s_background = '<video autoplay loop muted playsinline class="fit-cover radius8" src="' . esc_url($video_url) . '"' . $poster . '></video><div class="absolute"></div>';
|
||||
} elseif ($image_url !== '') {
|
||||
$s_background = '<img class="fit-cover radius8' . ($index > 0 ? ' lazyload swiper-lazy' : '') . '"'
|
||||
. ($index > 0
|
||||
? ' data-src="' . esc_url($image_url) . '" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"'
|
||||
: ' src="' . esc_url($image_url) . '"')
|
||||
. ' alt="' . esc_attr($img_alt) . '">';
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Layers (image_layer).
|
||||
$s_layers = '';
|
||||
$layers = $slide['layers'] ?? ($slide['image_layer'] ?? []);
|
||||
if (is_array($layers)) {
|
||||
foreach ($layers as $layer) {
|
||||
if (!is_array($layer)) {
|
||||
continue;
|
||||
}
|
||||
$layer_image = (string) ($layer['image'] ?? '');
|
||||
if ($layer_image === '') {
|
||||
continue;
|
||||
}
|
||||
$layer_img = '<img class="radius8 lazyload swiper-lazy" data-src="' . esc_url($layer_image) . '" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="' . esc_attr($img_alt) . '">';
|
||||
$layer_parallax = isset($layer['parallax']) ? (int) $layer['parallax'] : 0;
|
||||
$layer_attr = $layer_parallax ? ' data-swiper-parallax="' . $layer_parallax . '%"' : '';
|
||||
$layer_class = !empty($layer['free_size']) ? ' slide-layer' : '';
|
||||
if (!empty($layer['align'])) {
|
||||
$layer_class .= ' text-' . sanitize_html_class((string) $layer['align']);
|
||||
}
|
||||
$s_layers .= '<div class="absolute' . esc_attr($layer_class) . '"' . $layer_attr . '>' . $layer_img . '</div>';
|
||||
}
|
||||
}
|
||||
?>
|
||||
<div class="<?php echo esc_attr($slide_classes); ?>">
|
||||
<?php if ($link_url !== '') : ?>
|
||||
<a<?php echo $blank; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> href="<?php echo esc_url($link_url); ?>">
|
||||
<?php else : ?>
|
||||
<span>
|
||||
<?php endif; ?>
|
||||
<?php echo $s_background; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||
<?php echo $s_layers; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||
<?php echo $s_text; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||
<?php if ($link_url !== '') : ?>
|
||||
</a>
|
||||
<?php else : ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php if ($button_on) : ?>
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<?php endif; ?>
|
||||
<?php if ($pag_on) : ?>
|
||||
<div class="swiper-pagination kaoyou"></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user