jQuery Devrama Slider 幻燈片

Devrama Slider 是個圖像滑塊，帶有許多非常有趣的特性。

它不僅支持圖像還支持 HTML 內容。 響應式 方便 CSS3 轉換 轉換效果 進度條 高級的預載入和延遲載入 CSS 自定義 用戶可以定義導航或者控制器

線上實例

實例演示

使用方法

1. <div class="slide1" data-lazy-background="4247776023_81a3f048ca_b.png">
2. <h3 data-pos="['10%', '110%', '10%', '5%']" data-duration="700" data-effect="move">
3.   Responsive
4. </h3>
5. <div class="description" data-pos="['60%', '110%', '60%', '60%']" data-duration="300" data-effect="move">
6.   Automatically,
7. </div>
8. <div class="description" data-pos="['70%', '110%', '70%', '65%']" data-duration="300" data-effect="move">
9.   it resizes
10. </div>
11. <div class="description" data-pos="['80%', '110%', '80%', '70%']" data-duration="300" data-effect="move">
12.   with window size!!
13. </div>
14. </div>

1.   <script type="text/javascript">
2.     $(document).ready(function(){
3.       $('.front-demo').DrSlider({
4.         navigationType: 'circle',
5.         width: 1024,
6.         height: 400,
7.         transition: 'slide-left',
8.         duration: 5000
9.       });
10.     });
11.   </script>