jQuery Devrama Slider 幻灯片

时间:2024-01-15 19:59:02

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>
复制