Divas Slider是一個輕量級的jQuery插件,用于創建漂亮的圖像幻燈片。
使用Divas Slider非常容易,只需引入jQuery和插件文件,然后在你的HTML文檔中添加一個帶有圖像的容器并在JavaScript中調用Divas Slider即可。
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="divas-slider.js"></script> <div id="mySlider"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> <script> $(document).ready(function() { $('#mySlider').divasSlider(); }); </script>
除了基本配置,Divas Slider還提供了許多選項,以幫助你自定義你的幻燈片,例如:自動播放,動畫效果,導航按鈕和循環滾動等。
<script> $(document).ready(function() { $('#mySlider').divasSlider({ transition: 'fade', autoplay: true, speed: 3000, loop: true, nav: true }); }); </script>
在上面的代碼中,我們使用了淡入淡出的過渡效果,開啟了自動播放功能,并設置了播放間隔為3秒鐘。我們還啟用了循環滾動和導航按鈕。
總之,Divas Slider是一個非常靈活的插件,可以幫助您輕松創建滿意的幻燈片。