- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我想要图像下方的轮播指示器。这需要对样式进行一些更改,以便仍然对该轮播使用 Bootstrap(请参阅下面的完整代码)。我向指示器添加了 border-color
并向 carousel-indicators
类添加了一些样式:position:static;填充顶部:10px;宽度:100%; margin-left:0;
.
问题是指标的大小。如果访问者单击其中一个指示器,轮播将正确转到该图像。 但是,指示器没有改变:也就是说,开始时为 active
的指示器仍然大于其他两个指示器(您现在希望被点击的指示器是较大的)。第一个指标继续保持 active
class
。是什么导致了这个问题?
<div id="carouselvideo" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx></iframe>
</div>
<div class="item">
<iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx></iframe>
</div>
<div class="item">
<iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx></iframe>
</div>
</div>
</div>
<script> //The problem persists also if I remove this script line.
$("#carouselvideo").carousel({interval: false});
</script>
<ol class="carousel-indicators" style="position:static; padding-top:10px; width: 100%; margin-left:0;">
<li data-target="#carouselvideo" data-slide-to="0" style="border-color: #333;" class="active"></li>
<li data-target="#carouselvideo" data-slide-to="1" style="border-color: #333;"></li>
<li data-target="#carouselvideo" data-slide-to="2" style="border-color: #333;"></li>
</ol>
更新:如果我将最后五行移动到 carouselvideo
div 中,那么问题就消失了。但是,我不希望它在那里,因为我想要轮播下方的指示器(请参阅 How to create this bootstrap carousel of iframes? )。指标代码放在轮播外为什么会出现这个问题?
最佳答案
这是一个 Bootstrap 轮播的工作示例,指示器工作正常。您在 iframe src 末尾缺少一些引号,这可能会导致一些问题,但您可以在这个 fiddle http://jsfiddle.net/wamosjk/auotu240/ 找到一个工作示例这是代码
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx"></iframe>
</div><!-- End Item -->
<div class="item">
<iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx"></iframe>
</div><!-- End Item -->
<div class="item">
<iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx"></iframe>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- End Carousel -->
您可以取出脚本并将 data-interval="false"也放入您的旋转木马中,但是如果您仍然遇到问题则取决于您.如果您不需要控件,您可以去掉控件,只保留指示器。
我发现如果你想要轮播之外的指示器,事件类不再切换,所以你需要添加以下脚本
<script>
$(".carousel-indicators li").on('click', function(){
$(this).siblings().removeClass('active')
$(this).addClass('active');
})
</script>
关于javascript - Bootstrap 轮播 : carousel-indicators not changing size/class,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34122874/
编辑:为了澄清,我想问的是:在什么情况下您会更喜欢一种语法而不是另一种语法? 有什么区别: .trigger('change') 和 .change() 两者都按预期工作。在任何情况下语法都会有所不同
这个问题在这里已经有了答案: Difference between .on('click') vs .click() (12 个答案) 关闭 6 年前。 有什么区别: $('选择器').change
我用的是Select2-4.0.0 和 $gameSelect.select2().on("change",function(e){....} 工作正常。 但是当我将它链接起来时('change')就
有一天在#haskell 上,有人提到了当字符串改变时字符串的类型应该如何改变的概念。这让我想起了我项目中的一些代码。它一直困扰着我,我说不清为什么。我现在推测,原因是我没有实现这个概念。这是下面的代
我使用了 .on("change") 事件函数,因为我的整个代码中有一部分是动态变化的。 .trigger("change") 在 .change() 中工作正常,但在 .on("change") 中
下面是一个非常简单的表单下拉列表设置。但是,on-change 事件拒绝触发...除非它更改为 ng-change。 这让我卡住了大约一个小时,因为我们在网站的其他地方使用了相同的设置(即模型属性/列
我有两个v-model 案例一: 这很好用 案例二: 即使改变 u1 也会触发 onDateChange(); 最佳答案 :change 绑定(bind)属性,如 v-bind:change=
我找到了 .and方法对于链接许多期望非常有用。 expect { click_button 'Update Boilerplate' @boilerplate_original.reload
出于合规性原因,我需要捕获所有数据库更改。我知道 Change Feed 存储此信息(并且我正在等待完全保真度来捕获删除)。目前,我一直在通过 Function 触发器读取 Change Feed 并
我添加了一个data-ng-change='getSubjectsClasswise(classBean.class_id);'上课标签,但主题未在主题 处加载标签。 一切看起来都很好,没有遇到问题
我有一组复选框,当您单击其中一个时,它们应该全部被选中。 当用户单击一个复选框时,它会检查以该类名称开头的所有其他复选框。我想要的是用户单击一个复选框,并且每次单击仅触发一次 $(".atpSelec
我在 Stack Overflow 上阅读了很多有关此问题的内容,并应用了所有建议的解决方案(getShell pack、布局、getparent 布局等...),但没有一个起作用。 我有一个带有文本
我想更改我的索引。我的数据框如下: partA = pd.DataFrame({'u1': 2, 'u2': 3, 'u3':4, 'u4':29, 'u5':4, 'u6':1, 'u7':323,
我有一个像这样的下拉菜单: Grade Year 旁边还有另一个下拉菜单: 3 4
这个问题已经有人问过,但我只停留在最基本的层面上。除了选择标记和尝试通过 jquery 捕获更改事件外,我没有向我的 html 添加任何内容。这是我的代码: $('#target').bin
我只是 Django 的新手几天。现在,当自定义表单中其他字段的值发生变化时,我需要同时更改一个字段中的值和表示形式。此时更改 MyModel 是受限。 我的应用程序/models.py: class
我正在使用 ListView 控件来显示一些数据行。有一个后台任务接收列表内容的外部更新。新收到的数据可能包含更少、更多或相同数量的项目,而且项目本身可能已更改。 ListView.ItemsSour
我在 android studio 中使用 git 插件。我的问题是当我提交更改列表(公开提交)时,但我在更改列表中的评论是错误的/丢失的,我想更改它。 问题: 有没有办法通过 AndroidStud
MyCustomObject * object=new MyCustomObject(); 假设我的许多类都使用了对象指针,但突然间我想在不更改地址的情况下更改指针的内容。 我认为 object =
我正在使用新的 KeyValue Observing。当变量发生变化时,我接到了我的观察者的电话,但 change struct 附带 newValue和 oldValue都为 nil ,所以它永远不
我是一名优秀的程序员,十分优秀!