swiper幻灯片初级教程2018_柒侠伍义

柒侠伍义 · 发表于 2017-10-21 16:02:20

本帖最后由柒侠伍义于 2017-10-21 16:12 编辑

主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留请勿转载
第01章：下载最新SWIPER3.4.2版本

在很久很久以N年前..
想到做幻灯片就想到ppt

时代在变化
现在2017年想到做幻灯片
想到SWIPER...
哈哈和...

ppt不是不好
问题非常不方便放到网站去
因为如果你没有安装微软的power point
你是看不到幻灯片的
好显勒...
#￥%……&×（）...

如今有了SWIPER
咱们所制作的幻灯片
放到网络，电脑可以看到
手机也不是问题
哈哈和...好料...

好了广告打完了
回归正题
按下方链接连下载SWIPER官方源码

http://www.swiper.com.cn/download/index.html
[size=26.6667px]
里面有很多很多模板演示

虽然好多演示（39个）
对初级者来说
看了还是一头雾水
也不知道选择那一个好
刚开始时，我也不例外...
好吧！就一个一个看完...
哇塞～～～
好像很厉害的样子...
哈哈和...

001 未完

柒侠伍义 · 发表于 2017-10-21 16:07:53

本帖最后由柒侠伍义于 2017-10-21 16:15 编辑

主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留请勿转载
第02章：选择一个29的演示

在这么多演示中
我看上了第29的
29-custom-pagination.html

好的
我们就copy这个
放桌面的一个新的文件夹
取名 swiper
点击打开看一下

？？？？
好像有点不对劲？
不是幻灯片吗？
怎么好像不一样？
为什么会怎样？
？？？？

哈哈和...
有一点点html基础的人
都会想到...
是少了一些程序

用微软的FrontPage打开看一看源码

是少了2个程序
上面有一个...
<link rel="stylesheet" href="../dist/css/swiper.min.css">
下面有一个...
<script src="../dist/js/swiper.min.js"></script>

好的
我们去dist/js和dist/css把它copy过来就是
弄一个新的文件夹叫 css
把这2个程序丢进去

把路径换一下，变成这样...
<link rel="stylesheet" href="css/swiper.min.css">
<script src="css/swiper.min.js"></script>

哈哈和...
终于正常显示了

你做到了吗？
如果做不到...
唉！...
你还是放弃学习吧！
...
...
哈哈和...

*有些人会问
为什么不是弄2个文件夹
一个叫css
一个叫js
css的放在css
js的放在js
哈哈和...我的看法是...
简单的事情不要复杂化
哈哈和...

*没有微软FrontPage
可以去网络搜索下载微软FrontPage绿色版本
(不要问我为什么是绿色版本
我也不知道哈哈和...)

002（未完）

柒侠伍义 · 发表于 2017-10-21 16:17:16

主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留请勿转载
第03章：autoplay

发现一个问题...
这个幻灯片为什么不会自己动的？
幻灯片不是应该是一个一个慢慢播放的吗？
怎么办？
哈哈和...

查看一下SWIPER的API
得知有一个叫 autoplay的东东
加上它就可以了

好的
我们就加...
打开微软FrontPage看看源码
在源码下方找到<script>
加 autoplay:5000,
意思就是5秒就下一个幻灯片
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay:5000, //添加轮播 5000就是5秒
paginationBulletRender: function (swiper, index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
});
</script>

嗯！不错！不错！
可以一个一个幻灯片播放了
好像很简单就搞定
哈哈和...
...
...
...
下载源码：
swiper03.rar (25.48 KB, 下载次数: 0, 售价: 1 金钱)

柒侠伍义 · 发表于 2017-10-21 16:20:52

本帖最后由柒侠伍义于 2017-10-21 16:22 编辑

主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留请勿转载
第04章：添加图片

嗯！去谷歌或百度图片库
下载10张图片试一试...
最好找钱的图片...
看了就爽...哈哈和...

弄一个新的文件夹叫
img
把所有图片就放在这个文件夹里面
把所有图片换简单的名字
M01.jpg，M02.jpg，M03.jpg....
顺便把这个页面换一个新的名字
29-custom-pagination.html save as index.html

<div class="swiper-slide"><IMG SRC="img/M01.jpg">Slide 1</div>
<div class="swiper-slide"><IMG SRC="img/M02.jpg">Slide 2</div>
<div class="swiper-slide"><IMG SRC="img/M03.jpg">Slide 3</div>
<div class="swiper-slide"><IMG SRC="img/M04.jpg">Slide 4</div>
<div class="swiper-slide"><IMG SRC="img/M05.jpg">Slide 5</div>
<div class="swiper-slide"><IMG SRC="img/M06.jpg">Slide 6</div>
<div class="swiper-slide"><IMG SRC="img/M07.jpg">Slide 7</div>
<div class="swiper-slide"><IMG SRC="img/M08.jpg">Slide 8</div>
<div class="swiper-slide"><IMG SRC="img/M09.jpg">Slide 9</div>
<div class="swiper-slide"><IMG SRC="img/M10.jpg">Slide 10</div>

下载004源码
swiper04.rar (532.95 KB, 下载次数: 2, 售价: 1 金钱)

柒侠伍义 · 发表于 2017-10-21 16:24:45

主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留请勿转载
第05章：文字在图片上面

发现一个问题...
图片和文字平起平坐，排排坐...
好像不好看...
怎么办？

怎样把文字放在图片的上面呢？

好的，
有一个css 叫 position: absolute; 的东东
加到文字那边就可以了.


<div class="swiper-slide"><IMG SRC="img/M01.jpg">
<FONT COLOR="#00FFFF"STYLE="position: absolute; font-size:100pt">
钱 1</FONT>
</div>

<div class="swiper-slide"><IMG SRC="img/M02.jpg">
<FONT COLOR="#00FFFF"STYLE="position: absolute; font-size:100pt">
钱 2</FONT>
</div>

...
...
...
...
...

顺便把字体放大看清楚一点
font-size:100pt；
哈哈和...

再顺便把字体的颜色改一下
FONT COLOR="#00FFFF"
哈哈和...

嗯好像不错........

下载005源码

swiper05.rar (533.12 KB, 下载次数: 4, 售价: 2 金钱)

柒侠伍义 · 发表于 2017-10-21 16:49:51

本帖最后由柒侠伍义于 2017-10-21 17:02 编辑

主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留请勿转载
第06章：幻灯片背景颜色

制作幻灯片的背景颜色我最喜好深色
白色.......嗯不爽.........
比如换黑色....
让我们来改一下...

不改没有问题
改了就发现问题啦！.......
下方的弹丸 1 2 3 4 5 6 7 8 9 10
好像只看到当前的号码
嗯！不好
改一改别的颜色看看
顺便也放大一点点看看
比如：黄色红色....
可能会好看一点

.swiper-pagination-bullet {
width: 40px; /*弹丸宽度*/
height: 40px; /*弹丸高度*/
text-align: center; /*弹丸在中间*/
line-height: 40px; /*弹丸平均高度*/
font-size: 20px; /*弹丸大小*/
color: black; /*弹丸颜色*/
opacity: 1; /*弹丸透明度*/
background: yellow; /*弹丸背景颜色*/
}
.swiper-pagination-bullet-active {
color:#fff; /*弹丸颜色*/
background: red ; /*弹丸背景颜色*/

}

果然好看多了
不是吗？
哈哈和......

下载06源码（不带图片）

swiper06.rar (25.78 KB, 下载次数: 1, 售价: 2 金钱)

柒侠伍义 · 发表于 2017-10-21 17:18:53

本帖最后由柒侠伍义于 2017-10-21 17:34 编辑

主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留请勿转载
第07章：轮播有问题？

看着简单就做出来的幻灯片在轮播....
爽........
这么简单就可以做出来........

注意！注意！注意！
我发现到一个问题啦！
发现轮播有问题.......
轮到10时....
轮播不是10了然后1开始......
而是快速倒退 10 9 8 7 6 5 4 3 2 1 ....然后1开始
不要以为我没有发现......哈哈和
有没有看到......
有没有发现........
注意一下.......

查一下官方API

游客，如果您要查看本帖隐藏内容请回复

嗯.......
问题解决了
不错！不错！
哈哈和.....

007（未完）

柒侠伍义 · 发表于 2017-10-21 18:31:35

本帖最后由柒侠伍义于 2017-10-21 18:44 编辑

主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留请勿转载
第08章：怎样添加 < >

我看到第14个demo
14-nav-arrows.html
有左右按钮《》
要怎样添加呢？
可不可以添加？

查一下

14-nav-arrows.html
的源码
看到关键源码...


<divclass="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30

哦！原来叫《箭头》
照着源码的地方
在自己的源码加一加看看

哈哈和.....easy job
一下子就搞定

下载源码（不包过图片）
swiper08.rar (25.89 KB, 下载次数: 0, 售价: 2 金钱)

柒侠伍义 · 发表于 2017-10-22 15:09:53

本帖最后由柒侠伍义于 2017-10-22 15:11 编辑

主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留请勿转载
第09章：图片铺满窗口问题

图片有大有小
有长有短
各式各样的都有
没有统一...
轮播的时候不好看

能不能把图片
填充整个画面又不要失真

这个问题我研究了好久好久
结论是<img ......> 不能办到
唯一方法是....

游客，如果您要查看本帖隐藏内容请回复

搞定
漂亮啦！.......

是不是比刚才/以前版本的漂亮许多
好看许多....
哈哈和....

009（未完）

sucre · 发表于 2017-10-22 21:22:14