<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="swiper.min.css">
<script src="swiper.min.js"></script>
<style type="text/css">
.swiper-container {
? ? width: 600px;
? ? height: 300px;
}?
</style>
</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 class="swiper-button-prev"></div>-->
? ? <!--<div class="swiper-button-next"></div>-->
? ? <!-- 如果需要滾動條 <--></-->
? ? <!--<div class="swiper-scrollbar"></div>-->
</div>
</body>
<script>
var mySwiper = new Swiper(".swiper-container",{
loop:true,
centeredSlides:true,
pagination:{
el:'.swiper-pagination',
type:'fraction',
},
initalSlide:0,
autoplay:{
delay:1500,
disableOnInteraction:false,
},
navigation:{
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev',
},
scrollbar:{
el:'.swiper-scrollbar',
},
})
// var index = 1
// ? var mySwiper = new Swiper ('.swiper-container', {
//// ? ? direction: 'vertical', // 垂直切換選項
// ? ? loop: true, // 循環模式選項
// ? ? spaceBetween: 30,
//? ? centeredSlides: true,
// ? ? // 如果需要分頁器
// ? ? pagination: {
// ? ? ? el: '.swiper-pagination',
// ? ? ? type: 'fraction',
// ? ? },
//// ? ? initialSlide:0,
// ? ? autoplay: {
//? ? ? delay: 1500,
//? ? ? disableOnInteraction: false,
//? ? },
//? ?
// ? ? // 如果需要前進后退按鈕
//// ? ? navigation: {
//// ? ? ? nextEl: '.swiper-button-next',
//// ? ? ? prevEl: '.swiper-button-prev',
//// ? ? },
// ? ? // 如果需要滾動條
//// ? ? scrollbar: {
//// ? ? ? el: '.swiper-scrollbar',
//// ? ? },
//
// ? })
// ? var swiper = new Swiper('.swiper-container',{
// ? derection:'vertical',
// ? loop:true,
// ? spaceBetween:30,
// ? centeredSlides:true,
// ? pagination:{
// ? el:'.swiper-pagination',
// ? type:'fraction'
// ? },
// ? autoplay:{
// ? delay:1500,
// ? desbleOnInteraction:false,
// ? },
// ? navigation:{
// ? textEl:'.swiper-button-text',
// ? prevEl:'.swiper-button-prev',
// ? },
// ? scrollbar:{
// ? el:'.swiper-scrollbar'
// ? }
// ? })
// ? var swiper = new Swiper('.swiper-container', {
//? direction: 'horizontal',? //默認是橫向，可以設置豎向vertical? ? Slides的滑動方向，可設置水平(horizontal)或垂直(vertical)。
//? history: 'love',? ? ? ? ? //開始瀏覽器前進后退 沒什么用
//? data:1,
//? pagination: { el: '.swiper-pagination', type: 'fraction' }, initialSlide:0 //分頁器
//? paginationClickable :true,? ? // 分液器換圖
//? loop:true,? ? ? ? ? ? ? ? ? ? ? ? //無限循環
//? nextButton: '.swiper-button-next',//前進后退按鈕
//? prevButton: '.swiper-button-prev',
//? autoplay: 1000,? ? ? ? ? ? ? ? // 自動輪播
//? initialSlide :1,? ? ? ? ? ? ? // 初始化跳到第幾個輪播圖
//? speed:800,? ? ? ? ? ? ? ? ? ? ? // 運動緩慢
//? autoplayDisableOnInteraction : true,? //停止自動輪播
//? grabCursor : true,? ? ? ? ? ? ? //抓手形狀
//? parallax : true,? ? //如需要開啟視差效果（相對父元素移動），設置為true并在所需要的元素上增加data-? ? ? ? swiper-parallax屬性。
//? hashnav:true,? ? ? ? //? 今天研究到這? 這個沒實現
//? hashnavWatchState:true,? //和上面的關聯? 沒明白
//? replaceState:true,? ? ? ? //代替上面兩個
//? setWrapperSize :true,? ? //支持css3display：fixebox布局
//? virtualTranslate : true,? //讓輪播停止運行 其他正常
//? nextButton: '.swiper-button-next',
//? width : 800, //你的slide寬度? 這個參數會使自適應失效。高度也是
//? //? 全屏? width : window.innerWidth,
//? roundLengths : true, // 當你設定slide寬為76%時，則計算出來結果為1094.4，開啟后寬度取整數1094
//? autoHeight: true, //高度隨內容變化
//? nested:true,? ? ? ? // 父元素和子元素嵌套? 相當于兩個swiper
//? freeMode : true,? ? //這個參數為true后，滑到哪里就是哪里
//? freeModeMomentumBounceRatio : 5,? //反彈 值越大? 依賴上面那個
//? slidesOffsetBefore : 100,? ? ? //設置與左邊框間隔距離
//
//? effect : 'cube', //? 可設置為"fade"（淡入）"cube"（方塊）"coverflow"（3d流）"flip"（3d翻轉）
//? cube: {? ? ? ? ? ? ? ? ? ? // 這個是方塊效果? 網頁上有個廣告效果
//? ? ? slideShadows: true,
//? ? ? shadow: true,
//? ? ? shadowOffset: 150,
//? ? ? shadowScale: 0.8
//? },
//? preventLinksPropagation : false,? //阻止click冒泡。拖動Swiper時阻止click事件。
//? coverflow: {
//? ? rotate: 30,
//? ? stretch: 10,
//? ? depth: 60,
//? ? modifier: 2,
//? ? slideShadows : true
//? }
//? slidesPerView: 3, // 下面這兩個只有在3d留用到
//? centeredSlides: true,
//? lazyLoading : true,? //設為true開啟圖片延遲加載，使preloadImages無效。? 比較麻煩
//? zoom : true,? //焦距功能：雙擊slide會放大，并且在手機端可雙指觸摸縮放。
//? zoomMax :5,
//? zoomMin :2,
//
//
//var Swiper1 = new Swiper('#swiper-container1',{? 設置這個后兩個swiper可實現方向倒轉? 實用 })
//var Swiper2 = new Swiper('#swiper-container2',{})
// Swiper1.params.control = Swiper2;
// Swiper1.params.controlInverse=true
</script>
</html>
