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;
}
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 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"
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.
Hi i am trying to make a bootstrap3 carousel slider and I want to add some images as the slide indicators instead of the list default circles.
Html Markup :
<div id="carousel-slider" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- Slider Indicators -->
<ul class="carousel-indicators">
<li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
<li data-target="#carousel-slider" data-slide-to="1"></li>
<li data-target="#carousel-slider" data-slide-to="2"></li>
</ul><!--/ Indicators end-->
</div>
if i add an img tag as below :
<div id="carousel-slider" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- Slider Indicators -->
<ul class="carousel-indicators">
<li data-target="#carousel-slider" data-slide-to="0" class="active">
<div class="thumbnail">
<img class="img-responsive" src="https://s3.amazonaws.com/ooomf-com-files/wdXqHcTwSTmLuKOGz92L_Landscape.jpg">
</div></li>
<li data-target="#carousel-slider" data-slide-to="1"></li>
<li data-target="#carousel-slider" data-slide-to="2"></li>
</ul><!--/ Indicators end-->
<div>
Its not showing anything. How can I achieve adding an image as the indicator rather than the circle?
I think the most important thing is to override the width and height properties on the li tags inside the .carousel-indicators.
To do so I've created an additional modifier css class called .carousel-indicators--thumbnails that is added to the .carousel-indicators div. This modifier class is used to override the li, .active and .active .thumbnail class.
.carousel-indicators.carousel-indicators--thumbnails li {
width: 80px;
height: 40px;
margin: 0;
border: none;
border-radius: 0;
}
.carousel-indicators.carousel-indicators--thumbnails .active {
background-color: transparent;
}
.carousel-indicators.carousel-indicators--thumbnails .active .thumbnail {
border-color: #337ab7;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- Indicators -->
<ol class="carousel-indicators carousel-indicators--thumbnails">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">
<div class="thumbnail">
<img src="http://www.fillmurray.com/800/400" class="img-responsive">
</div>
</li>
<li data-target="#carousel-example-generic" data-slide-to="1">
<div class="thumbnail">
<img src="http://www.fillmurray.com/800/401" class="img-responsive">
</div>
</li>
<li data-target="#carousel-example-generic" data-slide-to="2">
<div class="thumbnail">
<img src="http://www.fillmurray.com/800/402" class="img-responsive">
</div>
</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.fillmurray.com/800/400" width="800" height="400">
<div class="carousel-caption">
Slide 1
</div>
</div>
<div class="item">
<img src="http://www.fillmurray.com/800/401" width="800" height="400">
<div class="carousel-caption">
Slide 2
</div>
</div>
<div class="item">
<img src="http://www.fillmurray.com/800/402" width="800" height="400">
<div class="carousel-caption">
Slide 3
</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>
</div>
</div>
</div>