我们的支持团队准备为您提供一个新的教程，展示如何使用 Swiper Slider in Website templates.

“Swiper.js” script 是用来实现 slider 我们的功能 Website templates. This slider 是否有扩展的data-API 对于交互，所以它的编辑是相对容易和没有 javascript 需要进行文件编辑. 为了编辑 slider，请执行以下操作:

1. Connect to your FTP or open hosting cPanel File manager 到达站点文件的工具.

2. Open your *.html file to locate slider 页面上的代码(在大多数情况下是索引).html file). 使用Ctrl+F通过“swiper”进行搜索 keyword 或者直接向下滚动页面查看 slider section:

   

3. 请随意指定 slider parameters in data-parameter 数据属性，其中 ‘parameter’ 你需要更改选项吗，e.g., data-height for slider height changing. 下面您可以找到可用于更改的属性列表(针对目标项目)，使用“swiper-”slider” class):

   • data-height – controls slider height, 可以把它的值在*px(定义静态高度, it will stay unchanged on screen resize); *% (defines slider height as a percent of its width); *vh (defines slider 高度占窗口高度的百分比).

   • data-min-height – defines slider 高度最小值类似于data-height属性.

   • data-autoplay – determines slider 自动启动，可以设置为真/假，以允许/防止自动滑动. 它还接受以毫秒为单位的时间值，以定义幻灯片切换的周期.g. data-autoplay = " 3000 ".

   • data-loop – defines if slider 将在最后一张幻灯片上停止，可以取真/假值，e.g. data-loop=”false”.

   • data-direction -定义滑动方向，可以取水平/垂直值，e.g. 数据方向= "水平".

   • data-slide-effect -决定滑动效果，可以取淡出/滑动/覆盖/立方体值.g. data-slide-effect = "张".

   For example:

   			
   
   				Slider content 
   			
   		

4. 要更改幻灯片内容，只需编辑路径到幻灯片图像 data-slide-bg attribute and update caption below. 请随意参考示例:

   			
    
   				
    
   					 
   					
   The first slide goes here
    
   				
    
   			
   		

   “图像/ page-01_slide01吗.是幻灯片图像, block中所有带有" swipe -slide-caption "类的内容都是幻灯片标题.

5. 保存更改并在编辑后将文件重新上传到服务器 FTP. 接下来，刷新站点页面以查看所应用的更改.

请随时查看下面的详细视频教程: