Fix slider init

This commit is contained in:
2026-01-15 09:53:03 +01:00
parent f703bc23a4
commit 25493bf82f
2 changed files with 46 additions and 28 deletions

View File

@@ -17,10 +17,14 @@ $(function () {
if ( if (
!$container.length || !$container.length ||
!$paginationEl.length || !$paginationEl.length ||
!$textBox.length ||
typeof Swiper === 'undefined' typeof Swiper === 'undefined'
) )
return return
// -----------------------------
// TITLES
// -----------------------------
var titles = [] var titles = []
try { try {
titles = JSON.parse($root.attr('data-titles') || '[]') titles = JSON.parse($root.attr('data-titles') || '[]')
@@ -28,23 +32,61 @@ $(function () {
titles = [] titles = []
} }
// -----------------------------
// SET SLIDE HTML BY INDEX
// -----------------------------
function setHtmlByIndex(idx) { function setHtmlByIndex(idx) {
var $slide = $container.find('.swiper-slide').eq(idx) var $slide = $container.find('.swiper-slide').eq(idx)
var html = var html =
$slide.find('.customdevslider-swiper__slide-html').first().html() || '' $slide
.find('.customdevslider-swiper__slide-html')
.first()
.html() || ''
$textBox.html(html) $textBox.html(html)
} }
// -----------------------------
// CALC MAX TEXT HEIGHT
// -----------------------------
function setMaxTextHeight() {
var maxHeight = 0
var originalHtml = $textBox.html()
$container.find('.swiper-slide').each(function () {
var html = $(this)
.find('.customdevslider-swiper__slide-html')
.first()
.html()
if (!html) return
$textBox.html(html)
$textBox.css('height', 'auto')
var h = $textBox.outerHeight(true)
if (h > maxHeight) maxHeight = h
})
$textBox.html(originalHtml)
$textBox.height(maxHeight)
}
// -----------------------------
// INIT SWIPER
// -----------------------------
var swiper = new Swiper($container[0], { var swiper = new Swiper($container[0], {
loop: true, loop: true,
speed: 600, speed: 600,
autoplay: { autoplay: {
delay: 5000, delay: 5000,
}, },
// fade
effect: 'fade', effect: 'fade',
fadeEffect: { crossFade: true }, fadeEffect: {
crossFade: true,
},
pagination: { pagination: {
el: $paginationEl[0], el: $paginationEl[0],
@@ -70,29 +112,7 @@ $(function () {
}, },
}) })
// fallback
setHtmlByIndex(0) setHtmlByIndex(0)
}) })
function setMaxTextHeight() {
var maxHeight = 0
var originalHtml = $textBox.html()
$container.find('.swiper-slide').each(function () {
var html = $(this)
.find('.customdevslider-swiper__slide-html')
.first()
.html()
if (!html) return
$textBox.html(html)
$textBox.css('height', 'auto')
var h = $textBox.outerHeight(true)
if (h > maxHeight) maxHeight = h
})
$textBox.html(originalHtml)
$textBox.height(maxHeight)
}
}) })

View File

@@ -26,7 +26,6 @@
</a> </a>
{/if} {/if}
{* ВАЖЛИВО: зберігаємо HTML структуру тексту *}
<div class="customdevslider-swiper__slide-html" style="display:none;"> <div class="customdevslider-swiper__slide-html" style="display:none;">
{$s.text nofilter} {$s.text nofilter}
</div> </div>
@@ -34,7 +33,6 @@
{/foreach} {/foreach}
</div> </div>
{* ОДИН overlay content на весь слайдер *}
<div class="customdevslider-swiper__content"> <div class="customdevslider-swiper__content">
<div class="customdevslider-swiper__text"></div> <div class="customdevslider-swiper__text"></div>
<div class="swiper-pagination customdevslider-swiper__pagination"></div> <div class="swiper-pagination customdevslider-swiper__pagination"></div>