Please i wanna help in my slideshow>>>
My problem is: i want to put a panel on the slide show,, but when i tried to give that panel (- margin) the slideshow goes to right and made a scroll in the page!!
That't my code
<div class="room-booking">
<div class="container">
<div class="col-lg-2">
<div class="room-booking">
<p style="color:#f8c45a; padding:20px 30px; margin:0px;">1/4</p>
</div> <!-- End room-booking -->
</div> <!-- End col-lg-4 -->
</div> <!-- End Container -->
</div>
<!-- Carousel -->
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic" style="z-index:0">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-example-generic" class="custom-indicators" ></li>
<li data-slide-to="1" data-target="#carousel-example-generic" class="custom-indicators"></li>
<li data-slide-to="2" data-target="#carousel-example-generic" class="custom-indicators active"></li>
<li data-slide-to="3" data-target="#carousel-example-generic" class="custom-indicators"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img class="img-responsive" alt="First slide" data-src="holder.js/900x500/auto/#777:#555/text:First slide" src="img/pic1.png" style="margin-left:auto; margin-right:auto; width:100%; height:636px;">
</div>
<div class="item">
<img class="img-responsive" alt="Second slide" data-src="holder.js/900x500/auto/#666:#444/text:Second slide" src="img/pic1.png" style="margin-left:auto; margin-right:auto; width:100%; height:636px;">
</div>
<div class="item active">
<img class="img-responsive" alt="Third slide" data-src="holder.js/900x500/auto/#555:#333/text:Third slide" src="img/pic1.png" style="margin-left:auto; margin-right:auto; width:100%; height:636px;">
</div>
<div class="item">
<img class="img-responsive" class="img-responsive" alt="Forth slide" data-src="holder.js/900x500/auto/#666:#444/text:Forth slide" src="img/pic1.png" style="margin-left:auto; margin-right:auto; width:100%; height:636px;">
</div>
</div>
<a data-slide="prev" href="#carousel-example-generic" class="left-arrow">
<div class="halfCircleLeft"><span style="padding:15px 0px 0px 5px;" class="glyphicon glyphicon-chevron-left"></span></div>
</a>
<a data-slide="next" href="#carousel-example-generic" class="right-arrow">
<div class="halfCircleRight"><span style="padding:15px 0px 0px 0px;" class="glyphicon glyphicon-chevron-right"></span></div>
</a>
</div>
<!-- END Carousel -->
Something like this >>
http://postimg.org/image/k7c5hl7yx/
What you are trying to add is called a caption. Try the following on each slide you want to add to:
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
Related
How can i arrange the carousel control arrows from left and right end of screen in Bootstrap 4.1.1?
I tried following code but didn't work.
.carousel-control .icon-prev{
left: 5px
}
.carousel-control .icon-next{
right: 5px
}
This is my HTML code for the carousal.
<div id="slider3" class="carousel slide mb-5 carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#slider3" data-slide-to="0"></li>
<li data-target="#slider3" data-slide-to="1"></li>
<li data-target="#slider3" data-slide-to="2"></li>
<li data-target="#slider3" data-slide-to="3"></li>
<li data-target="#slider3" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="img/car1.jpg" alt="First Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/car2.jpg" alt="Second Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/car3.jpg" alt="Third Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/car2.jpg" alt="Fourth Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/car3.jpg" alt="Fifth Slide">
</div>
</div>
<!-- CONTROLS -->
<a href="#slider3" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#slider3" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
Try with following code, your current approach is also not bad but expensive indeed:
.carousel-control-next,
.carousel-control-prev {
width:20px;
}
Explanation: You trying adjust inside element of next prev buttons. But button is icon container which had flex with align-items:center, that's why it is not applying your .carousel-control .icon-prev positions.
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>
before I used bootstrap.min.css but now I should use bootstrap v3.2.0.css because of Bootstrap Thumbnail Slider, but when i use Bootstrap 3.2.0 , my top menu not work, how i can have both of them? Bootstrap 3.2.0 Thumbnail Slider and top menu; in bow is my top menu that work with bootstrap.min.css but not work with bootstrap v3.2.0.css
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav" id="top-nav">
<li>home</li>
<li>about</li>
<li>portfolio</li>
<li>contant</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
I find the problem, i change the code of Bootstrap Thumbnail Slider, and it work with bootstrap.min.css
<div class="container">
<div class="span8">
<h1>Bootstrap Thumbnail Slider</h1>
<div class="well">
<div id="myCarousel" class="carousel slide">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row-fluid">
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="span3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
</div><!--/row-fluid-->
</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-->
</div>
</div>
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
.carousel-control {
left: -12px;
}
.carousel-control.right {
right: -12px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
.carousel-indicators li {
background: #c0c0c0;
}
.carousel-indicators .active {
background: #333333;
}
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 -->
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;
}