nudoragon/vvveb-cms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
nudoragon
2026-05-17 21:09:32 +08:00
commit 1870400c47
1564 changed files with 544713 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
static/Vvvebjs/demo/landing/sections/hero/hero-slider.html Normal file
View File

@@ -0,0 +1,163 @@
<header class="hero-slider" aria-label="hero-slider">
<div class="swiper" data-slides-per-view="1" data-draggable="true">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="demo/img/hero-3.webp" loading="lazy">
<div class="content">
<div class="container">
<div>
<div class="row align-items-center justify-content-center text-start">
<div class="col-lg-6">
<h1 class="heading mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">The next generation website builder</h1>
<p class="col-lg-8 mb-5 text-white" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</p>
<div class="d-grid d-lg-block gap-2" data-aos="fade-up" data-aos-delay="300">
<a class="ms-0 btn btn-primary btn-lg" href="#" role="button">
<span>&#9889;</span>
<span>Free Download</span>
</a>
<a class="btn btn-light btn-lg" href="#" role="button">Live demo</a>
</div>
</div>
<div class="col-lg-6">
<img src="demo/img/team-1.jpg" class="shadow" loading="lazy">
</div>
</div>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
<div class="swiper-slide">
<img src="demo/img/hero-3.webp" loading="lazy">
<div class="content">
<div class="container">
<div>
<div class="row align-items-center justify-content-center text-center">
<div class="col-lg-12">
<h1 class="heading text-white mb-3 display-4 fw-bold" data-aos="fade-up" data-aos-delay="100">The fastest and leanest CMS</h1>
<p class="col-lg-8 mb-5 text-white" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</p>
<div class="d-grid d-lg-block gap-2" data-aos="fade-up" data-aos-delay="300">
<a class="ms-0 btn btn-primary btn-lg" href="#" role="button">
<span>&#9889;</span>
<span>Free Download</span>
</a>
<a class="btn btn-light btn-lg" href="#" role="button">Live demo</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
<div class="swiper-slide">
<img src="demo/img/hero-3.webp" loading="lazy">
<div class="content">
<div class="container">
<div>
<div class="row align-items-center justify-content-center text-start g-5">
<div class="col-lg-6">
<img src="demo/img/team-2.jpg" class="shadow" loading="lazy">
</div>
<div class="col-lg-6">
<h1 class="heading text-white mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">Open source CMS reinvented</h1>
<p class="col-lg-8 mb-5 text-white" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</p>
<div class="d-grid d-lg-block gap-2" data-aos="fade-up" data-aos-delay="300">
<a class="ms-0 btn btn-primary btn-lg" href="#" role="button">
<span>&#9889;</span>
<span>Free Download</span>
</a>
<a class="btn btn-light btn-lg" href="#" role="button">Live demo</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<div class="separator bottom">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" preserveAspectRatio="none">
<defs>
<style>
.cls-1 {
fill: var(--bs-body-bg);
}
</style>
</defs>
<title>rough-edges-bottom</title>
<path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)" />
</svg>
</div>
<div class="background-container">
<img src="demo/img/hero-3.webp" alt="Hero background" loading="lazy">
</div>
<script id="swiper-js" src="/js/libs/swiper/swiper-bundle.min.js"></script>
<link id="swiper-css" href="/js/libs/swiper/swiper-bundle.min.css" rel="stylesheet">
<script>
var swiper = [];
function initSwiper(onlyNew = false) {
var list = document.querySelectorAll('.swiper' + (onlyNew ? ":not(.swiper-initialized)" : "") );
list.forEach(el => {
//el.dataset
let params = {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
},
};
for (i in el.dataset) {
let param = el.dataset[i];
if (param[0] = '{') {
param = JSON.parse(param);
}
params[i] = param;
}
swiper.push(new Swiper(el, params))
//swiper.push(new Swiper(el, { ...{autoplay:{delay: 500}}, ...el.dataset}))
});
}
initSwiper();
</script>
</header>