个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在尝试在我的元素中实现一个简单的 angular-flexslider 应用程序:
https://github.com/woothemes/FlexSlider
我已经成功地滑动了图像，但是我无法显示下一个/上一个按钮，而且，似乎有一个显示上一个图像的左边距。
HTML:
<head>
<title>Angular FlexSlider Example - Basic Slider</title>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/woothemes/FlexSlider/master/flexslider.css">
<style type="text/css">
.flexslider-container {
width: 100%;
margin: 1px auto;
}
</style>
</head>
<body ng-controller="BasicSliderCtrl">
<flex-slider slide="s in slides" animation="slide" >
<li>
<img ng-src="{{s}}">
</li>
</flex-slider>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://raw.githubusercontent.com/woothemes/FlexSlider/master/jquery.flexslider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/thenikso/angular-flexslider/master/angular-flexslider.js"></script>
<script type="text/javascript">
angular.module('BasicSlider', ['angular-flexslider'])
.controller('BasicSliderCtrl', function($scope) {
$scope.slides = [
'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg'
];
});
</script>
</body>
</html>
笨蛋:http://plnkr.co/edit/2529sAA4i6qcCzbZgCA2
这是我想要实现的目标:http://flexslider.woothemes.com/index.html
谢谢
最佳答案
我不知道你是否还有这个问题，但我自己也遇到过这两个问题。对我有用的修复如下。
问题 1 - 下一个/上一个按钮不显示
下一个和上一个按钮使用 css 显示。确保页面中包含 flexslider.css。
此外，如果您打开 flexslider.css，您将在“图标字体”注释(靠近顶部)下看到一些源 URL。确保这些源 URL 与元素中 flexslider 字体文件的位置匹配。
问题 2 - 显示上一张图片的左边距
将以下代码添加到页面中包含的 css 文件
.carousel li {margin-right:0;}
关于AngularJS Flexslider 按钮和边距问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24862556/
25
4
0
我目前正在构建一个使用多个 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
我是一名优秀的程序员,十分优秀！