服务器怎么查看外网IP，外网IP与内外IP有各有什么用途？
新睿云是国内值得信赖的云计算提供商，旗下服务有云服务器、高防IP、云数据库……等等。本次讲解新睿云服务器外网IP没创建的补救方式！
swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
一、Swiper能用途及特色
1.Swiper用途
Swiper拥有灵活的progress，这是自定义制作3D切换效果的利器
Swiper制作3D切换效果的方法多种多样。cube、coverflow和flip可以轻松的实现3D过渡，如果你想制作其他新颖的切换方式，推荐使用progress。
progress可以帮助你获取到滑块的进度索引。
2.swiper特色
不依赖框架
Swiper无需加载任何公共库（如jquery）即可运行，这保证了Swiper的轻量和运行速度。Swiper也可以在加载了公共库的环境下安全的运行，如jQuery, Zepto, jQuery Mobile等。
1:1的触摸滑动
Swiper默认的触摸比例为1:1，你可以通过修改Swiper的设置来改变这个比例。
……
虚拟 Slides
Swiper 5新增了虚拟slides特性，当你有很多Slide或有很多内容的slide的时候可以在DOM中只保留需要的slide。
Swiper5还包含了所有swiper2的优秀特性，包括自适应、滚动反弹、抵抗反弹、loop模式、嵌套Swiper。
二、Swiper5使用方法
1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。
<!DOCTYPE html>
<html>
<head>
…
<link rel=”stylesheet” href=”dist/css/swiper.min.css”>
</head>
<body>
…
<script src=”dist/js/swiper.min.js”></script>
…
</body>
</html>
2.HTML内容。
<div>
<div>
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>
<!– 如果需要分页器 –>
<div></div>
<!– 如果需要导航按钮 –>
<div></div>
<div></div>
<!– 如果需要滚动条 –>
<div></div>
</div>
导航等组件可以放在container之外
3.你可能想要给Swiper定义一个大小，当然不要也行。
.swiper-container {
width: 600px;
height: 300px;
}
4.初始化Swiper：最好是挨着</body>标签
…
<script>
var mySwiper = new Swiper (‘.swiper-container’, {
direction: ‘vertical’, // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ‘.swiper-pagination’,
},
// 如果需要前进后退按钮
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’,
},
// 如果需要滚动条
scrollbar: {
el: ‘.swiper-scrollbar’,
},
})
</script>
</body>
如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。
<script>
window.onload = function() {
…
}
</script>
或者这样（Jquery和Zepto）(推荐)
<script>
$(document).ready(function () {
…
})
</script>
5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。
如果作为CommonJs 或ES 模块引入
//CommonJs
var Swiper = require(‘swiper’);
var mySwiper = new Swiper(‘.swiper-container’, { /* … */ });
//ES
import Swiper from ‘swiper’;
var mySwiper = new Swiper(‘.swiper-container’, { /* … */ });
三、Vue 各种坑总结（swiper、背景图片）
CDN 模式，在 index.html 直接使用。
<link rel=”stylesheet” href=”https://unpkg.com/swiper/css/swiper.min.css”>
<script src=”https://unpkg.com/swiper/js/swiper.min.js”> </script>
//引入
<div>
<div>
<img src=”/static/images/topic_1_b.png”/>
<img src=”/static/images/topic_1_b.png”/>
<img src=”/static/images/topic_1_b.png”/>
</div>
</div>
//初始化，必须在 挂载阶段。
mounted() {
new Swiper(‘.swiper-container’, {
slidesPerView: ‘auto’,
spaceBetween: 30,
pagination: {
el: ‘.swiper-pagination’,
clickable: true,
},
});
}
vue-awesome-swiper 的使用 (暂未有时间，有空编写)
背景图片为动态时
<template>
<div :style=” `background: url(${ bck_url }) center no-repeat;`”>
</div>
</template>
当背景图片为动态且 图片路径为 src 下, 引入时 , vue 会不解析 图片地址。而 还是 字符串
正常情况下，例如 header.png 图片 会解析为 header_3.4e7ddc9.png ,
解决方法：
– 图片放在静态资源下， `static` 下
转载请注明：小猪云服务器租用推荐 » swiper特色与功能，还有笔者经验之谈避免采坑！