swiper.php 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!-- 轮播图 -->
  2. <div class="swiper">
  3. <div class="swiper-container">
  4. <div class="swiper-wrapper">
  5. <div class="swiper-slide">
  6. <a href="javascript:;">
  7. <img src="<?= Yii::$service->image->getImgUrl('images/1.jpg','appfront'); ?>">
  8. </a>
  9. </div>
  10. <div class="swiper-slide">
  11. <a href="javascript:;">
  12. <img src="<?= Yii::$service->image->getImgUrl('images/2.jpg','appfront'); ?>">
  13. </a>
  14. </div>
  15. <div class="swiper-slide">
  16. <a href="javascript:;">
  17. <img src="<?= Yii::$service->image->getImgUrl('images/3.jpg','appfront'); ?>">
  18. </a>
  19. </div>
  20. <div class="swiper-slide">
  21. <a href="javascript:;">
  22. <img src="<?= Yii::$service->image->getImgUrl('images/4.jpg','appfront'); ?>">
  23. </a>
  24. </div>
  25. </div>
  26. <!-- 如果需要分页器 -->
  27. <div class="swiper-pagination">
  28. </div>
  29. <!-- 如果需要导航按钮 -->
  30. <div class="swiper-button-prev"></div>
  31. <div class="swiper-button-next"></div>
  32. </div>
  33. </div>
  34. <!-- 轮播图 -->
  35. <script>
  36. <?php $this->beginBlock('owl_fecshop_slider') ?>
  37. var mySwiper = new Swiper('.swiper>.swiper-container', {
  38. autoplay: 2000,
  39. loop: true,
  40. direction: 'vertical',
  41. pagination: '.swiper-pagination',
  42. nextButton: '.swiper-button-next',
  43. paginationClickable: true,
  44. prevButton: '.swiper-button-prev',
  45. })
  46. var mySwiper = new Swiper('.swiper1', {
  47. autoplay: 3000,
  48. loop: true,
  49. direction: 'vertical'
  50. })
  51. <?php $this->endBlock(); ?>
  52. </script>
  53. <?php $this->registerJs($this->blocks['owl_fecshop_slider'],\yii\web\View::POS_END);//将编写的js代码注册到页面底部 ?>