个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在使用带有缩略图 slider 的 FlexSlider 2。但是，问题是主图像没有响应。如果我按下下一个/上一个按钮，它不会滑动/淡入下一个/上一个图像。即使我点击其中一个缩略图，它也不会改变。但是缩略图 slider 的上一个/下一个按钮工作正常。我只是找不到问题所在。我没有接触 flexslider.js，而是接触了 flexslider.css。我改变了一些东西来摆脱 bordershadow 等等。但我也使用了未修改的 flexslider.css，但它也没有用。这是代码:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/flexslider.css" type="text/css">
<link rel="stylesheet" href="css/default.css" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
directionNav: false,
slideshow: false,
touch: true,
itemWidth: 160,
itemMargin: 3,
asNavFor: '#slider'
});
$('#slider').flexslider({
start: function(slider) {
$('html').removeClass('no-js');
slider.removeClass('loading');
},
animation: "fade",
slideshow: false,
directionNav: false,
controlNav: true,
touch: true,
useCSS: false,
slideshowSpeed: 3000,
animationSpeed: 300,
sync: "#carousel"
});
});
</script>
<script>
function launchFullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
$('.slide_text').css('bottom', '5%');
$('.slide_text').css('zoom', '1.5');
$('.flex-fullscreen-launch').css('visibility', 'hidden');
$('.flex-fullscreen-cancel').css('visibility', 'visible');
$('.flex-fullscreen-cancel').css('top', '20%');
$('.flex-play-button').css('top', '20%');
$('.flex-pause-button').css('top', '20%');
$('.flex-next-button').css('bottom', '30%');
$('.flex-prev-button').css('bottom', '30%');
$('.flex-control-thumbs').css('position', 'static');
}
function cancelFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
$('.slide_text').css('bottom', '2%');
$('.slide_text').css('zoom', '1');
$('.flex-fullscreen-launch').css('visibility', 'visible');
$('.flex-fullscreen-cancel').css('visibility', 'hidden');
$('.flex-fullscreen-launch').css('top', '6%');
$('.flex-play-button').css('top', '6%');
$('.flex-pause-button').css('top', '6%');
$('.flex-next-button').css('bottom', '54%');
$('.flex-prev-button').css('bottom', '54%');
$('.flex-control-thumbs').css('position', 'absolute');
}
</script>
</head>
<body>
<div id="container">
<div id="div_left">
<input class="button active" type="button" value="Button 1" />
<input class="button" type="button" value="Button 2" />
<input class="button" type="button" value="Button 3" />
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img alt="asdf" src="img/1.jpg" />
</li>
<li>
<img alt="asdf" src="img/2.jpg" />
</li>
<li>
<img alt="asdf" src="img/3.jpg" />
</li>
<li>
<img alt="asdf" src="img/4.jpg" />
</li>
<li>
<img alt="asdf" src="img/5.jpg" />
</li>
<li>
<img alt="asdf" src="img/6.jpg" />
</li>
<li>
<img alt="asdf" src="img/7.jpg" />
</li>
<li>
<img alt="asdf" src="img/8.jpg" />
</li>
</ul>
<a class="flex-fullscreen-launch" href="#" onclick="launchFullScreen(document.getElementById('slider'))"></a>
<a class="flex-fullscreen-cancel" href="#" onclick="cancelFullScreen(document.getElementById('slider'))"></a>
<a class="flex-play-button" href="#" onclick="$('#carousel').flexslider('play'); $('.flex-play-button').css('visibility', 'hidden'); $('.flex-pause-button').css('visibility', 'visible');"></a>
<a class="flex-pause-button" href="#" onclick="$('#carousel').flexslider('pause'); $('.flex-pause-button').css('visibility', 'hidden'); $('.flex-play-button').css('visibility', 'visible');"></a>
<a class="flex-next-button" href="#" onclick="$('#slider').flexslider('next');"></a>
<a class="flex-prev-button" href="#" onclick="$('#slider').flexslider('prev');"></a>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img alt="asdf" src="img/1-small.jpg" />
</li>
<li>
<img alt="asdf" src="img/2-small.jpg" />
</li>
<li>
<img alt="asdf" src="img/3-small.jpg" />
</li>
<li>
<img alt="asdf" src="img/4-small.jpg" />
</li>
<li>
<img alt="asdf" src="img/5-small.jpg" />
</li>
<li>
<img alt="asdf" src="img/6-small.jpg" />
</li>
<li>
<img alt="asdf" src="img/7-small.jpg" />
</li>
<li>
<img alt="asdf" src="img/8-small.jpg" />
</li>
</ul>
<a class="flex-next-button" href="#" onclick="$('#carousel').flexslider('next');"></a>
<a class="flex-prev-button" href="#" onclick="$('#carousel').flexslider('prev');"></a>
</div>
</section>
</div>
</div>
</body>
</html>
最佳答案
关于javascript - 带缩略图 slider 的 FlexSlider 2 - 主图像的 Prev Next 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27152286/
24
4
0
这个问题已经有答案了: How to modify a public field of a field of a field… As in link.next.next.next(.next*n) n
我有一个保存链接的数组。每个链接都有一个名为 next 的公共(public)字段，它可以保存另一个链接，该链接可以保存更多链接等。当我想删除东西时我可以做 array[x].next = array
文档概述了在中间件中使用“await next()”的用例，导致中间件暂停并触发下游的下一个中间件，直到所有中间件都执行完毕，此时上游级联将开始并且中间件将完整执行。如果用户想要缩短级联，那么单独写“
我今天遇到了一个用例，我试图让我的 nextjs 应用程序在 android webview 中工作，不幸的是 android 不解析以 _next 开头的路径并且我的大部分块文件都在_next/st
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
next-with-apollo npm 库和 the approach shown in next.js docs 中选择的“next.js 中的 apollo-client”方法对比. next.
我尝试使用 next-auth 获取凭据身份验证，但我没有使用它的经验，无论我做什么，我都会收到以下消息:[next-auth][error][callback_credentials_jwt_err
更改语言时需要更改路线名称。例如，我有一条路线 /en/career但是当我改成捷克语时，我需要一条路线 /cs/kariera .基本上我需要本地化 URL。现在，当我在 /en/career 上时
更好/优雅的方法是什么？ jQuery(this).find('title').next().next().next().eq(0).text(); //THIS WORKS 我尝试使用 jQuery
我只是对 node 感到好奇。 node.next 和 node.next。到目前为止，我们已经了解到节点有两个部分，其中存储数据和下一个节点的地址(node.next)，然后是 node.next.
好的，我正在尝试单独隐藏这组信息。 这有效: $(".arrow").click(function() { $(this).next().next().slideToggle(); }); Mo
我开发了一个 Web 应用程序，它使用 Nextjs 应用程序作为前端和一个 Python (Django) API 服务器作为后端。我的大多数前端页面都有对后端服务器的 API 调用(在 Compo
如果我没有通过身份验证，我正在尝试使用NextJS中间件保护一些路由，我正在使用Next-auth进行身份验证，从文档中看，这就是MIDDLEWAR.TS文件应该是什么样子。Rn的问题是，即使当我通过
我正在使用 nextJs，需要添加对 less 和 css 的支持。我想要一个项目同时拥有 next-css 和 next-less 。但它一次接受一个。这是我正在使用的 const withCSS
我正在构建下一个项目的 typescript 。如果我将此配置文件保留为 next.config.js , 我在 tsconfig.json 收到警告说“找不到next.config.ts”。所以 t
我有一个自定义登录网址/ View /模板。我对页面使用 @login_required 装饰器(让 称为 my_page) 需要登录。试图访问 my_site.com/my_page 正确调用 my
下面的代码工作正常: class String def foo next! end end puts 'hh'.foo # hi 这个也很好用: class String d
我在我的Next.js应用程序中使用Next-auth进行身份验证。成功登录后，我立即被重定向到登录页面，表明该会话已变为未经身份验证。。相关代码片段：。_app.tsx：。Layout.tsx：。L
我想在 nextjs 中创建动态页面以匹配以下路由 users/[user]/[dashboard]。我的文件结构 pages/ users/ -[user].js // will
我直接按照官网的步骤操作: https://nextjs.org/docs/ 第一步。 npm install --save next react react-dom 步骤 2. 将脚本添加到 pac
我是一名优秀的程序员,十分优秀！