swiper_copy.html 2.4 KB

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