andrewdanilov / yii2-swiper-slider
Swiper Slider Asset
Installs: 131
Dependents: 1
Suggesters: 0
Security: 0
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Type:yii2-extension
Requires
- php: >=5.6.0
- yiisoft/yii2: ~2.0.0
This package is auto-updated.
Last update: 2025-03-15 03:34:07 UTC
README
Asset for adding swiper slider functionality to your pages
Installation
The preferred way to install this extension is through composer.
Either run
composer require andrewdanilov/yii2-swiper-slider "~1.0.0"
or add
"andrewdanilov/yii2-swiper-slider": "~1.0.0"
to the require
section of your composer.json
file.
Usage
Register asset bundle in View
<?php /* @var $this \yii\web\View */ \andrewdanilov\swiperslider\SwiperSliderAsset::register($this);
Example HTML
<!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div>
Example JS
<script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { const swiper = new Swiper('.swiper-container', { speed: 400, slidesPerView: 4, // or 'auto' spaceBetween: 30, grabCursor: true, updateOnImagesReady: true, autoplay: false, centeredSlides: false, loop: false, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, breakpoints: { 1200: { slidesPerView: 4, spaceBetween: 30 }, 992: { slidesPerView: 3, spaceBetween: 20 }, 768: { slidesPerView: 2, spaceBetween: 10 }, 480: { slidesPerView: 1, spaceBetween: 5 } } }); }); </script>
For using slider refer to docs: https://swiperjs.com/swiper-api