I am using bootstrap and I want to use the carousel in one page without sliding.
I've seen this effect can be removed by setting interval to false. The problem is that I want to have a sliding carousel in my home page but not in the rest. So changing this value is not a valid solution for me.
How can I solve this???
I've found that when we add data-interval="false" it stops sliding:
<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>
<div class="carousel-inner">
<div class="item active">
<div class="navigationBarImg">
<img src="/Images/Pictures/1254_1.jpg" class="image-responsive" alt="First slide">
</div>
<div class="container"></div>
</div>
<div class="item">
<div class="navigationBarImg">
<img src="/Images/Pictures/1308_1.jpg" class="image-responsive" alt="Second slide">
</div>
<div class="container"></div>
</div>
<div class="item">
<div class="navigationBarImg">
<img src="/Images/Pictures/1375_1.jpg" class="image-responsive" alt="Third slide">
</div>
<div class="container"></div>
</div>
</div>
<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><!-- /.carousel -->
Related
I am using the Full Slider bootstrap here and when I replace the image url by a image in a folder it does not work.
image:url('http://placehold.it/1900x1080&... One')
by
<img class="fill" src="background:url(./img/header.jpg)"></img>
On the bootstrap page, some guys had the same issues even if I tried different solution ../img or /img, it does not work.
Someone has a idea ?
thank you
here is the source code from Bootstrap, I changed
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
by
<div class="fill" src="img/header.jpg"></div>
<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=""></div>
<div class="fill" src="img/header.jpg"></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>
Got it to work on local with this:
<div class="fill" style="background-image: url('img/picture.jpg')"></div>
Inside the wrapper DIV
<!-- 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('img/picture.jpg')"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
try this.
src = "img/header.jpg"
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.
I am trying to move my carousel indicators beneath the carousel. I've tried a few tips on the web to no avail.
I tried bottom with a negative value, but no good.
Any suggestions?
<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="/bootstrap-3.1.1/images/carousel-1.jpg" alt="...">
<div class="carousel-caption">
ATS International Conference
</div>
</div>
<div class="item">
<img src="/bootstrap-3.1.1/images/carousel-1.jpg" alt="...">
<div class="carousel-caption">
ATS International Conference
</div>
</div>
<div class="item">
<img src="/bootstrap-3.1.1/images/carousel-1.jpg" alt="...">
<div class="carousel-caption">
ATS International Conference
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
You can insert your indicators where you want...
Bootply : http://www.bootply.com/SZqnwXVQ71
CSS:
.carousel-indicators{
position:relative;
background:grey;
height:25px;
bottom:0px;
}
.carousel-control{
margin-bottom:25px; // Same height as indicators
}
HTML :
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="/bootstrap-3.1.1/images/carousel-1.jpg" alt="...">
<div class="carousel-caption">
ATS International Conference
</div>
</div>
<div class="item">
<img src="/bootstrap-3.1.1/images/carousel-1.jpg" alt="...">
<div class="carousel-caption">
ATS International Conference
</div>
</div>
<div class="item">
<img src="/bootstrap-3.1.1/images/carousel-1.jpg" alt="...">
<div class="carousel-caption">
ATS International Conference
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- Indicators JUST MOVE IT DOWN-->
<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>
</div>
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;
}