119 lines
2.4 KiB
JavaScript
119 lines
2.4 KiB
JavaScript
$(function () {
|
|
var $roots = $('.customdevslider-swiper')
|
|
if (!$roots.length) return
|
|
|
|
$roots.each(function () {
|
|
var $root = $(this)
|
|
|
|
if ($root.data('inited') === 1) return
|
|
$root.data('inited', 1)
|
|
|
|
var $container = $root.find('.customdevslider-swiper__container').first()
|
|
var $paginationEl = $root
|
|
.find('.customdevslider-swiper__pagination')
|
|
.first()
|
|
var $textBox = $root.find('.customdevslider-swiper__text').first()
|
|
|
|
if (
|
|
!$container.length ||
|
|
!$paginationEl.length ||
|
|
!$textBox.length ||
|
|
typeof Swiper === 'undefined'
|
|
)
|
|
return
|
|
|
|
// -----------------------------
|
|
// TITLES
|
|
// -----------------------------
|
|
var titles = []
|
|
try {
|
|
titles = JSON.parse($root.attr('data-titles') || '[]')
|
|
} catch (e) {
|
|
titles = []
|
|
}
|
|
|
|
// -----------------------------
|
|
// SET SLIDE HTML BY INDEX
|
|
// -----------------------------
|
|
function setHtmlByIndex(idx) {
|
|
var $slide = $container.find('.swiper-slide').eq(idx)
|
|
var html =
|
|
$slide
|
|
.find('.customdevslider-swiper__slide-html')
|
|
.first()
|
|
.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], {
|
|
loop: true,
|
|
speed: 600,
|
|
|
|
autoplay: {
|
|
delay: 5000,
|
|
},
|
|
|
|
effect: 'fade',
|
|
fadeEffect: {
|
|
crossFade: true,
|
|
},
|
|
|
|
pagination: {
|
|
el: $paginationEl[0],
|
|
clickable: true,
|
|
renderBullet: function (index, className) {
|
|
var t = (titles[index] || '').toString().trim()
|
|
if (!t) t = 'Slide ' + (index + 1)
|
|
return '<span class="' + className + '">' + t + '</span>'
|
|
},
|
|
},
|
|
|
|
on: {
|
|
init: function () {
|
|
setMaxTextHeight()
|
|
setHtmlByIndex(this.realIndex)
|
|
},
|
|
slideChange: function () {
|
|
setHtmlByIndex(this.realIndex)
|
|
},
|
|
resize: function () {
|
|
setMaxTextHeight()
|
|
},
|
|
},
|
|
})
|
|
|
|
// fallback
|
|
setHtmlByIndex(0)
|
|
})
|
|
})
|