html滑动库例子,出色的html滑动效果库 swiper -例子4 超长单栏横向滑动

可以用于div滑动，图片滑动等切换

例子代码以及所需资源：http://download.csdn.net/detail/feisy/6638105

官网例子：使用iframe来在同一个页面里面加入了很多各种不同的演示 http://www.idangero.us/sliders/swiper/demos.php

Demo

/* Demo Styles */

body {

margin: 0;

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

line-height: 1.5;

}

.swiper-container {

width: 640px;

height: 300px;

text-align: center;

}

.swiper-slide {

width: 1520px;

padding: 20px;

background: #fff;

}

.red-slide {

background: #ca4040;

}

.blue-slide {

background: #4390ee;

}

.orange-slide {

background: #ff8604;

}

.green-slide {

background: #49a430;

}

.pink-slide {

background: #973e76;

}

.swiper-scrollbar {

width: 100%;

height: 4px;

position: absolute;

left: 0;

bottom: 5px;

z-index: 1;

}

Your dreams come true:) That is a simple single scrollable area! No slides, no nothing, just pure area!

Here goes some text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum ipsum auctor nulla consectetur sed porta nunc placerat.

Nulla dui augue, sollicitudin egestas consequat a, consequat quis neque. Sed at mauris nunc. Donec rutrum leo id risus congue convallis. Maecenas ultrices condimentum velit, nec tincidunt lorem convallis consequat. Nulla elementum consequat quam eu euismod

Here goes wide image

You can make it any width/height, horizontal (like this one) or vertical, with any styling and with any HTML content!

var mySwiper = new Swiper('.swiper-container',{

scrollContainer: true,

scrollbar: {

container: '.swiper-scrollbar'

}

})