When I get to the xs (Phone version) and press the Toggle Menu button it breaks the whole layout and the carousel rides on top of everything.
This is the Simple Sidebar
Simple Sidebar - Start Bootstrap Template
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
RFA
</li>
<li>
BIO
</li>
<li>
Contact
</li>
<li>
Cadre
</li>
<li>
Store
</li>
<li>
Conferences
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-lg-12">
<h1 class="col-xs-12">Robin Fogarty and Associates</h1>
<img src="images/RFA_circles.png" alt="RFA" class="img-responsive rfa" title="Robin Fogarty and Associates">
<p>For the past 15 years Robin Fogarty and Associates has been a publisher and leading experts on staff development design for Skylight Publishing .</p>
Toggle Menu
</div>
</div>
</div>
</div>
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"> </li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="images/Rote&Spatial_color.png" alt="First slide image" class="center-block">
<div class="carousel-caption">
<h3>First slide Heading</h3>
<p>First slide Caption</p>
</div>
</div>
<div class="item"><img src="images/WalikingwithDaisy_color.png" alt="Second slide image" class="center-block">
<div class="carousel-caption">
<h3>Second slide Heading</h3>
<p>Second slide Caption</p>
</div>
</div>
<div class="item"><img src="images/Poster.png" alt="Third slide image" class="center-block">
<div class="carousel-caption">
<h3>Third slide Heading</h3>
<p>Third slide Caption</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel1" 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="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
<!-- /#page-content-wrapper -->
<!-- /#wrapper -->
<!-- jQuery -->
<!-- <script src="js/jquery.js"></script> -->
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script> <!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
Wrap your carousel in a row, apply this CSS
.carousel-wrap{
margin-top: 50px;
}
CODEPEN DEMO
Related
is it possible to make Bootstrap 4 Carousel to play ONLY on hover? Like normally it's a still image, but on mousehover it starts to cycle the carousel and on mouseout it pauses.
slider.html
<div id="carousel-example-generic" class="carousel slide carousel-fade slider slideInUp"
data-ride="carousel">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<div class="tab-section">
<div class="user">
<ul class=" carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active wow slideInUp " data-wow-delay=".1s">
<a href="" class="transition-fast">
<span class="count">01</span>
<span class="text">
Lorem Lopsun
</span>
</a>
</li>
<li data-target="#carousel-example-generic" data-slide-to="1" class=" wow slideInUp"
data-wow-delay=".2s">
<a href="" class="transition-fast">
<span class="count">02</span>
<span class="text">
Lorem Lopsun
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-5 col-md-6 wow slideInRight" data-wow-delay="1s">
<div class="carousel-inner wow slideInUp" data-wow-delay="2s" role="listbox">
<div class="item active">
<img src="assets/img/first-01.png" alt="">
</div>
<div class="item">
<img src="assets/img/first-02.png" alt="">
</div>
</div>
</div>
</div>
</div>
script.js
$('#carousel-example-generic').hover(function(){
$("#carousel-example-generic").carousel('cycle');
},function(){
$("#carousel-example-generic").carousel('pause');
});
First disable the default behaviour of the carousel to stop on hover by putting setting the data-pause to false
id="carousel-example-generic" class="carousel slide carousel-fade slider slideInUp" data-pause="false"
Use the following js to manage the hover behaviour
$('.carousel').carousel({
interval: 2000
})
$('.carousel').carousel('pause') ;
$('.carousel').hover(function(){
$('.carousel').carousel('cycle') ;
}) ;
$('.carousel').mouseleave(function(){
$('.carousel').carousel('pause') ;
});
I cannot get the Carousel Controls to work in Bootstrap v4.0.0-beta. Kind of strange as the Indicators work properly.
Anybody with the same problem? Bellow is the code for the Carousel implementation.
Any help would be highly appreciated.
Thanks!
<div id="my-carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view hm-black-light">
<!-- CONTENT -->
<div class="full-bg-img"></div>
</div>
<div class="carousel-caption overlay">
<div class="flex-center animated fadeIn">
<!-- DETAIL -->
</div>
</div>
</div>
<div class="carousel-item">
<div class="view hm-black-light">
<!-- CONTENT -->
<div class="full-bg-img"></div>
</div>
<div class="carousel-caption overlay">
<div class="flex-center animated fadeIn">
<!-- DETAIL -->
</div>
</div>
</div>
</div>
<!--Controls-->
<a class="carousel-control-prev" href="#my-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#my-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I had the same problem here. All I did is to copy these plugins from the Bootstrap's Website. Controls are working properly now.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
this is my 1st page where logo and carousel both are in the top section of the pageI was trying to put a responsive logo over carouser from bootstrap. Logo was over the carousel but it does not shows the responsive behavior. I used the code from www.w3schools.com i think its somewhere in the carousel class in bootstrap.min.css but cant locate it. If someone has work on it plz leave the comment.
html:
<div id="myCarousel" class="carousel slide" data-ride="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>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="overlay">
<!--<img src="images/logo.png" class="img-responsive" alt="">-->
</div>
<div class="item active">
<img src="images/1bg.jpg" alt="">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/11bg.jpg" alt="">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/111bg.jpg" alt="">
<div class="carousel-caption">
</div>
</div>
<!-- Left and right controls -->
<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>
</div>
</div>
logo is in overlay div.I want logo to be responsive
.overlay {background: url('../images/logo.png') top left no- repeat;position: absolute;top: 30px;
left: 600px;width: 100%;height: 100%;z-index: 10;pointer-events: none;}
Use percentage instead of pixel in overlay class.
For Example:
.overlay {background: url('../images/logo.png') top left no- repeat;position: absolute;top: 3%;left: 50%;width: 100%;height: 100%;z-index: 10;pointer-events: none;}
change top and left percentages value as you need.
So I wish to target slides with the indicators in Twitter-Bootstrap-3 but having some difficulty in doing so.
Here is my code:
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active" data-id="1">
<img src="/assets/example/bg_suburb.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p><small>This is an example layout with carousel that uses the Bootstrap 3 styles.</small></p>
</p></div>
</div>
</div>
<div class="item" data-id="2">
<img src="http://lorempixel.com/1500/600/abstract/1">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<div class="item" data-id="3">
<img src="http://placehold.it/1500X500">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control left" href="javascript:;" data-target="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="javascript:;" data-target="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<script>
$('.carousel-indicators li').click(function(e){
e.stopPropagation();
$('#myCarousel').carousel($(this).data('slide-to')-1);
});
</script>
I need to change the indicators to words of my choosing and also add captions to each slide not siting on top of the slide so the indicators to be underneath the carousel with the caption underneath the indicators too. I have tried all manners of things but getting nowhere.
I can't make my slideshow automatically scroll through all of my pictures. It scrolls through three pictures, but I have six. When I click on the arrows, it scrolls through all of the pictures, but it doesn't scroll through all of the pictures automatically. It works when the site isn't live, but it doesn't work in Chrome when it is live. Here is my code..
<div id="carousel-example-generic" class="carousel-inner" 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>
<div class="carousel-inner">
<div class="item active">
<img src="img/landscape.jpg" alt="landscape design and installation">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/patio.jpg" alt="stonework">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/patio2.jpg" alt="full-service">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/firepit.png" alt="Fire Pit">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/deck.png" alt="deck">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/gardens.png" alt="deck">
<div class="carousel-caption"></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>
</div>
You need to add more data-targets:
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
Since you have 6 slides you need to to have 6 data targets (starting with 0)