web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
幻灯片和轮播图
jQuery移动端多款Swiper幻灯片插件
分类：
幻灯片和轮播图
日期：
2024-05-14
点击(4)
评论(0)
演 示
免费下载
简介
特效描述：jQuery移动端 Swiper幻灯片插件。jQuery移动端多款Swiper幻灯片插件 #### 代码结构 ------------ 1. 引入CSS ```html <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/zzsc-demo.css"> <link rel="stylesheet" href="dist/css/swiper.min.css"> ``` 2. 引入JS ```html <script src="dist/js/swiper.min.js"></script> ``` 3. HTML代码 ```html <div class="zzsc-container"> <div class="container"> <div class="row"> <div class="col-md-12"> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="img/monster1.jpg" alt=""></div> <div class="swiper-slide"><img src="img/monster2.jpg" alt=""></div> <div class="swiper-slide"><img src="img/monster3.jpg" alt=""></div> <div class="swiper-slide"><img src="img/monster4.jpg" alt=""></div> <div class="swiper-slide"><img src="img/monster5.jpg" alt=""></div> <div class="swiper-slide"><img src="img/monster6.jpg" alt=""></div> <div class="swiper-slide"><img src="img/monster7.jpg" alt=""></div> <div class="swiper-slide"><img src="img/monster8.jpg" alt=""></div> <div class="swiper-slide"><img src="img/monster9.jpg" alt=""></div> <div class="swiper-slide"><img src="img/monster10.jpg" alt=""></div> </div> </div> </div> <div class="row"> <div class="col-md-3"><div class="links current"><a href="index.html">01-default</a></div></div> <div class="col-md-3"><div class="links"><a href="02-responsive.html">02-responsive</a></div></div> <div class="col-md-3"><div class="links"><a href="03-vertical.html">03-vertical</a></div></div> <div class="col-md-3"><div class="links"><a href="04-space-between.html">04-space-between</a></div></div> <div class="col-md-3"><div class="links"><a href="05-slides-per-view.html">05-slides-per-view</a></div></div> <div class="col-md-3"><div class="links"><a href="06-slides-per-view-auto.html">06-slides-per-view-auto</a></div></div> <div class="col-md-3"><div class="links"><a href="07-centered.html">07-centered</a></div></div> <div class="col-md-3"><div class="links"><a href="08-centered-auto.html">08-centered-auto</a></div></div> <div class="col-md-3"><div class="links"><a href="09-freemode.html">09-freemode</a></div></div> <div class="col-md-3"><div class="links"><a href="10-slides-per-column.html">10-slides-per-column</a></div></div> <div class="col-md-3"><div class="links"><a href="11-nested.html">11-nested</a></div></div> <div class="col-md-3"><div class="links"><a href="12-grab-cursor.html">12-grab-cursor</a></div></div> <div class="col-md-3"><div class="links"><a href="13-scrollbar.html">13-scrollbar</a></div></div> <div class="col-md-3"><div class="links"><a href="14-nav-arrows.html">14-nav-arrows</a></div></div> <div class="col-md-3"><div class="links"><a href="15-infinite-loop.html">15-infinite-loop</a></div></div> <div class="col-md-3"><div class="links"><a href="16-effect-fade.html">16-effect-fade</a></div></div> <div class="col-md-3"><div class="links"><a href="17-effect-cube.html">17-effect-cube</a></div></div> <div class="col-md-3"><div class="links"><a href="18-effect-coverflow.html">18-effect-coverflow</a></div></div> <div class="col-md-3"><div class="links"><a href="19-keyboard-control.html">19-keyboard-control</a></div></div> <div class="col-md-3"><div class="links"><a href="20-mousewheel-control.html">20-mousewheel-control</a></div></div> <div class="col-md-3"><div class="links"><a href="21-autoplay.html">21-autoplay</a></div></div> <div class="col-md-3"><div class="links"><a href="22-dynamic-slides.html">22-dynamic-slides</a></div></div> <div class="col-md-3"><div class="links"><a href="23-thumbs-gallery.html">23-thumbs-gallery</a></div></div> <div class="col-md-3"><div class="links"><a href="24-thumbs-gallery-loop.html">24-thumbs-gallery-loop</a></div></div> <div class="col-md-3"><div class="links"><a href="25-multiple-swipers.html">25-multiple-swipers</a></div></div> <div class="col-md-3"><div class="links"><a href="26-hash-navigation.html">26-hash-navigation</a></div></div> <div class="col-md-3"><div class="links"><a href="27-rtl.html">27-rtl</a></div></div> <div class="col-md-3"><div class="links"><a href="28-jquery.html">28-jquery</a></div></div> <div class="col-md-3"><div class="links"><a href="29-parallax.html">29-parallax</a></div></div> <div class="col-md-3"><div class="links"><a href="30-custom-pagination.html">30-custom-pagination</a></div></div> <div class="col-md-3"><div class="links"><a href="31-lazy-load-images.html">31-lazy-load-images</a></div></div> <div class="col-md-3"><div class="links"><a href="32-custom-plugin.html">32-custom-plugin</a></div></div> <div class="col-md-3"><div class="links"><a href="33-scroll-container.html">33-scroll-container</a></div></div> <div class="col-md-3"><div class="links"><a href="34-responsive-breakpoints.html">34-responsive-breakpoints</a></div></div> <div class="col-md-3"><div class="links"><a href="35-autoheight.html">35-autoheight</a></div></div> <div class="col-md-3"><div class="links"><a href="36-effect-flip.html">36-effect-flip</a></div></div> <div class="col-md-3"><div class="links"><a href="37-pagination-fraction.html">37-pagination-fraction</a></div></div> <div class="col-md-3"><div class="links"><a href="38-pagination-progress.html">38-pagination-progress</a></div></div> </div> </div> </div> </div> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container'); </script> ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
