48 lines
2.5 KiB
HTML
48 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>cover repro2 - with swiper init</title>
|
|
<link rel="stylesheet" href="../assets/css/main.min.css">
|
|
<link rel="stylesheet" href="../assets/css/swiper.css">
|
|
<link rel="stylesheet" href="../assets/css/frontend/single-post/cover.css">
|
|
<style> body { padding: 20px; max-width: 800px; } h4 { margin: 10px 0; } </style>
|
|
</head>
|
|
<body>
|
|
<h4>A+Swiper: 当前 markup + 主题同参初始化</h4>
|
|
<div class="single-head-cover">
|
|
<div class="aksrt-slider-wrapper mb20 single-cover-slide imgbox-container aksrt-slider-wrapper--scale aksrt-slider-wrapper--has-overlay" style="position:relative;padding-bottom:calc(35% + 50px);"><div class="new-swiper slide-index single-cover single-cover--slide" data-effect="slide" data-loop data-autoplay data-interval="5000" style="--pc-height:100%;--m-height:100%;position:absolute;inset:0;width:100%;height:100%;"><div class="swiper-wrapper"><div class="swiper-slide"><img class="lazyload fit-cover" src="img-a.svg" alt="a"></div><div class="swiper-slide"><img class="lazyload fit-cover" src="img-b.svg" alt="b"></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination"></div></div><div class="aksrt-slider-overlay"><div class="abs-center left-bottom single-cover-con"><h1 class="article-title title-h-left">标题测试</h1></div></div></div>
|
|
</div>
|
|
<script src="../assets/js/runtime/libs/jquery.min.js"></script>
|
|
<script src="../assets/js/runtime/libs/swiper.min.js"></script>
|
|
<script>
|
|
jQuery(function ($) {
|
|
$('.new-swiper').each(function (e) {
|
|
var _this = $(this);
|
|
_this.addClass('swiper-eq-' + e);
|
|
var loop = _this.attr('data-loop') ? true : false;
|
|
var autoplay = _this.attr('data-autoplay') ? { delay: 5000, disableOnInteraction: false } : false;
|
|
new Swiper('.new-swiper.swiper-eq-' + e, {
|
|
loop: loop,
|
|
autoHeight: false,
|
|
direction: 'horizontal',
|
|
spaceBetween: 0,
|
|
parallax: false,
|
|
effect: 'slide',
|
|
lazy: { loadPrevNext: true },
|
|
autoplay: autoplay,
|
|
speed: 400,
|
|
pagination: { el: '.new-swiper.swiper-eq-' + e + ' .swiper-pagination', type: 'bullets', clickable: true },
|
|
navigation: { nextEl: '.new-swiper.swiper-eq-' + e + ' .swiper-button-next', prevEl: '.new-swiper.swiper-eq-' + e + ' .swiper-button-prev' },
|
|
on: {
|
|
init: function () {
|
|
if (loop) { _this.find('.swiper-slide-duplicate img').addClass('no-imgbox'); }
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|