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

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

javascript jquery html css

Javascript 上一张和下一张幻灯片的Flexslider位置,javascript,jquery,html,css,flexslider,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

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


.container{溢出：隐藏；宽度：100%}
.flexslider{最大宽度：500px；宽度：500px；边距：0自动}
.content{背景：#f2f2f2；最大宽度：500px；显示：块；边距：0自动}
.flex视口{溢出：可见！重要}
无标题文件






jQuery（文档）.ready（函数（$）{
//您可以在这里使用本地范围的$作为jQuery的别名。
$（窗口）。加载（函数（）{
$（'.flexslider'）.flexslider（）；
});
});

我把图像缩小到70%，把它放在页面中间。我想让下一张和上一张幻灯片在主图片的两侧都可见，但不知道在哪里进行适当的更改（我假设在js文件中）。我认为这是一个保证金问题，但在样式中将其设置为0没有任何区别。有人这样做过吗？可以提供一些建议吗？

更新您的需要天哪！我现在明白你需要什么了！一直以来，我都以为你在谈论上一页/下一页箭头时，我看到你希望看到其他上一页/下一页幻灯片

举个例子：

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

请查看：

此外：

默认值是淡入淡出，因此使用默认值（淡入淡出），它无法执行

更新您需要的信息天哪！我现在明白你需要什么了！一直以来，我都以为你在谈论上一页/下一页箭头时，我看到你希望看到其他上一页/下一页幻灯片

举个例子：

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

请查看：

此外：

默认值是淡入淡出，因此使用默认值（淡入淡出），它无法执行

谢谢，我认为我解释得不太清楚，所以在原始描述中添加了一个图像，我需要能够看到实际的幻灯片，请参考导航元素。任何进一步的信息将不胜感激。是的，这有帮助，但看看这个。。。。。你能不能像我提到的那样，用正确的尺寸制作下一个/上一个css，以便定位到你想要的方向？你也可以用百分比来做这件事。很抱歉，当我提到上一张和下一张时，我指的是实际的幻灯片，所以如果幻灯片2显示，你会看到幻灯片1的一部分在左边，幻灯片3的一部分在右边。“下一个”和“上一个”按钮将被删除。我想用js中的transform3d完成了定位，但似乎无法将它们拉进去，非常感谢您的帮助。谢谢，小提琴示例正是我想要的……我很兴奋，但我错过了一些东西。我的测试没有显示其他幻灯片，我已经在上面的问题中添加了更新的代码。触摸距离的解决方案。这很可能是你的

flexslider.css

确保你更新和编辑了牙床，我不认为我解释得太好，所以在原始描述中添加了一个图像，我需要能够看到实际的幻灯片，我想你的建议是指导航元素。任何进一步的信息将不胜感激。是的，这有帮助，但看看这个。。。。。你能不能像我提到的那样，用正确的尺寸制作下一个/上一个css，以便定位到你想要的方向？你也可以用百分比来做这件事。很抱歉，当我提到上一张和下一张时，我指的是实际的幻灯片，所以如果幻灯片2显示，你会看到幻灯片1的一部分在左边，幻灯片3的一部分在右边。“下一个”和“上一个”按钮将被删除。我想用js中的transform3d完成了定位，但似乎无法将它们拉进去，非常感谢您的帮助。谢谢，小提琴示例正是我想要的……我很兴奋，但我错过了一些东西。我的测试没有显示其他幻灯片，我已经在上面的问题中添加了更新的代码。触摸距离的解决方案。这很可能是你的

flexslider.css

确保你也更新和编辑了它