Question

我正在尝试在我建立的网站上创建一个图片滑块。

在线搜索示例时，我发现了非常复杂的示例，其中包含大量JavaScript代码或使用Dreamweaver类型软件的建议。

是不是有一种简单的HTML5集成/内置方式来创建图片滑块？

Answer 1

尝试光滑的插件，它对于旋转木马非常有用。

此处的文档： http://kenwheeler.github.io/slick/

将其添加到<head>标记中以初始化插件默认样式：

link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css"/>

// Add the slick-theme.css if you want default styling
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick-theme.css"/>

然后在</body>标记之前执行：

script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>

示例：

HTML

<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
  <div><h3>5</h3></div>
  <div><h3>6</h3></div>
</div>

JS

// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
  console.log(direction);
  // left
});

// On edge hit
$('.your-element').on('edge', function(event, slick, direction){
  console.log('edge was hit')
});

// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

此示例取自：https://github.com/kenwheeler/slick

为网站创建图片滑块

1 个答案: