我正在使用基本的flexslider,我想显示上一个和下一个,所以如果显示幻灯片2,则您将在左侧看到幻灯片1的一部分,在右边看到幻灯片3的一部分。
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
.container {overflow: hidden; width: 100%}
.flexslider {max-width: 500px; width: 500px; margin: 0 auto}
.content {background: #f2f2f2; max-width: 500px; display: block; margin: 0 auto}
.flex-viewport {overflow: visible !important}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="flexslider">
<ul class="slides">
<li><img src="785.jpg" /></li>
<li><img src="785.jpg" /></li>
<li><img src="785.jpg" /></li>
<li><img src="785.jpg" /></li>
</ul>
</div>
</div>
<script src="jquery.flexslider.js"></script>
<script>
jQuery(document).ready(function($) {
// You can use the locally-scoped $ in here as an alias to jQuery.
$(window).load(function() {
$('.flexslider').flexslider();
});
});
</script>
</body>
</html>
我将图像缩小到70%,并将其放置在页面中间。我想在主图片的两边都可以看到下一张和上一张幻灯片,但是不知道在哪里进行适当的更改(我假设在js文件中)。我以为这是一个边距问题,但是将样式设置为0并没有区别。有没有人这样做并可以提供一些建议?
我的天啊!我现在了解您的需求!一直以来,我一直以为您在谈论上一个/下一个箭头时,我看到您希望查看其他上/下一个幻灯片。
只是一个例子:
.container {overflow: hidden; width: 100%}
.flexslider {margin: 0 auto}
.flex-viewport {overflow: visible !important}
查看以下内容:
也:
$('.flexslider').flexslider({
animation: "slide",
slideshow: false //if you don't want it to slide auto
});
默认是淡入淡出,因此使用default(fade)不能实现
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句