gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 10:15:32 25 4
gpt4 key购买 nike

我正在使用基本的 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 文件中)。我认为这是一个 margin 问题,但在样式中将其设置为 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
});

默认是淡入淡出,所以使用默认(淡入淡出),它不能做实现

FIDDLE

关于javascript - 上一张和下一张幻灯片的 Flexslider 位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23996110/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com