- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 jquery 内容切换器,当单击相应的链接时,它会显示/隐藏 div。每个 Div 内部都有一个 FlexSlider。第一个 Flex slider 工作得很好,但是当您单击链接以显示不同的 Div 时,Flex slider 就会困惑,它会同时显示所有 3 张幻灯片。如果您对浏览器窗口进行散焦和重新聚焦(单击桌面以使窗口散焦,然后在窗口中单击返回以重新聚焦),则弯曲 slider 可以正常工作。虽然这是一个需要解释的问题,但最好还是看看它的实际情况。该网站是:http://www.benhenschel.com
“Web”是第一个工作正常的 slider ,但如果您单击“移动”,则会出现第二个 Flex slider ,您可以看到它同时显示所有 3 张幻灯片。如果您对浏览器窗口进行散焦并重新聚焦,则 Flex slider 将正确显示。
这是内容切换器和 Flex slider 的代码
<!--Hide/Show-->
<script type="text/javascript" charset="utf-8">
$(function(){
function contentSwitcher(settings){
var settings = {
contentClass : '.workContent',
navigationId : '#navigation'
};
//Hide all of the content except the first one on the nav
$(settings.contentClass).not(':first').hide();
$(settings.navigationId).find('li:first').addClass('active');
//onClick set the active state,
//hide the content panels and show the correct one
$(settings.navigationId).find('a').click(function(e){
var contentToShow = $(this).attr('href');
contentToShow = $(contentToShow);
//dissable normal link behaviour
e.preventDefault();
//set the proper active class for active state css
$(settings.navigationId).find('li').removeClass('active');
$(this).parent('li').addClass('active');
//hide the old content and show the new
$(settings.contentClass).hide();
contentToShow.show();
});
}
contentSwitcher();
});
</script>
<!--Flex Slider-->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
这是 HTML
<!-- Web -->
<div id="webContainer" class="workContent flexslider">
<h3>Web</h3>
<ul class="slides">
<!-- Slide 1 -->
<li>
<div class="workImage">
<img src="/images/work/urbanSurvivorWeb.jpg" alt="" />
</div>
<div class="workDescription">
<h4>Urban Survivor</h4>
<p>
The goal of this project, was to create a teaser page for a iPhone app called Urban Survivor. This simple one page site was designed to introduce the app, and generate interest. By providing a email sign up that interest can be measured.
<br /><br />
<a href="http://www.urbansurvivorapp.com">Visit Site</a>
</p>
</div>
</li>
<!-- Slide 2 -->
<li>
<div class="workImage">
<img src="/images/work/taykey.jpg" alt="" />
</div>
<div class="workDescription">
<h4>Taykey</h4>
<p>
I was tasked with redesigning Taykey's website, the goal was to better communicate what Taykey had to offer, and how Taykey works. Additionally, provide general information about the company, jobs available as well as contact information for the various offices. The redesign also aimed at brining a more concise visual brand across other Taykey marketing material.
<br /><br />
<a href="http://www.taykey.com">Visit Site</a>
</p>
</div>
</li>
<!-- Slide 3 -->
<li>
<div class="workImage">
<img src="/images/work/ireland.jpg" alt="" />
</div>
<div class="workDescription">
<h4>I'm Off To Ireland</h4>
<p>
This was a personal website I created so I could share my experiences while studying abroad in Waterford, Ireland.
<br /><br />
<a href="http://www.imofftoireland.com">Visit Site</a>
</p>
</div>
</li>
</ul>
</div>
<!-- END Web -->
<!-- Mobile -->
<div id="mobileContainer" class="workContent flexslider">
<h3>Mobile</h3>
<ul class="slides">
<!-- Slide 1 -->
<li>
<div class="workImage">
<img src="/images/work/urbanSurvivor/app.png" alt="" />
</div>
<div class="workDescription">
<h4>Urban Survivor iPhone App</h4>
<p>
Urban Survivor alerts the user when they have physically entered an area with a high crime rating. Additionally, the user will be able to check the threat level of their current physical location and see a broader view of their surroundings through the use of a heat map. Both the threat meter and the heat map use a simple, color-coded visual cue (green = low, yellow = neutral, red = high). Finally, there is a panic button dials 911 when pressed.
</p>
</div>
</li>
<!-- Slide 2 -->
<li>
<div class="workImage">
<img src="/images/work/urbanSurvivor/wireframe.jpg" alt="" />
</div>
<div class="workDescription">
<h4>Urban Survivor App: Wireframe</h4>
<p>
A major requirement for this app was a super simple navigation. After several iterations we landed on having two buttons in the top left and right hand corner of the screen that, when taped, would swipe left/right reveling the content of the new screen. As an alternate to this navigation, the user would swipe left or right with their fingers to also revel the content.
</p>
</div>
</li>
<!-- Slide 3 -->
<li>
<div class="workImage">
<img src="/images/work/urbanSurvivor/workflow.jpg" alt="" />
</div>
<div class="workDescription">
<h4>Urban Survivor App: User Workflow</h4>
<p>
This flowchart shows the entire user workflow, and how the user could interact with the app.
</p>
</div>
</li>
</ul>
</div>
<!-- END Mobile -->
我真的不太了解 jQuery,所以任何帮助将不胜感激。
最佳答案
好吧,在尝试了不同的选项卡系统和自制的 jquery 解决方案之后,我以不同且极其简单的方式解决了相同的问题!
您只需创建第一个幻灯片,包含 5 张幻灯片,并在每张幻灯片中放置另一个 flexslider。将 controlNav 设置为 true 并使用您的导航 html 结构设置 manualControls。
这是我的设置:
//first slideshow
$('.flexslider_cont').flexslider({
animation: "slide",
slideshow: 0,
useCSS: true,
controlNav: true,
selector: ".slides_l1 > .slide_l1",
manualControls: "#navorizzontale li", //navigation structure
directionNav: false,
});
$('.flexslider2a').flexslider({
animation: "slide",
slideshow: 0,
useCSS: true,
controlNav: false,
directionNav: true,
});
$('.flexslider2b').flexslider({
animation: "slide",
slideshow: 0,
useCSS: true,
controlNav: false,
directionNav: true
});
$('.flexslider2c').flexslider({
animation: "slide",
slideshow: 0,
useCSS: true,
controlNav: false,
directionNav: true
});
$('.flexslider2d').flexslider({
animation: "slide",
slideshow: 0,
useCSS: true,
controlNav: false,
directionNav: true
});
关于jquery - jquery 隐藏/显示内容切换器内的多个 FlexSlider。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13096548/
我目前正在构建一个使用多个 flexslider 的站点。这个概念是,当用户单击特定按钮时,它会显示一个带有与按下的按钮相关的特色内容的 flexslider,这都是非常简单的东西。 我现在遇到的问题
我正在使用 Woothemes 的最新 Flexslider,并且我正在尝试将一个 FlexSlider 初始化到另一个 FlexSlider 中。像这样: function initFrontpag
由于布局问题,我尝试在 flexslider 本身之外使用 .flex-caption。 你能想出一个办法让我实现这个目标吗? 理想情况下,标记的结构如下: Caption 最佳答案 这解决
你好,我会实现一个基本的 slider 。我想使用 http://flexslider.woothemes.com/index.html 来做到这一点 在我的文件 application.htlm 中
我的 wordpress 主题包含一个 jquery flexslider(版本:jquery.flexslider-min.js),问题是当我试图通过修改 slider 的高度参数(通过设置 fix
我正在使用 Flexslider,现在正在使用外部控制容器功能 - 因此我可以通过不同 DIV 容器中的链接来控制 slider 。但是,当我翻转幻灯片时,我仍然需要翻转方向箭头。我一直无法让两者一起
我有一个全角 FlexSlider,每张幻灯片都有一张图片,顶部有一些 HTML 内容。 但由于某些原因,HTML 内容仅在幻灯片动画之后出现。 这是一个 JSFiddle:http:
我在使用 flexslider 时遇到了一个奇怪的问题。幻灯片 LI 没有获得正确的宽度,因此显示了所有幻灯片。这仅发生在第一页加载时。一旦我切换到另一个选项卡并切换回来,一切看起来都很好。也许是 J
我正在使用一个非常基本的 slider ,我有两个问题: 我似乎没有找到隐藏幻灯片下方默认按钮控件的属性? 我希望只有上一个/下一个悬停控件。 如果我不能有选项 1,我自己的控件会隐藏默认值吗? 提前
我正在使用 flexslider,它工作正常。但是如何将幻灯片放映更改为“从左到右”?只有 2 个动画:淡入淡出和滑动(从右到左)。请帮忙。 最佳答案 在 1.8 版本中有一个名为“reverse”的
最初我隐藏了我的flexslider,直到用户单击链接,然后它才会打开。但由于某种原因, slider 显示后无法工作,直到我调整浏览器窗口,这很奇怪!当我不隐藏 flexslider 时,它工作得很
我收到一个来自客户的(不寻常的)请求,要求在“幻灯片”动画期间每张幻灯片之间至少有 40 像素的填充/边距。 Flexslider 的默认设置是使项目相互齐平。 2.0 中有一个新的 JQuery 选
我已经使用 Flexslider 创建了一个 slider ,并且尝试使用 manualControls: 创建导航菜单,但链接不起作用。以下是 flexslider 和 slider /导航本身的代
我正在使用 T3 框架开发 Joomla 3 模板,并且包含一个使用 Flexslider 插件的 IceCarousel 模块。但是,IceCarousel 模块无法正常工作,因为存在一个 java
我在 WordPress 上安装了一个包含 Flexslider 的模板。我的语言是从右到左 (RTL) 书写的。当页面为 RTL 时,Flexslider 停止并且不显示图像。我该如何解决这个问题?
我正在尝试构建一个 Flexslider 轮播 - 它有多个图像,但当前图像居中,任一侧的下一个/上一个图像都离开屏幕 - 就像这个网站 http://www.ncad.ie/ 到目前为止,我已经用一
我正在使用 Flexslider,并被要求根据每张幻灯片的内容量在不同的时间显示它,短句子的速度很快,段落的速度很慢。当 flexslide 仅允许 1 个 Slideshowspeed 值时,如何进
我正在尝试让延迟加载工作于 Flexslider通过使用延迟加载 jquery 插件并按照本网站上的说明进行操作:http://www.appelsiini.net/projects/lazyload
我有一个 Flexislider,我想从元素外部控制它。我试过这个: var myslider = $('.slider').flexslider({ animation: 'slide' }
我最近开始使用 flexslider。 我正在使用 bootstrap 创建网站,使用代码嵌入 flexslider 图像变得不可见,我没有结果。 在标题 在 custom.js 中 $(wind
我是一名优秀的程序员,十分优秀!