I try to make teal rectangle move to top of carousel. I had give my carousel position relative and my teal rectangle position absolute and top="0", but it doesn't work well. my teal rectangle always move to top of my browser. what did I miss?
.rectangle1 {
width: 100%;
height: 70px;
background-color: grey;
}
.rectangle2 {
width: 100%;
height: 200px;
background-color: teal;
position: absolute;
top:0;
}
.rectangle3 {
width: 100%;
height: 400px;
background-color: lightblue;
}
.parent-carousel {
position: relative;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="rectangle1"></div>
<div class="rectangle3"></div>
<div class="parent-carousel">
<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>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1649825303952-84e1c9832cfd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1559068285-4e4a5466e09a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1104&q=80" alt="Second slide">
</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>
</div>
<div class="rectangle2"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Try putting the div.rectangle2 inside of div.parent-carousel and also setting z-index: 1 for it to remain visible.
The absolute positioned element is relative to its closest parent element with position: relative (or <body>).
Related
I have a generic bootstrap v3.7 carousel and I'm trying to pull it up over the content above it like this
This is done with a margin-top: -50px; on the teal div. However, the hidden overflow property of the carousel is causing the top to be cut off above the top of the div, so I cannot achieve this overlay design. My attempts to modify the CSS have only broken the carousel. Is it possible to do this?
The margin-top should be applied the div containing .carousel, perhaps you are using it on the div with the calls carousel;
Following code snippet is what you're trying to achieve:
.aboveCarousel {
height: 300px;
background: magenta;
}
.container {
margin-top: -50px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class='aboveCarousel'> </div>
<div class="container">
<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">
<div class="item active">
<img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
.mainIDv
{
height:300px;
width:400px;
padding:5px;
margin: 8px auto 8px auto;
}
.ImgDisp{
background-color:cyan;
height:100%;
width:100%;
}
.carousel-inner > .carousel-item > img {
width: 100% !important;
height: 100% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="mainIDv">
<div class="ImgDisp">
<div id="carouselSection" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#carouselSection" data-slide-to="0"></li>
<li data-target="#carouselSection" data-slide-to="1"></li>
<li data-target="#carouselSection" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Los Angeles" >
<div class="carousel-caption">
<h3>Tomorrow land </h3>
<p>We had good friends here!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Chicago" style="width: 100%; height: 100%;">
<div class="carousel-caption">
<h3>HappyLand</h3>
<p>Thank you!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
I tried to create a slide show using carousel of bootstrap 4. I used the carousel code section within a div block. But my problem is height of images used within the carousel is not matching with the height of the div holding it. I tired every solutions suggested here, but none works for me.
here is my code.
<div class="ImgDisp">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/Img12.png" alt="Los Angeles" >
<div class="carousel-caption">
<h3>Tomorrow land </h3>
<p>We had good friends here!</p>
</div>
</div>
<div class="carousel-item">
<img src="Images/Img4.jpg" alt="Chicago" style="width: 100%; height: 100%;">
<div class="carousel-caption">
<h3>HappyLand</h3>
<p>Thank you!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
I want images with height and width 100% matching with the div ImgDisp.
I tired overriding the styles defined for components like carousel, carousel-inner, carousel-item. but only width is working for me. Even tried to change the image styles.
.carousel-inner > .carousel-item > img {
width: 100% !important;
height: 100% !important;
}
I don't know why, somebody suggest a solutions. Thanks in advance.
you are overriding your img height by 10% in this style
.carousel-inner > .carousel-item > img {
width: 100% !important;
height: 10% !important;
}
change it to 100%.
I would like to add a top-right button on each slide that would be over the carousel-control link.
How can I do that?
Below you can see that the buttons are under the carousel-control
.myButton {
position: absolute;
top: 0;
right: 0;
z-index: 999; /*not working */
}
.carousel {
height: 400px;
}
.carousel-inner {
width: 100%; /*this must stay */
height: 100%; /*this must stay */
/* z-index: 1; //this make the carousel-control unclickable */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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 text-center">
<button type="button" class="myButton">Btn</button>
Slide 1
</div>
<div class="item text-center">
<button type="button" class="myButton">Btn</button>
Slide 2
</div>
<div class="item text-center">
<button type="button" class="myButton">Btn</button>
Slide 3
</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>
Place button tag with class "myButton" before the div tag with class "item active text-center". I changed it for Btn1 in the below code.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.myButton {
position: absolute;
top: 0;
right: 0;
z-index: 999; /*not working */
}
.carousel {
height: 400px;
}
.carousel-inner {
width: 100%; /*this must stay */
height: 100%; /*this must stay */
/* z-index: 1; //this make the carousel-control unclickable */
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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">
<button type="button" class="myButton">Btn1</button>
<div class="item active text-center">
Slide 1
</div>
<!-- <button type="button" class="myButton">Btn2</button> -->
<div class="item text-center">
<!-- <button type="button" class="myButton">Btn2</button> -->
Slide 2
</div>
<!-- <button type="button" class="myButton">Btn3</button> -->
<div class="item text-center">
<!-- <button type="button" class="myButton">Btn3</button> -->
Slide 3
</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>
</html>
u can set inner carousels z-index to higher than link to bring it to front
then to make links clickable set the inner carousels "pointer-events" to none this will make the carousel to transfer the click event to the element behind it, then to make the button clickable you should set buttons pointer-events to auto, remember you should set pointer-events property of every children of carousel to auto.
jsfiddle demo
.myButton {
position: absolute;
top: 0;
right: 0;
z-index: 999; /*not working */
pointer-events: auto;
}
.carousel {
height: 400px;
}
.carousel-inner {
pointer-events: none;
z-index:10;
width: 100%; /*this must stay */
height: 100%; /*this must stay */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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 text-center">
<button type="button" class="myButton">Btn</button>
Slide 1
</div>
<div class="item text-center">
<button type="button" class="myButton">Btn</button>
Slide 2
</div>
<div class="item text-center">
<button type="button" class="myButton">Btn</button>
Slide 3
</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>
Z-index only works for positioned elements on the same level as each other. you should set it on carousel-inner class
.carousel-inner{
z-index:999;
}
Edit: Try like this
<html>
<link type="text/css" id="dark-mode" rel="stylesheet" href="">
<style type="text/css" id="dark-mode-custom-style"></style>
<head>
<style>
.carousel-inner .item .myButton {
position: absolute;
top: 0;
right: 0;
}
.carousel {
height: 400px;
}
.carousel-inner {
width: 100%; /*this must stay */
height: 100%; /*this must stay */
}
.carousel-inner .item {
z-index: 9999; /*not working */
}
.carousel-inner .carousel-control {
z-index: 990 !important;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<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=""></li>
<li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item text-center">
<button type="button" class="myButton">Btn</button>
Slide 1
</div>
<div class="item text-center active">
<button type="button" class="myButton">Btn</button>
Slide 2
</div>
<div class="item text-center">
<button type="button" class="myButton">Btn</button>
Slide 3
</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>
<script type="text/javascript">
</script>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
</body>
</html>
I know your feeling and it also happen to me, until this moment i don't have the ideal answer. so i made and alternate solution, which to make the carousel height smaller.
i know my alternate solution will not fully answered your question, but hopefully it will help you in some way.
.myButton{
position:absolute;
right:0px
}
.carousel-control{
margin: auto auto;
height:100px;
width:100px;
background:#ff0000 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<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">
<div class="item active">
<button type="button" class="myButton" onclick="alert('slide1')">Btn</button>
<img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<button type="button" class="myButton" onclick="alert('slide2')">Btn</button>
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
I am trying to change the Bootstrap Carousel indicator align to vertical and locate them in the right of the page.
As you can see at following demo (the demo is on Bootply, I am not sure why the indicators are still looks like horizontal at JS Fiddle).
Working Demo
As you can see from the demo I have set the right: 5%; on .carousel-indicators but thy are rendering almost at the middle of the Carousel! What am I doing wrong?
.carousel-indicators {
background-color:#000;
position: absolute;
bottom: 200px;
z-index: 15;
width: 30px;
margin-left: 20px;
list-style: none;
text-align: center;
right: 5%;
}
.carousel-indicators li{
display: block;
width: 10px;
height: 10px;
margin-bottom: 10px;
}
.carousel-indicators .active {
width: 12px;
height: 12px;
margin-bottom: 10px;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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://placehold.it/1920x400/333/333" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://placehold.it/1920x400/333333/333333" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://placehold.it/1920x400/333/333" alt="...">
<div class="carousel-caption">
...
</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>
Left component is set to 50% in bootstrap css. you need to overrride it.
give your indicators left 95% that should fix your problem.
left:95%
set left:inherit because the lib has a default setting you must override.
Attempting to resize the browser and i cannot seem to keep the div "stickyslider" within the page when i shrink past the edge of the "green".
yes i know its the padding, but is there anyway to put the slider in that position without it resizing it until both elements (menu and slider) are the full width
I am new to this so my code is fairly disgusting.
but as you can tell the slider, drops down.
any critique on how i'm doing things is much appreciated.
a{
color: black;
}
.menu{
display: inline-table;
padding-top: 15%;
max-width: 150px;
}
.stickyslider{
padding-top: 15%;
padding-right: 25%;
padding-bottom: 15%;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<div class="container">
<nav class="menu">
<a><u>name</u></a><br>
<a>123 fake street</a><br>
<a>+61 4 00000000</a><br>
<br>
<br>
<a></a><br>
<a></a><br>
<a></a><br>
<br>
<a>Example1</a><br>
<a>Example2</a><br>
<a>Example3</a><br>
<br>
<br>
<a>Example4</a><br>
<a>Example5</a><br>
<a>Example6</a><br>
<a>Example7</a><br>
<a>Example8</a><br>
<a>Example9</a><br>
</nav>
<div class="stickyslider">
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.dailymobile.net/wp-content/uploads/wallpapers/android-640x480-wallpapers/android-640x480-wallpaper-4582.jpg" alt="architecture">
</div>
<div class="item">
<img src="http://www.dailymobile.net/wp-content/uploads/wallpapers/android-640x480-wallpapers/android-640x480-wallpaper-4582.jpg" alt="more architecture">
</div>
<div class="item">
<img src="http://www.dailymobile.net/wp-content/uploads/wallpapers/android-640x480-wallpapers/android-640x480-wallpaper-4582.jpg" alt="heaps architecture">
</div>
<div class="item">
<img src="http://www.dailymobile.net/wp-content/uploads/wallpapers/android-640x480-wallpapers/android-640x480-wallpaper-4582.jpg" alt="architecture">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</body>
</html>
.stickyslider{
padding-top: 15%;
padding-right: 25%;
padding-bottom: 15%;
max-width: 20%;
float: right;
}
Adding a max width is what worked for this code block.