Add product carousel module with template and database structure
- Created `pp_carousel.tpl` for rendering product carousel with Swiper integration. - Added `plan.md` detailing module architecture, database schema, and implementation steps. - Initialized log files for development and production environments.
This commit is contained in:
23
modules/pp_carousel/views/js/pp_carousel.js
Normal file
23
modules/pp_carousel/views/js/pp_carousel.js
Normal file
@@ -0,0 +1,23 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
if (typeof Swiper === 'undefined') return;
|
||||
|
||||
document.querySelectorAll('.pp-carousel__slider.swiper').forEach(function (el) {
|
||||
var section = el.closest('.pp-carousel');
|
||||
if (!section) return;
|
||||
|
||||
new Swiper(el, {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 26,
|
||||
loop: false,
|
||||
navigation: {
|
||||
nextEl: section.querySelector('.pp-carousel__next'),
|
||||
prevEl: section.querySelector('.pp-carousel__prev')
|
||||
},
|
||||
breakpoints: {
|
||||
0: { slidesPerView: 1.15, spaceBetween: 16 },
|
||||
576: { slidesPerView: 2, spaceBetween: 18 },
|
||||
992: { slidesPerView: 3, spaceBetween: 26 }
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user