I essentially copied the captioned carousel example from the Bootstrap 4 documentation: https://v4-alpha.getbootstrap.com/components/carousel/
However, I cannot seem to achieve a carousel that only has text, where the text is centered...
Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel" class="carousel slide bg-chrome" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div data-slide-no="0" class="carousel-item item active">
<div class="carousel-caption d-none d-md-block">
<h1>My Carousel</h1>
...is not centered!
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous slide</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next slide</span>
</a>
</div>
Aside from some minor styling, this is what the above code renders:
As you can see, the text is not centered! Per some other questions I found here on StackOverflow, I tried:
Setting .carousel-caption to have margin: 0 auto
Setting .carousel-caption to have position: relative
Setting .carousel-caption to have text-align: center
Wrapping each .carousel-item in a .container and styling to achieve a centered text
None of the solutions have worked, so I ask you all; how can I achieve a horizontally centered carousel with only captions?
Edit: JSFiddle
As of BS alpha 6, the .carousel-item is display:flex; which limits some of the positioning you can do with the contents of carousel-item. This is a known issue: https://github.com/twbs/bootstrap/issues/21611
So, one option is to change the active .carousel-item is display:block;. Then you can simply use text-center to center the contents.
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{
display:block;
}
<div class="carousel-inner" role="listbox">
<div class="carousel-item active text-center p-4">
<h1>My Carousel</h1> ...is centered!
</div>
<div class="carousel-item text-center p-4">
<h1>2 Carousel</h1> ...is centered!
</div>
<div class="carousel-item text-center p-4">
<h1>3 Carousel</h1> ...is centered!
</div>
</div>
http://www.codeply.com/go/ja3h44A7bQ
Another option is to simply use the flexbox utils, and change the direction to flex-column. Then align-items-center can be used...
<div class="carousel-inner text-white" role="listbox">
<div class="carousel-item active align-items-center flex-column p-4">
<h1>My Carousel</h1> ...is centered!
</div>
<div class="carousel-item align-items-center flex-column p-4">
<h1>2 Carousel</h1> ...is centered!
</div>
<div class="carousel-item align-items-center flex-column p-4">
<h1>3 Carousel</h1> ...is centered!
</div>
</div>
http://www.codeply.com/go/9I7voUaDUi
In both cases I've removed the carousel-caption. The carousel-caption should only be used if you want the text to overlay a slide image. There's no reason to use the 'carousel-caption' if there is no image, just put the content inside carousel-item.
Also see: Vertically center text in Bootstrap carousel
It looks like it's a combination of the position:relative; you were adding on the .carousel-caption and the absence of a 'height' value for the .carousel-item
Here is a working fiddle: https://jsfiddle.net/z0cxhgc1/1/
Update:
Bootstrap's default carousel automatically takes on the height of the image, and then uses
position: absolute;
right: 15%;
bottom: 20px;
left: 15%;
to style the caption over the lower center of the image. without the image's natural height, everything else in the carousel is positioned absolutely, and since the carousel itself has a height of 0, it was showing up 20px above the bottom -- or 20px above and outside of the carousel.
your position: relative; style got it showing again because putting it back in the document flow gave the slide element a natural height again, but was conflicting with the other styles in terms of positioning.
Short answer:
Add some height to the carousel item so that it does not disappear (since you are not using an image):
.carousel-item{
height:200px;
}
Remove:
.carousel-caption {
position: relative;
text-align: center;
}
More detailed answer:
I believe that your answer can be found here. Normally, your captions should be centred, but if not then try adding "text-center" to your "carousel-caption". That should fix it.
An example solution using Bootstrap 4 Alpha 6 showing:
the usage of d-* for hiding and showing text on different device screens and adjusting the display type i.e d-md-block means set the display to block on medium devices
the alignment of text
.bg-chrome {
background: blue;
}
.carousel-item{
height:200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div id="carouselIndicators" class="carousel slide bg-chrome" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselIndicators" data-slide-to="1"></li>
<li data-target="#carouselIndicators" data-slide-to="2"></li>
<li data-target="#carouselIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="carousel-caption d-block">
<h3>A carousel caption with text on all device screens and aligned to the center</h3>
</div>
</div>
<div class="carousel-item">
<div class="carousel-caption d-block text-left">
<h3>A carousel caption with text aligned to the left</h3>
</div>
</div>
<div class="carousel-item">
<div class="carousel-caption d-block text-right">
<h3>A carousel caption with text aligned to the right</h3>
</div>
</div>
<div class="carousel-item">
<div class="carousel-caption d-none d-md-block">
<h3>A carousel caption with hidden text on small devices</h3>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous slide</span>
</a>
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next slide</span>
</a>
</div>
I updated your fiddle.
Left and right 15% PLUS text centered let the heading confuse
https://jsfiddle.net/jchp6bg9/10/
Added
left:0%;
right: 0%;
to your css code
For carousel with fixed height (e.g.: 400px) this works for me:
.carousel-caption {
position: relative;
left: 0;
padding-top: 150px; // Set relative to your carousel height
}
.carousel-caption{
background-color: rgb(209, 209, 154);
top: 30%;
height: auto;
max-height: 120px;
}
Related
I am trying to create a responsive Bootstrap carousel with a static hero header that stays the same when the carousel images change. The hero header has to be left-aligned to a responsive bootstrap container element as well as vertically centered inside the bootstrap carousel. I have tried searching for solutions but have come up empty. I have also tried using an "overlay" element with position: absolute, however, that doesn't allow me to left-align the hero header inside the bootstrap container element nor does it allow me to vertically align the hero header to the bootstrap carousel. This is what I want it to look like.
This is what I want it to look like.
This is what I have so far.
.heroOverlay {
z-index: 12;
position: absolute;
/* takes div out of document flow */
top: auto;
/* The distance between the div with the top of document */
left: 0px;
/* Make the div full width */
right: 0px;
/* Make the div full width */
margin: auto auto 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<header>
<div class="heroOverlay">
<div class="container">
<div class="jumbotron text-right bg-transparent">
<h1 class="display-4">Chinese Take-In</h1>
<p class="lead">Take-in Ingredients, Take-out Memories</p>
<hr class="my-4">
<a class="btn btn-primary btn-lg" href="/booking.html" role="button">Book Now</a>
</div>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Asian food on table">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Stirfry being cooked in a wok">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Ramen noodles in bowl">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- JQuery & JQuery UI -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<!-- Bootstrap 4 JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Any help would be greatly appreciated. Thanks!
Welcome to stack overflow...
Check out the sample code
for smaller sizes, you may have to spell out the exact size of the fonts... similarly for very large screens, best for you to spell out the exact size of the fonts... because the fonts with units vw are dynamic with regards to size. Media queries will help you take care of these extreme cases.
HTML:
.heroOverlay {
z-index: 12;
position: absolute;
top: 30%;
left: 0px;
right: 0px;
margin: auto auto 0 10%;
width: 80%;
background: rgba(240, 255, 255, .5);
padding: 30px 0;
}
.heroOverlay h1 {
font-size: 5.5vw;
}
.heroOverlay p {
font-size: 3vw;
}
.heroOverlay a {
font-size: 2vw;
padding: .5vw 1vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="heroOverlay">
<div class="container">
<div class=" text-left bg-transparent">
<h1 class="display-4">Chinese Take-In</h1>
<p class="lead">Take-in Ingredients, Take-out Memories</p>
<a class="btn btn-primary btn-lg" href="/booking.html" role="button">Book Now</a>
</div>
</div>
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Asian food on table">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Stirfry being cooked in a wok">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Ramen noodles in bowl">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- JQuery & JQuery UI -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<!-- Bootstrap 4 JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
I try to build a responsive one page using bootstrap that scrolls horizontally and every mouse scroll will switch to next page, best way i found so far to achieve this is to use carousel. The problem is that my carousel skips "pages". is there any way to restrict mouse scroll event to move only 100vw per scroll? or any other creative ideas how to approach this kind of build?
Any help will be much appreciated.Thanks in advance
This what i have so far:
https://codepen.io/xxannxx/pen/mxJWae
Html:
<div id="myCarousel" 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">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="aquamarine">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="blue"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="pink">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="purple"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="yellow">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="orange"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</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>
</body>
Css:
.aquamarine {
width: 50vw;
height: 100vh;
background-color: aquamarine;
}
.blue {
width: 50vw;
height: 100vh;
background-color:skyblue;
}
.pink {
width: 50vw;
height: 100vh;
background-color:lightpink;
}
.purple {
width: 50vw;
height: 100vh;
background-color:plum;
}
.yellow {
width: 50vw;
height: 100vh;
background-color:yellow;
}
.orange {
width: 50vw;
height: 100vh;
background-color:orange;
}
.right.carousel-control, .left.carousel-control {
display: none;
}
.carousel-indicators li {
visibility: hidden;
}
JS:
$('#myCarousel').carousel({
interval: false
});
$('#myCarousel').bind('mousewheel', function(e)
{
if(event.wheelDelta>0) {
$(this).carousel('next');
}else if(event.wheelDelta<0){
$(this).carousel('prev');
}
}
);
I'm trying to display a canvas, specifically a Granim.js canvas, between a Div background image and the other contents of the Div.
So, there would be a background image, then the Granim.js canvas with the opacity turned down on top of that and then text, gallery, button etc. on top of that.
Here is the code for the Div I'm working with:
<section class="bg-image" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter">
<div class="container" id="carousel">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Portfolio</h2>
<hr class="light">
<p>Take a look at my portfolio on Béhance!<br>It contains my freelance projects as well as some of the work I did for X and Y.</p>
<!-- Carousel Card -->
<div class="card card-raised card-carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div 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="img/gallery/bg2.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>UI/UX Design for Web & Mobile</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg3.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Online Advertising</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg4.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Corporate Identity & Branding</h4>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
</a>
</div>
</div>
</div>
<!-- End Carousel Card -->
<hr class="invis">
Visit Portfolio
</div>
</div>
</div>
</div>
</div>
</section>
CSS for div with bg image:
.bg-image {
color: #fff;
background-image: url(../img/portfolio_bg2.jpg);
background-position: center;
}
and here is the code to add the canvas:
<canvas id="granim-canvas"></canvas>
The canvas does work in isolation elsewhere on the page so there's no problem there. It's just layering things the way I want to that's the issue.
Here's the code for the Granim.js canvas just in case it helps:
## How to use
```html
<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>
<!-- Call the script -->
<script src="granim.min.js"></script>
<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
element: '#granim-canvas',
name: 'granim',
opacity: [0.7, 0.7],
states : {
"default-state": {
gradients: [
['#834D9B', '#D04ED6'],
['#1CD8D2', '#93EDC7']
]
}
}
});
</script>
First, sorry about my english.
I want to do a slider with transitions like this http://pumamaritimeservices.com/beta/ but with bootstrap, i did before a carousel but i don't know if i can do transitions like the first link.
My new slider is the next: http://pumamaritimeservices.com/beta3/
My code is:
<div style="height: 90%;" 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 hidden-xs" style="background-image:url('img/slider/01.jpg');"></div>
<div class="fill show-xs" style="background-image:url('img/slider/01_corta.jpg');"></div>
<div class="carousel-caption">
<h2 class="pull-left"><span style="background-color: #B9A004; padding: 5px 15px;">Cargo Surveys</span><br /><br /><span style="background-color: #B9A004; padding: 5px 15px; font-size: 20px">LEARN MORE</span></h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill hidden-xs" style="background-image:url('img/slider/02.jpg');"></div>
<div class="fill show-xs" style="background-image:url('img/slider/02_corta.jpg');"></div>
<div class="carousel-caption">
<h2 class="pull-left"><span style="background-color: #012540; padding: 5px 15px;">Containers and Cargo in Containers Surveys</span><br /><br /><span style="background-color: #012540; padding: 5px 15px; font-size: 20px;">LEARN MORE</span></h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill hidden-xs" style="background-image:url('img/slider/03.jpg');"></div>
<div class="fill show-xs" style="background-image:url('img/slider/03_corta.jpg');"></div>
<div class="carousel-caption">
<h2 class="pull-left"><span style="background-color: #B81818; padding: 5px 15px;">More than 680 Lloyd’s Agents around the world</span></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>
</div>
Can I do any transition in my existing slider? I really need help with this, i don't want the tipical fade in and fade out, i want enter the image at the left and the text too, and it out at right
you can find more examples and tutorial from this links.
tutorialrepublic
and
mobirise
I want to use custom carousel-indicators. I want to use three divs for the indicators of col-md-4 class. My code is:
<div class="row carousel-indicators">
<div style="background-color:red;" class="col-md-4" data-target="#homeCarousel" data-slide-to="0" class="active">
First
</div>
<div style="background-color:green;" class="col-md-4" data-target="#homeCarousel" data-slide-to="1">
Second
</div>
<div style="background-color:blue;" class="col-md-4" data-target="#homeCarousel" data-slide-to="2">
Third
</div>
</div>
But, it is not working properly. On clicking any of the tab, the div collapses.
Please help me to solve this.
Edit 1:
The full code is:
<div class="container-fluid">
<div id="homeCarousel" class="carousel slide" data-ride="carousel">
<div class="container">
<div class="row carousel-indicators">
<div style="background-color:red;" class="col-md-4" data-target="#homeCarousel" data-slide-to="0" class="active">
First
</div>
<div style="background-color:green;" class="col-md-4" data-target="#homeCarousel" data-slide-to="1">
Second
</div>
<div style="background-color:blue;" class="col-md-4" data-target="#homeCarousel" data-slide-to="2">
Third
</div>
</div>
</div>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img style="width:100%;height:90%;" src="https://www.google.com/logos/doodles/2014/world-cup-2014-51-5668472285560832.2-hp.gif">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img style="width:100%;height:90%;" src="http://i.forbesimg.com/media/lists/companies/google_416x416.jpg">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img style="width:100%;height:90%;" src="http://i.forbesimg.com/media/lists/companies/google_416x416.jpg">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#homeCarousel" 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="#homeCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The problem was that the Carousel JS was appending the class of the buttons with active which overrides its width to 12px and height to 12px. Try the below code.
.carousel-indicators .col-md-4.active {
width: 33.33%;
height: auto;
}
JSfiddle
You are close! Since Bootstrap uses media queries, each particular class applies to a certain screen size. Relevant part of Bootstrap documentation:
http://getbootstrap.com/css/#grid-options
The above link describes behavior at each screen size. In your code, you only specify the col-md-4 class; by adding col-sm-4 col-lg-4, you should cover all use cases.
Updated Fiddle: http://jsfiddle.net/dmkzu8eL/2/
EDIT: So, I misread the question initially. Essentially, the .active class is appended to the carousel indicator corresponding to the active item in the carousel. This class specifies a width, height, and margin in terms of px, which is why it appears to collapse. Using the following CSS, we can stop the div from collapsing fully and hiding the text within:
#homeCarousel .carousel-indicators div.active
{
width:initial;
height:initial;
margin:initial;
}
With that said, it doesn't stop the .active div from shrinking down to the size of the text contained within, as you still would like to indicate to the user the position of the carousel, correct?
Updated Fiddle #2:http://jsfiddle.net/dmkzu8eL/12/