basketballcantho/sisvietnamvn_01
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: replace hero video fallback shortcode with dynamic Swiper slider and enable observer settings for swiper instances

Browse Source
This commit is contained in:
Victor Phan
2026-07-30 09:52:08 +07:00
parent f4d566a56d
commit c3b0248df8
8 changed files with 216 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sisvietnamvn_main/src/main/java/com/sisvietnamvn/web/plugins/swiperslider/SwiperSliderPlugin.java
+7
View File
@@ -367,6 +367,13 @@ document.addEventListener("DOMContentLoaded", function() {
new Swiper('.swiper-{{slug}}', {
slidesPerView: 'auto',
spaceBetween: 16,
observer: true,
observeParents: true,
autoplay: {
delay: 3500,
disableOnInteraction: false,
pauseOnMouseEnter: true,
},
navigation: {
nextEl: '.btn-navigation-{{slug}}-next',
prevEl: '.btn-navigation-{{slug}}-prev',
sisvietnamvn_main/src/main/resources/static/css/custom.css
+4
View File
@@ -1430,4 +1430,8 @@ figure.table table tr:hover {
background-color: #f1f1f1 !important;
color: #9b1b1b !important;
transform: scale(1.08);
}
.h-full {
height: 100%;
}
sisvietnamvn_main/src/main/resources/static/js/main.js
+2
View File
@@ -9,6 +9,8 @@ document.addEventListener('DOMContentLoaded', function () {
const courseSwiper = new Swiper('.courseSwiper', {
loop: true,
spaceBetween: 20, // Khoảng cách giữa các card
observer: true,
observeParents: true,
autoplay: {
delay: 3500, // Tự động trượt sau 3.5 giây
disableOnInteraction: false,
sisvietnamvn_main/src/main/resources/templates/themes/umass/content-top.html
+33 -7
View File
@@ -20,6 +20,14 @@
}
/* Desktop/Tablet: Video most, Slide second, Image last */
@media (min-width: 769px) {
.image-video-container {
display: grid;
grid-template-rows: 100%;
}
.image-video-container > * {
grid-column: 1;
grid-row: 1;
}
.image-video-container > img {
z-index: 1 !important;
width: 100%;
@@ -29,12 +37,9 @@
#hero-video-fallback {
z-index: 2 !important;
}
#hero-ambient-video {
/* #hero-ambient-video {
z-index: 3 !important;
}
.content-top .text-container.centered {
z-index: 4 !important;
}
} */
video#hero-video {
width: 100%;
height: 100%;
@@ -69,8 +74,29 @@
id="hero-video-fallback"
style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2"
>
<th:block th:utext="${hookManager.applyFilters('the_content', '[plugin:swiper-slider slug=''video-fallback'']')}">
</th:block>
<div class="swiper hero-fallback-swiper w-full h-full">
<div class="swiper-wrapper">
<!-- Dynamic Slides from Plugin Database -->
<th:block th:utext="${hookManager.applyFilters('swiper_slider_items', 'video-fallback-slider')}"></th:block>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
if (typeof Swiper !== 'undefined') {
new Swiper('.hero-fallback-swiper', {
effect: 'fade', // Optional: smooth fade transition for hero
loop: true,
observer: true,
observeParents: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
});
}
});
</script>
</div>
<script>
sisvietnamvn_main/src/main/resources/templates/themes/umass/snippets/content-top.html
+23 -2
View File
@@ -73,8 +73,29 @@
id="hero-video-fallback"
style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2"
>
<th:block th:utext="${hookManager.applyFilters('the_content', '[plugin:swiper-slider slug=''video-fallback'']')}">
</th:block>
<div class="swiper hero-fallback-swiper w-full h-full">
<div class="swiper-wrapper">
<!-- Dynamic Slides from Plugin Database -->
<th:block th:utext="${hookManager.applyFilters('swiper_slider_items', 'video-fallback-slider')}"></th:block>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
if (typeof Swiper !== 'undefined') {
new Swiper('.hero-fallback-swiper', {
effect: 'fade', // Optional: smooth fade transition for hero
loop: true,
observer: true,
observeParents: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
});
}
});
</script>
</div>
<script>