文章/答案/技术大牛

发布

社区首页 >问答首页 >为网站创建图片滑块

问为网站创建图片滑块
EN

Stack Overflow用户

提问于 2015-03-28 17:15:48

回答 1查看 104关注 0票数 0

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

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

难道没有一个简单的，HTML5集成/内置的方式来创建一个图片滑块吗？

html

web

slider

javascript

回答 1

Stack Overflow用户

发布于 2015-03-28 17:21:06

试试看花哨的插件，它对传送带非常有用。

这里的文档：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>

// 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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29320125

复制

相似问题

问为网站创建图片滑块
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为网站创建图片滑块EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为网站创建图片滑块
EN