I'm trying to implement Twitter Bootstrap Carousel and Tabs. They both look to be functioning alright on the initial load, but as soon I hit one of the carousel arrows, the content goes away (the active class is removed and display is set to none). Can anybody see what the problem could be? sample page (look at the news box at the bottom right of the screen)
Control links refers to #news-box:
<!-- Carousel nav -->
<a class="carousel-control left" href="#news-box" data-slide="prev">‹</a>
<a class="carousel-control pause-play pause" href="#news-box"></a>
<a class="carousel-control right" href="#news-box" data-slide="next">›</a>
But your carousel has no id:
<div class="carousel slide">
Try with:
<div class="carousel slide" id="news-box">
Related
I have created 4 tabs on a page with previous and next elements to traverse through the carousel items.
Each tab is a different page , so each tab has a different URL. When I click on Next, the tab header changes to the next tab but the URL doesnt change. So the content does not get loaded when the tab is changed. Likewise for Previous.
Also I'm using <router-outlet>. How do I make the tabs function when I click Next or Previous?
Here is my code
<div id="carouselId" class="carousel slide" data-ride="'carousel'" data-interval="false">
<div class="carousel-inner nav-tabs" role="listbox">
<div *ngFor="let tab of tabs; let i = index"
class="carousel-item" routerLinkActive="active">
<a id="activeHeader" class="nav-link" [routerLink]="[tab.tabRoute]"> {{tab.tabName}}</a>
</div>
</div>
</div>
<a class="carousel-control" href="#carouselId" role="button" data-slide="prev">
Previous
</a>
<a class="carousel-control" href="#carouselId" role="button" data-slide="next">
Next
</a>
<div>
<router-outlet></router-outlet>
</div>
The Carousel I added to my site behaves really strange. In a periode of 2 the slide slides up. The height of the parent div changes to 0px and the margin of the child div gets a negative margin. In a the examples on the bootstrap site this isn't happening. I copied the latest code from the bootstrap site, can't find what i am doing wrong.
I would love it if someone could help me.
http://humandemo.cloudaccess.host Header right at the top op the page.
Code used:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel 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>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="/images/page-specific/home/iPhone-Comp-hw.png" alt="Second Slide">
</div>
<div class="item">
<img src="/images/page-specific/home/iPhone-Comp-hw.png" alt="First Slide">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
I guess this is the work of the mootools-more.js. This script includes the Fx.Slide class:
The slide effect slides an Element in horizontally or vertically. The contents will fold inside.
Try to comment this script.
#Jeroen: I have checked your website and tried some changes with Css by "Inspect Element" and As per me You should check div id="myCarousel" and div class="carousel-inner". If they have been set with some height or not. Hope this helps you.
Your Bootsrap carousel code is perfect, there is no issue with that. There may be issue with your another script, I have used your code in the codepen and its works perfectly fine.
I did some research after the answer of #Gleb Kemarsky, thank you for that. And indeed mootools conflicts with bootstrap, see: https://github.com/joomla/joomla-cms/issues/475
The fix is:
if (typeof jQuery != 'undefined') {
(function($) {
$(document).ready(function(){
$('.carousel').each(function(index, element) {
$(this)[index].slide = null;
});
});
})(jQuery);
}
I am facing interval issue with Bootstrap Carousel in IE8. When I land on the carousel page the slider image should be moved every 15 sec but it's not moving. Auto scrolling is less then 15 seconds when manually clicked on '>' icon on any image screen. This issue occurs before refreshing the page. Once I refresh the page then this issue doesn't occur. Next screen is not displaying for 15 seconds. This issue is happening for backward navigation also. This is occuring in IE 8 only.
My HTML:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="http://placehold.it/300x200/888&text=Item 1" />
</div>
<div class="item">
<img src="http://placehold.it/300x200/aaa&text=Item 2" />
</div>
<div class="item">
<img src="http://placehold.it/300x200/444&text=Item 3" />
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
My JavaScript:
$('.carousel').each(function(){
$(this).carousel({
interval: 15000
});
});
I have a strange behaviorin Bootstrap Carousel which I am using with AngularJS. Below is the HTML code where I am trying to dynamically add background color to each thumbnail. What I observe is the following:
Initially, the "active" part of carousel adds background color dynamically to each thumbnail as expected.
However, once I start rotating the carousel, all thumbnails lose their background color.
Now, when I reload the page, all thumbnails get background color again.
So I cannot understand what causing the loss of background color initially during rotation? Thanks.
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div ng-repeat="imgSet in imgSets" ng-class="{item: true, active : $first}">
<div ng-class="row">
<div ng-repeat="img in imgSet track by img.id" class="col-sm-3">
<a href="/appDetail/{{img.id}}" class="thumbnail" style="background-color: {{img.tile_color}};">
<img ng-src="{{uri}}/{{img.image}}" alt="Image" class="img-responsive" height="{{img.tile_height}}" width="{{img.tile_width}}">
</a>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
Well I found how to fix it, but I still do not understand why the original is not working (and why the fix is working):
my {{img.tile_color}} is a string of the form "#1956B7" (or any other #). I thought one must have "#" sign in front of the number. When I removed the "#" it started working.
Please take a look at the carousel in this link.
Is there a way I can alter the code of Twitter Bootstrap's carousel to make the images slide properly instead of messing up like they do now?
Try to add to the outer div containing the carousel with classname 'carousel', the extra classname: 'slide'.
You will get an sliding carousel with this:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
I looked at your code and all of your images are wrapped within a <div class="item">...</div> which is correct. However, one of these must be set to active so you'd need to make one of them <div class="item active">.