阳升PHP工作室

  1. 当前位置: 主页 > 技术文章 > Javascript技术 >

一个挺不错的BANNER效果swiper插件

时间:2018-04-16 11:13来源:未知 作者:边缘狂人 点击:


本文摘要

Swiper -是免费和最现代的移动触摸滑块与硬件加速过渡和惊人的本土行为。它的目的是用于移动网站、移动网络应用和移动原生/混合应用。它主要为iOS设计,但也适用于最新的Android、

swiper 下载

https://github.com/nolimits4web/swiper/releases

演示效果:

http://idangero.us/swiper/demos/



Swiper

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

Swiper, along with other great components, is a part of Framework7 - full featured framework for building iOS & Android apps. Swiper is also a default slider component in Ionic Framework

Swiper
Swiper -是免费和最现代的移动触摸滑块与硬件加速过渡和惊人的本土行为。它的目的是用于移动网站、移动网络应用和移动原生/混合应用。它主要为iOS设计,但也适用于最新的Android、Windows Phone 8和现代桌面浏览器。
Swiper与所有的平台都不兼容,它是一个现代的触摸滑块,只专注于现代的应用程序/平台,以带来最好的体验和简单。
Swiper和其他一些伟大的组件,是构建iOS和Android应用程序框架的一部分。Swiper也是Ionic框架中默认的滑块组件。


简单使用举例

 
<!---swiper--->
  <link rel="stylesheet" href="/templets/cx/kupejs/swiper/css/swiper.min.css">
<style>
.swiper-slide .p1{
background:url('/templets/cx/images/kaiye.jpg') 55% top no-repeat;
height:420px;
display:block;
}
 
.swiper-slide .p2{
 
background:url('/templets/cx/banner/2.jpg') center top no-repeat;
height:420px;
display:block;
}
 
.swiper-slide .p3{
background:url('/templets/cx/images/k2.jpg') center top no-repeat;
height:420px;
display:block;
}
 
.swiper-slide .p4{
background:url('/templets/cx/banner/3.jpg') center top no-repeat;
height:420px;
display:block;
}
</style>
<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><span class="p1"></span></div>
      <div class="swiper-slide"><span class="p2"></span></div>
      <div class="swiper-slide"><span class="p3"></span></div>
      <div class="swiper-slide"><span class="p4"></span></div>
      
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
<!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
  <!-- Swiper JS -->
  <script src="/templets/cx/kupejs/swiper/js/swiper.min.js"></script>
 
 <script>
    var swiper = new Swiper('.swiper-container', {
 
 loop:true,
      pagination: {
        el: '.swiper-pagination',
clickable: true,
      },
  navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
 autoplay: {
        delay: 4000,
        disableOnInteraction: false,
      },
    });
  </script>
  <!---swiper--->


 

 

更多相关内容

swiper(23)