swipe的基础使用（二十五）

本次文章介绍swiper当中的RTL布局。

RTL布局呢，就是right to left，就是从左到右的布局。

代码方面没有什么复杂的地方，还是按照原来的顺序，首先编写基础的swiper页面框架。

<div class="swiper-container" dir="rtl">
<div class="swiper-wrapper">
<div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
<div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
<div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
<div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
<div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
<div class="swiper-slide">H5EDU 6<img src="logo.png"></div>
<div class="swiper-slide">H5EDU 7<img src="logo.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>

当中加入了控制按钮和分页导航组件。
我们在外部容器的标签当中添加了一个自定义属性 dir=“rtl”，这里就是用来开启rtl布局的代码。

然后到js当中进行初始化。当然，不要忘记引用swiper样式文件，和给页面设置CSS样式。

var swiper = new Swiper('.swiper-container',{
pagination:'.swiper-pagination',
nextButton:'.swiper-button-next',
prevButton:'.swiper-button-prev',
paginationClickable:true
});这样我们再运行页面的时候，第一页就在最右边的一页，也就是原来的最后一页，但是页面内容不会翻转