swiper.html 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <!-- Favicon and Touch Icons -->
  7. <link rel="stylesheet" href="{dreamer-cms:template /}assets/css/swiper-bundle.min.css">
  8. <style>
  9. @media (min-width:768px) {
  10. .swiper {
  11. --swiper-navigation-size: 50px;
  12. --swiper-navigation-sides-offset: 20px;
  13. }
  14. }
  15. @media (max-width:769px) {
  16. .swiper {
  17. --swiper-navigation-size: 25px;
  18. --swiper-navigation-sides-offset: 20px;
  19. }
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <section class="pt-1 pt-md-3 pt-xl-1">
  25. <div class="" style="overflow: hidden;">
  26. <div class="row gx-0">
  27. <div class="swiper bsb-hero-pro-5-swiper" style=" --swiper-theme-color: #a9afb487;padding: 0;">
  28. <div class="swiper-wrapper">
  29. <!-- Slides -->
  30. {dreamer-cms:list typeid="9jdjs0s8" pagenum="0" flag="p" sortBy="weight" sortWay="desc" formkey="h4j2gb6u" addfields="href,imgs"}
  31. <div class="swiper-slide">
  32. <!-- {dreamer-cms:global name='website' /}article/[field:href /] {dreamer-cms:template /}assets/img/none.png-->
  33. <a href="[field:arcurl /]">
  34. <img data-src="[field:litpic /]" alt="[field:title /]" style="width: 100%;height: auto;" src="/resources/uploads/[field:imgs /]">
  35. </a>
  36. </div>
  37. {/dreamer-cms:list}
  38. </div>
  39. <div class="swiper-pagination"></div>
  40. <!-- <div>
  41. <div class="swiper-button-prev"></div>
  42. <div class="swiper-button-next"></div>
  43. </div> -->
  44. </div>
  45. </div>
  46. </div>
  47. </section>
  48. <script src="{dreamer-cms:template /}assets/js/swiper-bundle.min.js"></script>
  49. <script>
  50. var mySwiper = new Swiper('.swiper', {
  51. // direction: 'vertical', // 垂直切换选项
  52. autoplay: {
  53. delay: 3500
  54. },
  55. loop: true, // 循环模式选项
  56. // 如果需要分页器
  57. pagination: {
  58. el: '.swiper-pagination',
  59. clickable: true
  60. },
  61. // 如果需要前进后退按钮
  62. //navigation: {
  63. //nextEl: '.swiper-button-next',
  64. //prevEl: '.swiper-button-prev',
  65. //},
  66. // 如果需要滚动条
  67. scrollbar: {
  68. el: '.swiper-scrollbar',
  69. },
  70. })
  71. </script>
  72. </body>
  73. </html>