Flexslider上一张和下一张幻灯片的位置

时间:2014-06-02 13:47:11

标签: javascript jquery html css flexslider

我使用的是基本的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>

enter image description here

我已将图像缩小到70%并将其定位在页面中间。我希望在主图片的任一侧显示下一张和上一张幻灯片,但不知道在哪里进行适当的更改(我假设在js文件中)。我认为这是一个保证金问题,但在样式中将其设置为0没有任何区别。有没有人这样做并且可以提供一些建议?

1 个答案:

答案 0 :(得分:4)

根据您的需要更新

OMG!我现在明白你的需要!这段时间我一直以为你在谈论上一个/下一个箭头,我看到你想让其他人看到上一张/下一张幻灯片。

只是一个例子:

.container {overflow: hidden; width: 100%}
.flexslider {margin: 0 auto}
.flex-viewport {overflow: visible !important}

查看:

ALSO:

   $('.flexslider').flexslider({
        animation: "slide",
        slideshow: false //if you don't want it to slide auto
        });

默认是淡入淡出,所以默认(淡入淡出),它无法做到实现

FIDDLE