swiper轮播问题之二:默认显示3张图片,中间显示全部两边显示部分

摘要:
下次我会和你分享一些关于TweenMax的事情。。。

其二:项目遇到比较有点要求的轮播图,默认显示3张图片,中间显示全部,两边显示部分。如图:

                                           swiper轮播问题之二:默认显示3张图片,中间显示全部两边显示部分第1张

网上找了也没有找到合适的,最后经过自己摸索写了出来,贴出代码分享给大家。

        CSS

.swiper-container {
    margin-top: 20px;
    width: 750px;
    height: 320px;
    margin-bottom: 53px;
    overflow: visible!important;
}
.swiper-container .swiper-wrapper .swiper-slide{ width: 620px; border-radius: 20px;}
.swiper-container .swiper-wrapper .swiper-slide img{width: 100%; height: 320px; border-radius: 20px;}
.swiper-container .swiper-wrapper .swiper-slide-prev{ margin-top: 18px; height: 284px!important;}
.swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 284px!important;}
.swiper-container .swiper-wrapper .swiper-slide-next{ margin-top: 18px; height: 284px!important;}
.swiper-container .swiper-wrapper .swiper-slide-next img{ height: 284px!important;}
.swiper-container .swiper-wrapper .swiper-slide-active{ width: 620px;}

.swiper-pagination{
    bottom: -30px!important;
}
.swiper-pagination .swiper-pagination-bullet{width: 12px; height: 12px; background: #ff1e1e;}
.swiper-pagination .swiper-pagination-bullet-active{width: 21px; height: 12px; background: #e75230; border-radius: 6px;}

         DOM

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="http://t.zoukankan.com/images/banner1.jpg" /></div>
                <div class="swiper-slide"><img src="http://t.zoukankan.com/images/banner2.jpg" /></div>
                <div class="swiper-slide"><img src="http://t.zoukankan.com/images/5.png" /></div>
                <div class="swiper-slide"><img src="http://t.zoukankan.com/images/banner2.jpg" /></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
 </div>

        js

var mySwiper = new Swiper ('.swiper-container', {
                direction: 'horizontal',
                loop: true,
                autoplay: 5000,
                slidesPerView: "auto",
                centeredSlides:true,
                spaceBetween: 20,
                // 如果需要分页器
                pagination: '.swiper-pagination',
 })


        以上就是我使用swiper的一点经验,其实对于swiper来说还是很浅显的,swiper加上TweenMax能做出很多很好很强大的动画和功能!下次有时间我会给大家分享点TweenMax的东西。。。

免责声明:文章转载自《swiper轮播问题之二:默认显示3张图片,中间显示全部两边显示部分》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇md笔记——编程术语修改Windows帐户密码,导致Sql Server 2000无法启动下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

轮播图3D效果--roundabout(兼容IE8)升级版

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0;...

html学习之路--简单图片轮播

一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg、2.jpg、3.jpg、4.jpg。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8">...

Bootstrap框架(2)

一 字体图标(Glyphicons)字体图标是在 Web 项目中使用的图标字体: <div class="container"> <span class="glyphicon glyphicon-envelope"></span> <a href="https://tool.4xseo.com/...

jQuery Pagination Ajax分页插件中文详解(摘)

jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=616 中文项目地址:http://www.zhangxinxu.com/jq/pagination_zh/ 原项目...

Bootstrap: 样式CSS:carousel轮换 图片的使用

Bootstrap 轮播(Carousel)插件   Bootstrap轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。 如果您想要单独引用该插件的功能,那么您需要引用 carousel.js。或者,您可以引用bootstrap.js 或压缩...

laraver ajax分页

1,设置分页容器参考laraver手册 我的设置代码如下://设置分页容器  /app/models/ZurbPresenter.php<?php     class ZurbPresenter extends IlluminatePaginationPresenter {    public function getPageLinkWrapper...