Carousel same height and dots - html

I am trying to have same height at my carousel:
html
<div class="container">
<div id="carouselPortfolio" class="carousel slide" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#carouselPortfolio" data-slide-to="0" class="active"></li>
<li data-target="#carouselPortfolio" data-slide-to="1"></li>
<li data-target="#carouselPortfolio" data-slide-to="2"></li>
<li data-target="#carouselPortfolio" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<h5 id="hPortfolio">Hi there bkasbdjksbakdjbsakjbdks jbkdsabdk jkbdsakbdks jkbdsakbdnkjsab</h5>
<p><span class="FColorA">hbshabs hbsajhbdsa UJBAudbau undsaJNDBAIS</span></p>
<img class="d-block w-100" src="images/site.png" alt="First slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselPortfolio" 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="#carouselPortfolio" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
and css
h5{
font-family: 'Comfortaa', cursive;
/* font-family: 'Caudex', serif; */
font-weight: bold;
color: #14BEB4;
font-size: 100%;
word-wrap: break-word;
overflow:hidden;
}
.carousel-indicators li {
border-radius: 100%;
color: #323232;
background-color: #323232;
}
.carousel-caption{
padding: 5% 5%;
}
/* πιθανη αλλαγή */
.carousel-item{
padding: 0% 15%;
width: 100%;
height: 100% !important;
object-fit: cover;
}
.carousel-control-next-icon:after
{
content: '>';
font-size: 55px;
color: red;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: red;
}
I want to have same height at my carousel and dots not lines to change slides and if it is possible the dots over images, like text.
not wrapping text, to have same height mainContPortfolio and dots instead of dashes ...
Thank you.

Related

Responsive text positioning?

I use Bootstrap carousel slider with text (carousel-caption). It is responsive on all device, but the text is always centered and on the bottom of screen. I know how to position the text wherever I want.
But if I change the position, it isn't properly displayed on other devices. I just want to position the text to the left and in the middle of the screen and I want it to stay there when I resize the viewport.
.carousel-caption {
top: 35%;
width:500px;
left: 220px;
bottom: auto;
}
.red {
color:red;
}
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.lnr {
display: inline-block;
fill: currentColor;
width: 1em;
height: 1em;
vertical-align: -0.05em;
stroke-width: 1;
}
.services-icon {
margin-bottom: 20px;
font-size: 30px;
}
bgc2, .vLine, .hLine {
background-color: #0F52BA;
}
.quote-icon {
font-size: 40px;
margin-bottom: 20px;
}
.services-icon {
font-size: 60px;
margin-left: 2rem;
}
.slide1-title {
font-size: 40px;
}
.slide1-content{
font-size:18px;
}
.btn-style-one {
position: relative;
padding: 14px 30px;
line-height: 1em;
background: #221f1f;
margin-top: 20px;
color: #ffffff !important;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
display: inline-block;
border: 2px solid transparent !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<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" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://images.wallpaperscraft.com/image/windows_7_black_glass_reflection_26309_1920x1080.jpg')">
<div class="carousel-caption d-lg-block slide1-bg">
<h2 class="display-4 slide1-title" style="text-transform: uppercase; font-weight: bold;"></h2><br>
<p class="lead slide1 slide1-content"><i>TEXT for position</i><br>
BUTTON
</div>
</div>
</div>
</div>
</div>
<div class="carousel-arrow">
<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>
For minimal change; replace your '.carousel-caption' style block with the below:
.carousel-caption {
top: 0 !important;
left: 0 !important;
width: 100%;
max-width: 100vw;
padding: 0 15%;
}
And add for that "I just want to put text left in the middle of the screen":
.carousel-caption .lead {
text-align: left;
position: absolute;
top: 45vh;
}
Fiddle: https://jsfiddle.net/c3h0zt9b/
.carousel-item .carousel-caption {
top: 35%;
width:500px;
left: 220px;
bottom: auto;
right: auto;
text-align: left;
}
.red {
color:red;
}
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.lnr {
display: inline-block;
fill: currentColor;
width: 1em;
height: 1em;
vertical-align: -0.05em;
stroke-width: 1;
}
.services-icon {
margin-bottom: 20px;
font-size: 30px;
}
bgc2, .vLine, .hLine {
background-color: #0F52BA;
}
.quote-icon {
font-size: 40px;
margin-bottom: 20px;
}
.services-icon {
font-size: 60px;
margin-left: 2rem;
}
.slide1-title {
font-size: 40px;
}
.slide1-content{
font-size:18px;
}
.btn-style-one {
position: relative;
padding: 14px 30px;
line-height: 1em;
background: #221f1f;
margin-top: 20px;
color: #ffffff !important;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
display: inline-block;
border: 2px solid transparent !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<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" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://images.wallpaperscraft.com/image/windows_7_black_glass_reflection_26309_1920x1080.jpg')">
<div class="carousel-caption d-lg-block slide1-bg">
<h2 class="display-4 slide1-title" style="text-transform: uppercase; font-weight: bold;"></h2><br>
<p class="lead slide1 slide1-content"><i>TEXT for position</i><br>
BUTTON
</div>
</div>
</div>
</div>
</div>
<div class="carousel-arrow">
<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>
I am not sure if you want to center the text horizontally or vertically. So both answers:
Horizontally
The element you want to center .carousel-caption has a px width and margins in percentage.
You can either use percentage values only:
.carousel-caption {
width: 70%;
left: 15%;
}
or just make it full width, as all the contained text is centered:
.carousel-caption {
width: 100%;
left: 0px;
right:0px;
}
Vertically
.carousel-caption {
top: 50%;
bottom: auto;
transform: translateY(-50%);
}

Bootstrap Toggle Icon: How to hide nav menus and put inside Toggle Icon

I am wondering if it is possible to hide the Nav Menus in my navbar and put them inside the toggle icon so when my browser shrink, the users can access them only from the toggle icon? I'm a beginner in CSS/Bootstrap.
Here's my HTML code:
<div class="container">
<div class="navbar-header">
<!-- Hamburger Icon -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCol">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand -->
-root- DOTA
</div>
<div class="collapse navbar-collapse" id="navCol">
<ul class="nav navbar-nav">
<li class="divider">
TEAMS
</li>
<li class="divider">
MATCHES
</li>
</ul>
</div>
</div>
and my CSS:
.navbar-custom .navbar-toggle{
border-color: #041809;
}
.navbar-custom .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
background-color:#000c07;
}
.navbar-custom .navbar-toggle .icon-bar{
width: 25px;
height: 3px;
}
.navbar-custom .nav .divider{
background-color: #000c07;
}
.navbar-custom .navbar-collapse{
background-color: #000c07;
border-color: #041809;
}
<!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">
<style>
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.wrapper {
max-width: 1024px;
padding: 0;
margin: 0;
}
nav { background: #eee; }
nav .wrapper { position: relative; }
.menu li { float: left; }
.menu li a {
display: inline-block;
padding: 10px 15px;
}
.menuToggle {
padding: 10px 15px;
display: none;
cursor: pointer;
}
#media screen and (max-width: 600px) {
.menu {
display: none;
position: absolute;
background: #eee;
z-index : 1;
}
.menu li { float: none; }
.menuToggle { display: inline-block; }
fh5co-nav-toggle i::before, .fh5co-nav-toggle i::after {
content: '';
width: 25px;
height: 2px;
background: #252525;
position: absolute;
left: 0;
transition: all .2s ease-out;
}
.fh5co-nav-toggle i {
position: relative;
display: inline-block;
width: 25px;
height: 2px;
color: #252525;
font: bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent: -55px;
background: #252525;
transition: all .2s ease-out;
}
.fh5co-nav-toggle.active i::after {
bottom: 0;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
background: #c6872b;
}
}
</style>
<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>
<script>
$(function(){
$('.menuToggle').on('click', function(){
$('.menu').slideToggle(300, function(){
if($(this).css('display') === 'none'){
$(this).removeAttr('style');
}
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12 col-sm-12">
<nav class="navbar navbar-default">
<div class="wrapper">
<div class="menuToggle">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="menu clearfix">
<li>Home</li>
<li>About</li>
<li>Product</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12 col-sm-12">
<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>
</div>
</div>
</body>
</html>

Media query to shrink Bootstrap carousel

I am using Bootstrap version 4.0.0-beta and I am using the carousel function. I have configured it perfectly as to how I need it when I view it on my monitor. (1920 x 1200) but would like to change it's height depending on the users monitor, for example 1920 x 1080. I have given my Carousel a height of 32rem but would like to decrease that size if a user is on a smaller screen like I said. I believe a media query is what I need but I have tried and can't figure it out. Can anyone shine some light on this please?
Thanks.
Managed to solve it on my own. Just used this.
#media screen and (max-height: 1000px) {
.carousel-item {
height: 24rem;
}}
Please try the sample below and let me know if its worked.
.img-responsive,
.thumbnail>img,
.thumbnail a>img,
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
display: block;
width: 100%;
height: auto;
}
.carousel-inner {
border-radius: 15px;
}
.carousel-caption {
background-color: rgba(0, 0, 0, .5);
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
padding: 0 0 10px 25px;
color: #fff;
text-align: left;
}
.carousel-indicators {
position: absolute;
bottom: 0;
right: 0;
left: 0;
width: 100%;
z-index: 15;
margin: 0;
padding: 0 25px 25px 0;
text-align: right;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.carousel-containers {
padding: 10px 0;
}
.carousel-containers {
background-color: #fff;
color: #555;
}
#media screen and (min-width: 768px) {
.carousel-containers {
padding: 1.5em 0;
}
}
#media screen and (min-width: 992px) {
.container {
max-width: 930px;
}
}
<div class="carousel-containers">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
</div>
<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>
</div>

I am having an overflow issue with my website in split screen at max-width 1200px [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am having an issue with my website. When I put it in split screen with max-width 1200px, there is a little bit of overflow with the website that creates a horizontal scrollbar on the website. I need some help on how to fix it. I may need to refactor my code, if that is the case, how should I go about doing it? My code is below.
HTML
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<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">
<link rel = "stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html" ><h1 class = "header" style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Some Title</h1></a>
<style>
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<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-item active">
<img class="d-block img-fluid" src="http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://c1.staticflickr.com/2/1520/24330829813_944c817720_b.jpg" alt="Third 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>
<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>
CSS
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: #B2B2B2;
text-align: right;
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
.show-split {
display: none;
}
#shot{
margin-top: 50px;
float: right;
}
#shot2 {
float: right;
margin-right: 10px;
}
#media (max-width: 1200px) {
.header {
text-align: left !important;
padding-left: 20px;
}
.img-fluid {
height:500px;
}
.header2 {
text-align: left;
}
.hide-split {
display: none;
}
.show-split {
display: block;
}
}
You should probably take a look at your code and see what's going on. Something probably has to much padding or margin and is forcing the horizontal bar.
The "easy" way would be to just hide the overflow on the body element and your horizontal bar will go away.
body {
overflow-x:hidden;
}
The best way to debug these kind of overflow problems is to put an outline around all the elements like this:
* {
outline: 1px solid red;
}
I can see right away that your header is going off the screen and there are random p tags with horrible horizontal lines that are bleeding off the page as well.
I recommend cleaning up your code or starting over. Good luck.

Styling bootstrap carousel indicators

I'm trying to get the default bootstrap carousel indicators to be very thin yellow lines stuck at the bottom as shown below.
I got them to be at the bottom of the page but I can't seem to change them into rectangles or change their color.
HTML
<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>
CSS
.carousel-indicators {
margin: 0px;
height: 0px;
}
.carousel-indicators ol {
width: 100%;
}
.carousel-indicators li {
height: 3px !important;
border-radius: 0px !important;
width: 25%;
}
Something like this? Note that the width is not totally accurate because I just made it 33%.
.item img {
width: 100%;
height: auto
}
.carousel {
position: relative;
width: 200px;
height: 100px;
}
ol.carousel-indicators {
position: absolute;
bottom: 0;
margin: 0;
left: 0;
right: 0;
width: auto;
}
ol.carousel-indicators li,
ol.carousel-indicators li.active {
float: left;
width: 33%;
height: 10px;
margin: 0;
border-radius: 0;
border: 0;
background: transparent;
}
ol.carousel-indicators li.active {
background: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/200x100" alt="Slide 1">
<div class="carousel-caption">
Slide 1
</div>
</div>
<div class="item">
<img src="http://placehold.it/200x100" alt="Slide 2">
<div class="carousel-caption">
Slide 2
</div>
</div>
<div class="item">
<img src="http://placehold.it/200x100" alt="Slide 3">
<div class="carousel-caption">
Slide 3
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" 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" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Great css! I played with it to come up with ball indicators in half-white and the active indicator in yellow.
ol.carousel-indicators {
position: absolute;
bottom: 5px;
margin: 0;
left: 0;
right: 0;
width: auto;
}
ol.carousel-indicators li, ol.carousel-indicators li.active {
width: 1rem;
height: 1rem;
margin: 0;
border-radius: 50%;
border: 0;
background: transparent;
}
ol.carousel-indicators li {
background: rgba(255,255,255,0.39);
margin-left: .5rem;
margin-right: .5rem;
}
ol.carousel-indicators li.active {
background: yellow;
}
i have just wrote similar code for myself,
i think it will help you a little bit more.
by using Flex layout you can similarly stretch indicators
without worrying about their width
flex-grow:1; makes this job
https://codepen.io/ophiuch/pen/Jzowbo
.carousel /*slider */
{
position: relative;
}
.carousel .carousel-indicators /* indicator wrapper*/
{
position: absolute;
bottom: 0;
left:0px;
width: 100%;
margin: 0;
left: 0;
right: 0;
width: 100%;
display: flex; /* this is for indicators */
}
#headcarousel_container .carousel-indicators li /* indicators*/
{
flex-grow: 1; /* make all indicator li similarly stretched */
height: 40px;
border-radius: 2px;
}
#headcarousel_container .carousel-indicators li.active
{
background-color:rgba(251,222,87,0.5) ;/* changes indicators color when it is active*/
}
.carousel .carousel-inner .item img
{
width: 100%;
height: 100vh;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel</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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--slider -->
<div class="container-fluid" id="headcarousel_container" style="padding: 0;">
<div id="headcarouselid" class="carousel slide" data-ride="carousel">
<!-- indicators -->
<ul class="carousel-indicators">
<li class="active" data-target="#headcarouselid" data-slide-to="0"></li>
<li class="" data-target="#headcarouselid" data-slide-to="1"></li>
<li class="" data-target="#headcarouselid" data-slide-to="2"></li>
<li class="" data-target="#headcarouselid" data-slide-to="3"></li>
<li class="" data-target="#headcarouselid" data-slide-to="4"></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2014/07/28/20/39/landscape-404072_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2018/08/23/07/35/thunderstorm-3625405_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2017/09/08/20/29/chess-2730034_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2018/05/30/15/31/rustic-3441673_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control left" href="#headcarouselid" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#headcarouselid" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>
This snippet changes prev and next Carousel icon controls for library react-bootstrap :
& span.carousel-control-prev-icon, & span.carousel-control-next-icon{
background-color: black;
}
Yeah, only the background. The icon itself is an xml image so couldn't find a way to change the colors. :/