I am starting on Bootstrap and finding it hard to figure out what the error is. The slider is appearing fine, the next and prev buttons are working, but the image isn't sliding, its staying still. The link changes when clicking the Prev or Next buttons the slide isn't changing or moving. It seems to be a very minute error, not yet able to figure out what the error is.
<div class="container">
<div class="carousel slide" data-ride="carousel" id="carousel-example">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slider-to="0" class="active"></li>
<li data-target="#carousel-example" data-slider-to="1"></li>
<li data-target="#carousel-example" data-slider-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="slider/slide1.jpg" alt="Slide">
</div>
<div class="item">
<img src="slider/slide2.jpg" alt="Slide">
</div>
<div class="item">
<img src="slider/slide3.jpg" alt="Slide">
</div>
</div>
<a href="#carousel-example" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel-example" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
Related
My HTML is this:
<div class="navbar navbar-fixed-top" >
some divs inside...
</div>
<div class="filler"> </div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="<?php print(base_url('assets/images/slide-one.jpg')); ?>" alt="First slide" />
<div class="container">
<div class="carousel-caption">
<div class="main-text">TEXT 1!</div>
<div class="sub-text">subtext</div>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="<?php print(base_url('assets/images/slide-two.jpg')); ?>" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<div class="main-text">TEXT 2</div>
<div class="sub-text">subtext </div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS:
.filler {
height: 230px; //same height of class navbar.i do this so
carousel will not overlap the fixed navbar
}
The design runs OK. The top div is fixed at the top. But when I change the view to smaller or to mobile view, the carousel overlaps the fixed navbar. How will I format my css so that carousel will not overlap? Or is there another way to format this? Thank you.
I have a twitter Bootstrap carousel that I am trying to use within wordpress and it is stacking all the pictures on top of each other and doesn't rotate.
You can view it and see what I mean here.
My code looks like this:
<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" role="listbox">
<div class="item active">
<img src="http://i0.wp.com/www.cattywampur.com/wp-content/uploads/2016/03/8566819595_0f567e8594_k.jpg" >
<div class="carousel-caption">
<h3>Traversing the Grand Canyon</h3>
</div>
</div>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://i2.wp.com/www.cattywampur.com/wp-content/uploads/2016/05/26300985983_713ab03dc1_k.jpg" >
<div class="carousel-caption">
<h3>San Jacinto - Deer Springs Trail</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
You only need one carousel-inner.
And one item set to active.
That way they don't stack and have the same wrapper.
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://i0.wp.com/www.cattywampur.com/wp-content/uploads/2016/03/8566819595_0f567e8594_k.jpg">
<div class="carousel-caption">
<h3>Traversing the Grand Canyon</h3>
</div>
</div>
<div class="item">
<img src="http://i2.wp.com/www.cattywampur.com/wp-content/uploads/2016/05/26300985983_713ab03dc1_k.jpg">
<div class="carousel-caption">
<h3>San Jacinto - Deer Springs Trail</h3>
</div>
</div>
</div>
is there any solution for bootstrap slider image stretch problem for responsive view ? I don't want to set height default
http://getbootstrap.com/examples/carousel/
I tried with the above slider which is an default slider given in twitter bootstrap. when I included images in that slider it was stretching. If anyone faced this issue let me know the solution
I'm not sure if you already looking for this, but Bootstrap also provides a class for responsive images. Just added it to the img-tag.
HTML
<div class="slider">
<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://dreamatico.com/data_images/cat/cat-6.jpg" class="img-responsive" alt="Slider 1">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://dreamatico.com/data_images/cat/cat-6.jpg" class="img-responsive" alt="Slider 2">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://dreamatico.com/data_images/cat/cat-6.jpg" class="img-responsive" alt="Slider 3">
<div class="carousel-caption">
<h3>Caption Text</h3>
</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> <!-- Carousel -->
</div>
JavaScript
$('.carousel').carousel({
interval: 3000
})
See it also on jsfiddle.
Is there a possibility to stop the autoslide when im on my mobile view.
If it´s possible with css... maybe with mediaquery xs and than manipulate a carousel element ...?
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- LOGO -->
<div class="container">
<div class="row logo">
<div class="col-lg-12 col-sm-8 col-xs-12"><img class="img-responsive" src="img/logo.png" alt=""/></div>
</div>
</div>
<!-- POINTS -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<!-- SLIDEWRAPPER -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/headbild-1.jpg" alt="headbild1">
</div>
<div class="item">
<img src="img/headbild-2.jpg" alt="headbild2">
</div>
<div class="item">
<img src="img/headbild-1.jpg" alt="headbild3">
</div>
<div class="item">
<img src="img/headbild-2.jpg" alt="headbild4">
</div>
</div>
<!-- PREV/NEXT Controls -->
<div class="container hidden-xs">
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="previcon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control pull-right" href="#carousel" role="button" data-slide="next">
<span class="nexticon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
well to stop autoslide on a mobile device you would need to adjust your javascript / the init from the carousel in a different media query.
do you have a possibility to check your media screen size in js? if yes, simply destroy your carousel (sth like $('#carousel').destroy();) and reinit without the autoslide.
I made a carousel using twitter-bootstrap, and it shows a couple pictures. Problem is, all of the pictures are different sizes and, right now, they aren't centered. Is there a way that the carousel can re-size to center each picture horizontally and vertically whenever the picture in question changes?
Here is code so far:
<div class="modal-body">
<div id="picture-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#picture-carousel" data-slide-to="0" class="active"></li>
<li data-target="#picture-carousel" data-slide-to="1"></li>
<li data-target="#picture-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="/images/picture-1.jpg" alt="" />
<div class="carousel-caption">
<p></p>
</div>
</div>
<div class="item">
<img src="/images/picture-2.jpg" alt="" />
<div class="carousel-caption">
<p></p>
</div>
</div>
<div class="item">
<img src="/images/picture-3.jpg" alt="" />
<div class="carousel-caption">
<p></p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#picture-carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#picture-carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!--Carousel-->
</div> <!--modal-body-->
Thanks for any and all tips!
Use this Style to center images :-
div.carousel-inner img{
margin: 0 auto;
}