首页HTML swiper 示例

HTML swiper 示例

时间: 2024-12-26 13:12:13 浏览: 6

HTML Swiper是一个流行的JavaScript库，用于创建美观的轮播图、滑动导航和响应式触摸滑块。它提供了一套丰富的API和自定义选项，让开发者可以轻松地在网页上添加交互式的图片轮播效果。以下是一个简单的Swiper示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Swiper Example</title>  <link rel="stylesheet" href="https://unpkg.com/swiper@8/dist/css/swiper.min.css"> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div>  <div class="swiper-pagination"></div> </div>  <script src="https://unpkg.com/swiper@8/dist/js/swiper-bundle.min.js"></script> <script> var swiper = new Swiper('.swiper-container', { // Configuration options go here loop: true, // Enable looping pagination: { el: '.swiper-pagination', // Selector for the pager container element }, }); </script> </body> </html> ``` 在这个例子中，`.swiper-container`包含了所有的幻灯片，`.swiper-slide`是单张幻灯片，`.swiper-pagination`用于显示页码指示器。通过配置对象，我们可以设置如自动播放、导航按钮等属性。

阅读全文