在rails中-index页面添加轮播图 slider
TODO:
1.把这三个网页上的内容复制到本地项目目录下。
http://bxslider.com/lib/jquery.bxslider.css
http://bxslider.com/js/jquery.min.js
http://bxslider.com/lib/jquery.bxslider.js
2.在head中应用slider 的js, css文件
< script src="jquery.min.js"> < script src="jquery.bxslider.min.js"> < link href="jquery.bxslider.css" rel="stylesheet" />
3.在body中添加代码(添加图片)
< ul class="bxslider"> < li>< img src="/images/pic1.jpg" /> < li>< img src="/images/pic2.jpg" /> < li>< img src="/images/pic3.jpg" /> < li>< img src="/images/pic4.jpg" /> < /ul>
4.在最后添加上代码:
< script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, autoControls: true, adaptiveHeight: true, mode: 'fade' }); }); < /script>
5.最后在加一些样式 就可以了 在官网的options中