• swiper之PC端的广告页面【当前示例对应网站:http://shang.shuaishou.com/】

plugins:【红线部分】

html:

<div class="banner swiper-container">
<ul class="list-none swiper-wrapper">
<li class="swiper-slide"><a href="#"><img src="../img/index/banner1.png"></a></li>
<li class="swiper-slide"><a href="#"><img src="../img/index/banner1.png"></a></li>
<li class="swiper-slide"><a href="#"><img src="../img/index/banner1.png"></a></li>
</ul>
<!-- 如果需要分页器 -->
<div class="pagination"></div>
<!-- 如果需要导航按钮 -->
<a class="arrow arrow-left" href="javascript:void(0)"></a>
<a class="arrow arrow-right" href="javascript:void(0)"></a>
</div>

css:

@mixin transition($property:all,$time:.5s,$func:linear){
-webkit-transition: $property $time $func;
-moz-transition: $property $time $func;
-ms-transition: $property $time $func;
-o-transition: $property $time $func;
transition: $property $time $func;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
background: #fff;
margin: 0 5px;
cursor: pointer;
opacity: .8;
@include transition(height,.5s);
}
.swiper-active-switch {
height:20px;
opacity:;
}
.swiper-container .pagination {
position: absolute;
margin:;
z-index:;
right:5px;
bottom: 10px;
width: 100%;
text-align: right;
}
.swiper-container{
width:100%;
height:auto;
}
.swiper-container .arrow-left{
left:50px;
}
.swiper-container .arrow-right{
right: 50px;
background-position: -50px 0;
}
.swiper-container .arrow-left,.swiper-container .arrow-right{
display:none;
background-image: url(../img/indexSlideArrow.png);
background-repeat: no-repeat;
background-size: 260%;
position: absolute;
top: 50%;
margin-top: -25px;
width: 30px;
height: 50px;
z-index:;
}

javascript:

(function(w,$){
var indexObj = {
init:function(){
indexObj.swiperInit();
},
swiperInit:function(){
var _siwper = ".index .swiper-container";
var swiper = new Swiper(_siwper, {
autoplay:3000,
speed:400,
mode: 'horizontal',
loop: true,
calculateHeight: true,//自动高度
// 如果需要分页器
pagination: '.index .pagination',
paginationClickable:true
});
var $swiper = $(_siwper),
$arrow = $swiper.find('.arrow');
$swiper.on("mouseenter",function(){
swiper.stopAutoplay();
$arrow.addClass("active");
});
$swiper.on("mouseleave",function(){
swiper.startAutoplay();
$arrow.removeClass("active");
});
$swiper.find('.arrow-left').click(function(){
swiper.swipePrev();
});
$swiper.find('.arrow-right').click(function(){
swiper.swipeNext();
});
}
};
$(indexObj.init);
})(window,jQuery);

页面效果:

swiper之移动端tab切换

plugins:导入swiper4版本

html:

    <link href="https://cdn.bootcss.com/Swiper/4.2.2/css/swiper.min.css" rel="stylesheet">

<div class="swiper-container" id="selectBanner">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="banner-img">
<img src="../imgs/banner.jpg">
<span class="bi-time bg-red">2018-01-20下午2点</span>
<p class="bi-text">
<span class="ci-t">0基础打包爆款!200人已报名</span>
<a href="#" class="bg-red">立即报名</a>
</p>
</div>
</div>
<div class="swiper-slide">
<div class="banner-img">
<img src="../imgs/banner.jpg">
<span class="bi-time bg-red">2018-01-20下午2点</span>
<p class="bi-text">
<span class="ci-t">0基础打包爆款!200人已报名</span>
<a href="#" class="bg-red">立即报名</a>
</p>
</div>
</div>
</div>
<!--&lt;!&ndash; 如果需要分页器 &ndash;&gt;-->
<div class="swiper-pagination"></div>
</div>

scss:

.select-tab{
background-color: #fff;
height:1rem;
line-height: .96rem;
text-align: center;
@include ul-reset();
.border-bottom{
&:after{
@include position($bottom:0.08rem,$left:-70%);
content:"";
width:70%;
height:3px;
background-color: $theme;
//@include transition(left);
}
}
li,.swiper-pagination-bullet{
display:inline-block;
width:50%;
height:100%;
float:left;
@include radius(0);
margin:;
background: #fff;
opacity:;
&.active{
a{
@include color-link($theme,$theme);
&:after{
left:15%;
}
}
}
}
a{
display:inline-block;
position: relative;
overflow: hidden;
@include color-link();
@extend .border-bottom;
}
.swiper-pagination-bullet{
i{
position:relative;
display:inline-block;
overflow: hidden;
@extend .border-bottom;
}
}
}
.tab{
&.detail{
background-color: $bg;
&.swiper-container-horizontal{
height:auto;
padding-top: 1.533326rem;
}
.swiper-wrapper{
background-color: #fff;
}
.swiper-pagination-bullets{
top:.266666rem;
}
}
&.swiper-container-horizontal{
height:100%;
padding-top: 1.266667rem;
}
.swiper-pagination-bullets{
bottom:auto;
top:;
left:;
width:100%;
@extend .select-tab;
.swiper-pagination-bullet-active{
background-color: #fff;
color:$theme;
i:after{
left:15%;
}
}
}
.swiper-wrapper .swiper-slide{
overflow-x: hidden;
overflow-y: auto;
overflow-scrolling: touch;
}
}
@keyframes border-move {
0%{
left:-70%;
}
100%{
left:15%;
}
}
@-webkit-keyframes border-move{
0%{
left:-70%;
}
100%{
left:15%;
}
}
.swiper-container-horizontal{
.swiper-pagination-bullets{
bottom:.8rem;
}
}
.swiper-pagination-bullet-active{
background-color: $theme;
}

javascript:

<script src="https://cdn.bootcss.com/Swiper/4.2.2/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script> (function(){
    var mySwiper = new Swiper ('#selectCon', {
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
var text;
switch (index) {
case 0:
text = '详情课程';
break;
case 1:
text = '课程大纲';
break;
}
return '<span class="' + className + '" style="opacity:1;"><i>' + text + '</i></span>'
}
}
});
})();

效果:

swiper 应用的更多相关文章

  1. swiper插件 纵向内容超出一屏解决办法

    1.css .swiper-slide { overflow: auto; } 2.js var swiper = new Swiper('.swiper-container', { directio ...

  2. swiper的初步使用

    1.引入文件,顺序引入(此处基于jquery,且版本至少1.7以上) <link rel="stylesheet" href="path/to/swiper-3.4 ...

  3. 关于移动端swiper的2种样式重置

    手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~ 思路:主要考虑选择器优先级大于默认就可以随意撸码 注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也 ...

  4. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  5. swiper框架,实现轮播图等滑动效果

    http://www.swiper.com.cn/ 做个记录而已,这个没什么好说的,对于需要手机端开发实现触摸等方式可以看看.

  6. swiper.animate~之~可以执行两种动画的升级版的Swiper Animate

        1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...

  7. swiper横向轮播--3d

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. swiper横向轮播(兼容IE8)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. Swiper说明&&API手册 【中文手册Swiper】

     原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 示例: <link rel="stylesheet" href= ...

  10. Swiper 中文API手册(share)

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...

随机推荐

  1. python函数知识点(详解匿名函数)

    Python函数是组织好的.单一的.具有独立功能模块的代码块. 函数能提高应用的模块性,和代码的重复利用率.Python提供了许多内建函数,比如print().但你也可以自己创建函数,这被叫做用户自定 ...

  2. [git 实践篇]如何创建公钥

    如何创建公钥 首先启动一个Git Bash窗口(非Windows用户直接打开终端) 执行: cd ~/.ssh 如果返回"- No such file or directory", ...

  3. poj3358 Period of an Infinite Binary Expansion

    Period of an Infinite Binary Expansion 题目大意:给你一个分数,求这个分数二进制表示下从第几位开始循环,并求出最小循环节长度. 注释:int范围内. 想法:这题说 ...

  4. 设计模式之 原型模式详解(clone方法源码的简单剖析)

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 原型模式算是JAVA中最简单 ...

  5. centos安装包选择--liveCD、liveDVD、bin-DVD、netinstall和minimal

    在Centos官方选择下载centos的时候有好几个文件可供下载,包括liveCD.liveDVD和bin-DVD等等.这些文件都有什么区别,我们应该选择哪个文件下载呢? liveDVD版本:它就是一 ...

  6. 网络1712--c语言函数作业总结

    作业亮点 1.总体情况 很多同学在思路方面大部分写的都很详细,能够通过思路回顾自己的代码 大部分同学都认真完成PTA,也充分利用了函数来解题 大部分同学能够从上机考试中总结自己的失误和不足点,制订了自 ...

  7. 项目Beta冲刺Day1

    项目进展 李明皇 今天解决的进度 点击首页list相应条目将信息传到详情页 明天安排 优化信息详情页布局 林翔 今天解决的进度 前后端连接成功 明天安排 开始微信前端+数据库写入 孙敏铭 今天解决的进 ...

  8. Mysql数据库的触发程序

    /** **创建表 */ CREATE TABLE test1(a1 INT); CREATE TABLE test2(a2 INT); CREATE TABLE test3(a3 INT NOT N ...

  9. 自己动手写CPU(基于FPGA与Verilog)

    大三上学期开展了数字系统设计的课程,下学期便要求自己写一个单周期CPU和一个多周期CPU,既然要学,就记录一下学习的过程. CPU--中央处理器,顾名思义,是计算机中最重要的一部分,功能就是周而复始地 ...

  10. 05-移动端开发教程-CSS3兼容处理

    CSS3的标准并没有全部定稿,目前CSS3的标准分成了不同的模块,具体的标准由各个模块推动标准和定稿,标准制定的过程中,浏览器也在不断的发新的版本来兼容新的标准.浏览器有时会给一些在试验阶段或非标准阶 ...