特效介绍
Cute Slider是一款及其优秀的，支持几十种效果的3D和2D图片轮播js插件，支持进度条、支持换主题，支持字幕和视频（Youtube和Vimeo），使用纯html5+js编写，不依赖任何插件。
Cute Slider本身收费，这里是我爱模板网花10个大洋买的，现免费提供给大家使用！
主要特点：
响应式
支持3D和2D效果
提供了五套现成的主题模板，在templates文件夹下
100多个过渡
跨浏览器和设备友好
支持缩略图
完全可定制
webkit浏览器中硬件加速的CSS3 3D转换
在非webkit浏览器中支持三维转换的画布
独立于Javascript框架
搜索引擎优化
智能资源加载器
为每个不同样式的幻灯片使用多行标题的选项（支持HTML、CSS）
为每张幻灯片设置链接的选项
导航缩略图
Youtube和Vimeo视频支持
使用方法
1、将文件放到项目目录：将“source/compressed”里面的所有压缩过的js文件放到您项目的js/cute目录下
将“source/assets”里的“cute-theme”目录拷贝放到您的项目目录下。
将“source/assets”里的“slider-style.css”拷贝放到您的项目目录下。
然后将以下html添加到页面的<head>中:
<script src="https://5.jimth.com/uploads/allimg/210312/1622555K2-0.jpg" type="text/javascript" charset="utf-8"></script> <script src="js/cute/cute.slider.js" type="text/javascript" charset="utf-8"></script> <script src="js/cute/cute.transitions.all.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="style/slider-style.css" type="text/css" media="screen" charset="utf-8"/> <script src="http//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js" type="text/javascript" charset="utf-8"></script>2、加样式
将以下html添加到页面的<head>中:
<style>
#my-cute-slider{
position:relative;
}
#slider-wrapper{
position:relative;
min-width:300px;
max-width:800px;
margin: 0 auto;
}
</style>
3、html将以下html添加到页面的<body>中：
在该代码中，幻灯片图像位于“images”中，缩略图位于“images/thumbs”。
<div id="slider-wrapper">
<div id="my-cute-slider" data-width="800" data-height="350" data-vpwidth="900" data-vpheight="400">
<ul data-type="slides">
<li data-delay="4" data-trans3d="tr28" data-trans2d="tr1">
<img src="images/1.jpg" data-thumb="images/thumbs/1.jpg "/>
</li>
<li data-delay="4" data-trans3d="tr25" data-trans2d="tr1 ">
<img src="theme/blank.jpg" data-src="images/2.jpg" data-thumb="images/thumbs/2.jpg"/>
</li>
<li data-delay="4" data-trans3d="tr29" data-trans2d="tr1">
<img src="theme/blank.jpg" data-src="images/3.jpg" data-thumb="images/thumbs/3.jpg"/>
</li>
</ul>
<ul data-type="controls">
<li data-type="circletimer"> </li>
<li data-type="next"> </li>
<li data-type="previous"> </li>
<li data-type="slidecontrol"> </li>
<li data-type="bartimer"> </li>
</ul>
<div class="br-shadow"> </div>
</div>
</div>
4、调用代码：在页面的<body>末尾添加以下js：
<script>
var myslider = new Cute.Slider();
myslider.setup("my-cute-slider" , "slider-wrapper");
</script>
以上是最基本的使用方法，更具体的教程请看文档：Cute Slider help