I am having trouble implementing the bootstrap carousel. Can anyone look at the following html and js and give me instructions on how to implement the slide. The .js has not been edited and the carousel is installed on the body hero unit. Do I implement the carousel api? How do I define the carousel I am using within the .js file? Thanks.
<div class="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
</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>
Note: this answer was originally for Bootstrap 2.3.2 (may not work with version 3)
You have to put the class "item" on all of your slides and the class "active" on the first slide. This worked for me.
<div class="carousel">
<div class="carousel-inner">
<!-- your slide -->
<div class="hero-unit item active">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
</div>
</div>
</div>
And like Christopher said you need to use this function to initiate it.
<script type="text/javascript">
$(function(){
$('.carousel').carousel();
});
</script>
My understanding is that
<div class="carousel">
Needs to be
<div id="myCarousel" class="carousel">
where the id is whatever the "Arrows"' href is.
The documentation for Bootstrap Carousel is available here: http://twitter.github.com/bootstrap/javascript.html#carousel
I guess you would need to add something like this to get it running:
<script type="text/javascript">
$(function(){
$('.carousel').carousel();
});
</script>
You have no items in your example code.
to get it to work you need to have at least two items, with in your carousel-inner div.
create a second item
make sure the first item has the active class; this starts the ball rolling
the bare code should look like this
.
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
This is in Joomla 3.1.1 with the Protostar template which is based on Bootstrap.
I did't get the carousel to automticly cycle. This worked for me:
Use a Custom html module, add this code:
(change the img scr, alt text and caption text to customize)
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators" style="list-style: none;">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="images/headers/maple.jpg" alt="imagetext 1" />
<div class="carousel-caption">
<h4>Exampletext 1</h4>
</div>
</div>
<div class="item">
<img src="images/headers/raindrops.jpg" alt="imagetext 2" />
<div class="carousel-caption">
<h4>Exampletext</h4>
</div>
</div>
<div class="item">
<img src="images/headers/windows.jpg" alt="imagetext 3" />
<div class="carousel-caption">
<h4>Exampletext</h4>
</div>
</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>
<!-- Call Carousel -->
<script type="text/javascript">
(function($){$('.carousel').carousel({ interval: 5000, pause:'hover'});
})(jQuery);
</script>
This adjustments in the index.php of your template is to prevent confict between scripts, it disables mootools which causes the carousel to open and close beween slides:
// CSUTOM disable mootools-more.js
unset (JFactory::getDocument()->_scripts['/jomaatcms/media/system/js/mootools-core.js']);
unset (JFactory::getDocument()->_scripts['/jomaatcms/media/system/js/mootools-more.js']);
Related
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'm using the full slider bootstrap and would like to keep all the features, but instead of putting all images in the Carousel, I wonder if it is possible to keep only one and only change the background-image.
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- 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">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
Finnaly:
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" **style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"**></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
I don't know why you would want this function, but since you're asking, I'll give you a solution.
With the .css()-selector in jQuery, you can target CSS and change it with jQuery.
You can create an array or variable, loop through it with .each(), store that information in another variable and then let jQuery change the background-image after some time or after an action. You can change the background by using the following jQuery:
$('.classname').css('background-image', 'variable');
Just as an example (you'll have to figure out yourself how to do it with the background-images, how to let jQuery display another one etc), I have set up this fiddle. In the fiddle, I have a variable, which I split on the | and which I then loop through with .each(). This variable (chunk) is later used to make some new divs with the respective chunk as a classname.
jQuery
var somestring = "img1|img2|img3",
separated = somestring.split("|");
$.each(separated, function(index, chunk) {
$('.test').append('<div class="' + chunk + '">' + chunk + '</div>');
//This line is purely added to do something with the chunks
});
I didn't want to make the whole code of you, since this site is made to help each other. I gave you a pretty good push to the right direction, you now just have to figure out how to change the background-image-property on a click or other action.
I am trying to use carousel.js from Bootstrap on Wordpress. I use a simple wordpress theme--Twenty Fourteen and then add the above code into a new page. No other js file is included. It doesn't work for me on Both Safari and chrome.
It is frustrating to see the this:
http://g.recordit.co/cOEbBrW0FQ.gif
The slides works well when turning left. However, when it comes to right end, it would trigger an error message and then doesn't work again!
Besides, the code above does work when I just put it into a individual html file(without influence of wordpress).
http://tinypic.com/r/28c0eig/8
Sorry for image missing here(since my reputation is less than 10)
Here is the test code:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://www.brucelittlefield.com/wp-content/uploads/2010/01/smiley-400x400.jpg" alt="...">
<div class="carousel-caption">
<h3>Image 1</h3>
<p>This is my first image!</p>
</div>
</div>
<div class="item">
<img src="http://www.brucelittlefield.com/wp-content/uploads/2010/01/smiley-400x400.jpg" alt="...">
<div class="carousel-caption">
<h3>Image 2</h3>
<p>This is my second image!</p>
</div>
</div>
<div class="item">
<img src="http://www.brucelittlefield.com/wp-content/uploads/2010/01/smiley-400x400.jpg" alt="...">
<div class="carousel-caption">
<h3>Image 3</h3>
<p>This is my third image!</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Can anyone explain why does it happen? Thanks in advance!!
I just got exactly the same thing with Bootstrap 3.2.0 and Wordpress 3.9.2, and found a way round it in my case.
I was using a Wordpress shortcode to output the carousel content. Unfortunately the wpautop filter added some unwanted markup to the output and this broke the carousel.
The short term fix was to remove the wpautop filter. I added this line to functions.php
remove_filter( 'the_content', 'wpautop' );
Hope this helps someone.
Actually on further development, the issue had to do with not setting
the FIRST ITEM "active". You can leave the .slide there but you must
have one active to start. – geilt
This solution is working with slide effect.
I had to remove the class .slide from the main div where you define .carousel to fix that issue. Also I suggest initializing in your own custom JS as well since Wordpress doesn't use the $ variable for jQuery by default may cause issues.
This is a little late but look at the source that is being rendered in the browser. Wordpress has a habit of wrapping elements in p tags. In my case I found that Wordpress was adding an empty paragraph in in my carousel-inner and this was causing the issue.
To fix I removed all the whitespace between my closing divs for the carousel in Wordpress.
In my case, I was using bootstrap from a understrap theme which already has a definition for bootstrap js but, stupid as it sounds, I already had my own bootsrap.js hooked in wp_enqueue_scripts, that silly step took 4 hours of my precious life.
Please refer below answer as its worked for me. I had just removed data-ride="carousel"
Bootstrap Carousel: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
I am new to bootstrap and having hard time figuring out why the previous and next arrows are NOT show in the middle of the slideshow images.
The arrows are showing on the top of the slideshow and can barely seen.
Here is what I used to add the slideshow to the page.
<div id="mainBanner" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="imgs/image1.jpg" class="slidImageSize"/>
</div>
<div class="item">
<img src="imgs/image2.jpg" class="slidImageSize"/>
</div>
<div class="item">
<img src="imgs/image3.jpg" class="slidImageSize"/>
</div>
<div class="item">
<img src="imgs/image4.jpg" class="slidImageSize"/>
</div>
</div>
<!-- Controls -->
<a class="carousel-control left" href="#mainBanner" data-slide="prev"><</a>
<a class="carousel-control right" href="#mainBanner" data-slide="next">></a>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="resources/js/jquery-1.9.1.min.js"></script>
<!-- Include all compiled plugins (below) -->
<script src="resources/css/js/bootstrap.js"></script></div>
I can add some styling to a custom CSS class but I am wondering if I missed anything when using bootstrap.
According to documentation, instead of < and > you have to put <span class="glyphicon glyphicon-chevron-right"></span>
Example: http://jsfiddle.net/bortao/6SVCM/
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">.