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>
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>
reduce bottom image heightI am student , am trying to use Bootstrap Carousel Plugin, And am using w3school carousel example [https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h] so I need to increase the bottom height Carousel Image buttons it's too low, can any one help me. i have attached a photo below
here is my tried code
<section id="intro" class="clearfix" style="
padding: 80px 0 60px 0;
padding-top: 80px;
padding-right: 0px;
padding-bottom: 60px;
padding-left: 0px;
">
<div class="container d-flex h-100">
<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>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/dog2.jpg" alt="Los Angeles" class="img-fluid" alt="Responsive image">
</div>
<div class="item">
<img src="img/duffy-brook-350228-2000x1333.jpg" alt="Chicago" class="img-fluid" alt="Responsive image">
</div>
<div class="item">
<img src="img/dog2.jpg" alt="New york" class="img-fluid" alt="Responsive image">
</div>
</div>
<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>
</section>
You need to add top:50% to carousel-indicators
.carousel-indicators {
top: 50%;
}
<!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.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>
</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">
<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>
</body>
</html>
If you want to reduce the height of your carousel, you can specify the height as per your requirement
.carousel-inner {
height: 50vh!important
}
.carousel-inner .item.active,
.carousel-inner .item {
height: 50vh!important;
}
.item img {
object-fit: cover;
width: 100%!important;
height: 100% !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.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>
</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">
<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>
</body>
</html>
Your ol has bottom: 10px;
Change the value of the bottom attribute to change the vertical position
Add the following CSS
CSS
ol.carousel-indicators {
bottom: 0;
}
HTML
<ol style="bottom: 0;" class="carousel-indicators">
See example here
<!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.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>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
<!-- 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>
<!-- 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 have some experience with bootstrap and I want to create image slider by using:
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
https://startbootstrap.com/template-overviews/business-casual/
Everything is fine with the examples. The problem arise if I want to use different sized images:
width is OK
height is changing depending to the image.
I found many similar topics but none of them worked for me.
Is it possible to have fixed ratio - nevertheless of the photo size? Image streching or even "croping" the image only by using css?
Code
<!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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
</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>
</body>
</html>
For some websites I had to make a trick for this kind of issue.
I just remove the img tags, and set it to the item background.
Bootply : http://www.bootply.com/AVNXeL4Jtw
HTML:
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-image: url(//placehold.it/1024x700) ">
</div>
<div class="item" style="background-image: url(//placehold.it/100x100) ">
</div>
<div class="item" style="background-image: url(//placehold.it/1024x700) ">
</div>
<div class="item" style="background-image: url(//placehold.it/200x200) ">
</div>
</div>
CSS:
.carousel-inner .item{
height:500px;
background-size:cover;
background-position: center center;
}
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.
I need the carousel content to be in the centre of the page. In chrome the alignment is always left no matter what I tried including text-align:centre
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>caro homepage</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel-inner{
width:auto;
height:200px;
max-height:200px !important;
}
.carousel-content {
color:black;
display:flex;
text-align:center;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000" data-pause="hover" >
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-content">
<div style="text-align:center">
<h3>#1</h3>
<p>The first Message.</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div style="text-align:center">
<h3>#2</h3>
<p>The 2nd Message.</p>
</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>
</body>
</html>
Safari is behaving as expected. Haven't checked IE. Can you please help?
What you need to do instead of using text-align: center on the divs inside your carousel-content divs, is to use margin: 0 auto.
I think the following code is what you want :)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>caro homepage</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel-inner{
width:auto;
height:200px;
max-height:200px !important;
}
.carousel-content {
color:black;
display:flex;
text-align:center;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000" data-pause="hover" >
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-content">
<div style="margin: 0 auto">
<h3>#1</h3>
<p>The first Message.</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div style="margin: 0 auto">
<h3>#2</h3>
<p>The 2nd Message.</p>
</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>
</body>
</html>