I have created a Bootstrap carousel and clicking the indicators changes the current slide but doesn't change the class of the the slide to active meaning the indicator never changes.
<body>
<div class="container">
<div class="row">
<div class="#">
<div id="my-slider" class="carousel slide container" data-ride="carousel">
<!--indicators dot nav-->
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
</ol>
<!--wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item one active">
<img src="images/IMG_6737.png" alt="The Shard" />
</div>
<div class="item two">
<img src="images/IMG_6630.png" alt="A London Barbers" />
</div>
<div class="item three">
<img src="images/IMG_6659.png" alt="A London Bar"/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
And the CSS:
*{
margin: 0;
padding: 0;
}
.carousel {z-index: -99;}
.carousel .item{
position: fixed;
width: 100%; height: 100%;
}
.carousel .one {
background: url(images/IMG_6737.png);
background-size: cover;
background-repeat: no-repeat;
}
.carousel .two {
background: url(images/IMG_6630.png);
background-size: cover;
background-repeat: no-repeat;
}
.carousel .three {
background: url(images/IMG_6630.png);
background-size: cover;
background-repeat: no-repeat;
}
.carousel .active .left{
left:0;
opacity: 1;
}
.carousel-indicators {
position: fixed;
top:0;
float: left;
padding-bottom: 50px;
z-index: 30;
margin-top: 40px;
}
.carousel-indicators li{
width: 30px;
height: 30px;
border-radius: 1;
margin: 0 10px;
border-radius: 100%;
}
.carousel-indicators .active{
width: 30px;
height: 30px;
margin: 0 10px;
}
The active indicator should be the only indicator that is filled and the rest should be hollow this does not happen because the list items class of active doesn't changed after being clicked on.
Remove div with class="#"
Don't forget to include jQuery before bootstrap.js file.
This is pen I made with your code.
pen examplehttp://codepen.io/stojko/pen/NpJOEZ
You can check below given link for Bootstrap carousel:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h
Related
Let me show first the issue just to visualize it (i just hid the logo)
as you can see the button does not align with the logo, which is in the center. behind them is a carousel.
.logo-front {
position: absolute;
width: 50%;
z-index: 1;
top: 35%;
left: 25%;
}
.button-front {
position: absolute;
width: 50%;
z-index: 1;
top: 55%;
color: white !important;
border: 2px solid white !important;
max-width: 250px;
margin: 30 !important;
}
.button-front:hover {
border: 2px solid #d8b861 !important;
}
.logo-front-sm {
position: absolute;
width: 40%;
z-index: 1;
top: 15%;
left: 30%;
}
<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">
<img class="logo-front" src="img/logo/logo_2.png">
<a href="properties-for-lease.php">
<button type="submit" class="site-button button-front">LEARN MORE</button>
</a>
<div class="carousel-item active">
<img src="img/slider/slider1.jpg">
</div>
<div class="carousel-item">
<img src="img/slider/slider2.jpg">
</div>
<div class="carousel-item">
<img src="img/slider/slider3.jpg">
</div>
</div>
</div>
in the button-front i tried "margin: 0 auto;" and "text-align: center;" but the button still stays in the side.
You used your width wrong. You forgot % or px. And you have to use top: to define the height. So that is what i changed here fiddle
Is there any way to display a full image in a bootstrap carousel. I want the container to take the full size of the image but it cuts it short at the bottom.
.carousel-indicators li{
width: 10px !important;
height: 10px !important;
border-radius: 100% !important;
}
#hero {
position: relative;
}
#course-form{
}
#carousel {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.carousel-inner,
.carousel-item {
height: 100%;
}
.carousel-item {
background: no-repeat center/cover;
background-size: cover;
}
.logo {
height: 30vh;
width: 15vw;
position: relative;
bottom: 100px;
right: 50px;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron jumbotron-fluid hero" id="hero">
<div class="container">
<div class="row">
<div class="col-6 mb-4">
<img src="./images/logo.png" class="logo">
<button id="signup"><span id="signup-icon"></span>Sign Up</button>
<button id="signin"><span id="signin-icon"></span>Sign In</button>
<div class="box">
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
</div>
</div>
</div><!--row for logo,search, and form -->
<!-- Here is the carousel, `position:absolute` -->
<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">
<div class="carousel-item active" style="background-image:url('https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=')"></div>
<div class="carousel-item" style="background-image:url('http://www.electran.org/publication/transactiontrends/wp-content/uploads/intelligence-growth-1050x700.jpg')">
</div>
<div class="carousel-item" style="background-image:url('http://www.globoforce.com/gfblog/wp-content/uploads/2017/02/sprouting-seed.jpg')">
</div>
</div>
</div>
</div><!-- container for top image carousel -->
</div>
I tried tweaking the .carousel-inner css to take the full size of the image but I have not had any luck. I have tried background-contain and cover but not luck as of yet
updated with images
Try this inside your
.carosel-item {
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I believe that is what you are looking for!
Cheers
UPDATE:
After reviewing your question what you are after is a parent wrapper to be of image size. As far as my knowledge goes you can't size the wrapper (parent container) based on background image size.
What you can do instead is set your parent wrapper size with width: and height: attributes, and css for carosel-item will do the rest.
Best of luck with your development.
I need to Change the height of the carousel slider bootstarp, I have tired to put a fixed height to the images in pixel but it doesn't work and i have tired to put a fixed height as well to the ID bs-carousel but it doesn't work and as well the the item slides.
.btn.btn-lg {
padding: 10px 40px;
}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #46c3ff;
border-color: #46c3ff;
outline: none;
margin: 20px auto;
}
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(http://evisax.com/img/dubai.png);
}
.fade-carousel .slides .slide-2 {
background-image: url(http://evisax.com/img/free_singapore_tour_900.jpg);
}
.fade-carousel .slides .slide-3 {
background-image: url(http://evisax.com/img/Taj_Mahal.png);
}
#media screen and (min-width: 980px) {
.hero {
width: 980px;
}
}
#media screen and (max-width: 640px) {
.hero h1 {
font-size: 4em;
}
}
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Overlay -->
<div class="overlay"></div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="hero">
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
<div class="hero">
</div>
</div>
<div class="item slides">
<div class="slide-3"></div>
<div class="hero">
</div>
</div>
</div>
</div>
Try this, use px instead of Vh for the following
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100px;
}
FIDDLE-DEMO
use !important to change height
.carousel-inner{
width:100%;
max-height: 200px !important;
}
I'm trying to get get some padding to sides of Twitter Bootstrap slider.
I'm using plain example codes from bootstrap sides with little modifications.
In bellow image you can see what I try to mean. Slider is right now 100% of page width , but I try get some darker are to show on sides (60% of page width.) So it should be left 20% middle 60% and right side 20%.
HTML:
<header id="karuselli" class="carousel slide row" >
<ol class="carousel-indicators">
<li data-target="#karuselli" data-slide-to="0" class="active"></li>
<li data-target="#karuselli" data-slide-to="1"></li>
<li data-target="#karuselli" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('https://placehold.it/1900x1080&text=Slide One');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placehold.it/1900x1080&text=Slide Two');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placehold.it/1900x1080&text=Slide Three');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<a class="left carousel-control" href="#karuselli" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#karuselli" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
SCSS:
$karusellikorkeus : 50%;
$paneelikorkeus : 25px;
$menuValikkoYksi : 50%;
.menuValikkoYksi {
margin-right: 20%;
}
html,
body {
height: 100%;
background-color: #8c8c8c;
}
.carousel {
height: $karusellikorkeus;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
.item,
.active,
.carousel-inner {
height: 100%;
}
.body-top-padding {
padding-top: $paneelikorkeus + 90px;
}
.marginaali {
margin-top: $paneelikorkeus;
#include vp-background-size(cover);
}
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
hr {
color: red;
background-color: red;
padding: 2px 2px 2px 2px ;
}
footer {
margin: 50px 0;
}
Try this code
.carousel {
height: 50%;
width: 60%;
margin: 0 auto;
}
DEMO
I have been messing around with this for a couple days and cannot get this section to work. I want one large div element to span two rows on the left and have two stacked div elements on the right.
Here is the code.
<!DOCTYPE html>
<html>
<head>
<title>Athenz -- DJ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Bree+Serif|Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href="_/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="_/css/mystyles.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- NAVIGATION MENU BAR -->
<div class="jumbtron">
<section class="navbar navbar-fixed-top center" role="navigation">
<ul id="top-nav" class="nav navbar-nav">
<li>Home</li>
<li>Model</li>
<li>Actress</li>
<li>DJ</li>
<li>Entreprenuer</li>
<li>Press</li>
<li>Contact</li>
</ul><!-- nav -->
</section><!-- navbar -->
<div id="djbanner" class="col-lg-12">
<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">
<div class="item active">
<img src='images/dj/dj1.jpg' alt="DJ Photo 1">
</div>
<div class="item">
<img src='images/dj/dj2.jpg' alt="DJ Photo 2">
</div>
<div class="item">
<img src='images/dj/dj3.jpg' alt="DJ Photo 3">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
</div>
<div id="dj-body" class="container">
<div class="row">
<div class="col-lg-6">
<div class="big-box">image</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6"><div class="mini-box">1</div></div>
<div class="col-lg-6"><div class="mini-box">2</div></div>
<div class="col-lg-6"><div class="mini-box">3</div></div>
<div class="col-lg-6"><div class="mini-box">4</div></div>
</div>
</div>
</div>
</div> <!-- container -->
<section class="navbar navbar-fixed-bottom" role="navigation">
<div class="container">
<ul id="bottom-nav" class="nav navbar-nav">
<li>Energy Wellness</li>
<li>Bookings</li>
<li><img src="images/social/facebook.png" /></li>
<li><img src="images/social/twitter.png" /></li>
<li><img src="images/social/youtube.png" /></li>
<li><img src="images/social/soundcloud.png" /></li>
</ul><!-- nav -->
</div>
</section><!-- navbar -->
<script>
$('.carousel').carousel({
interval: 4000
})
</script>
<script src="_/js/bootstrap.js"></script>
<script src="_/js/myscript.js"></script>
</body>
</html>
Thats the main page. Here is the CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/* ------------ Navigation Bar Section ------------ */
.navbar.center {
text-align: center;
margin: 0 auto;
}
.navbar {
background-color: rgba(0,0,0,0.5);
background: rgba(0,0,0,0.5);
border-color: rgba(0,0,0,0.5);
}
.navbar-nav li a {
color: white;
}
ul#top-nav.nav.navbar-nav li a {
font-family: 'Raleway', sans-serif;
margin-right: 50px;
}
ul#top-nav.nav.navbar-nav {
float: none;
display: inline-block;
}
/* ----------- Home Page Section -------------*/
.quarter {
width: 50%;
height: 99.9%;
float: left;
}
.contents {
height: 50%;
width: 100%;
}
#athenz-logo {
z-index: 1050;
position: absolute;
background-image: url('../../images/logo/athenz-logo.png');
background-size: cover;
background-color: white;
top: 50%;
left: 50%;
width: 360px;
height: 225px;
margin-left: -180px;
margin-top: -112.5px;
border-left: 4px solid #468AD4;
border-top: 4px solid #468AD4;
}
#athenz-logo::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 49.5%;
border-bottom: 4px solid #468AD4;
}
#athenz-logo::after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 49%;
width: 4px;
border-right: 4px solid #468AD4;
}
#home-top-left {
background-image: url('../../images/home/home_tl.jpg');
background-size: cover;
position: relative;
border-bottom: 2px solid;
border-bottom-color: #468AD4;
border-right: 2px solid;
border-right-color: #468AD4;
}
#home-top-right {
background-image: url('../../images/home/home_tr.jpg');
background-size: cover;
position: relative;
border-bottom: 4px solid;
border-bottom-color: #468AD4;
border-left: 2px solid;
border-left-color: #468AD4;
}
#home-bottom-left {
background-image: url('../../images/home/home_bl.jpg');
background-size: cover;
position: relative;
overflow: hidden;
border-top: 2px solid;
border-top-color: #468AD4;
border-right: 4px solid;
border-right-color: #468AD4;
}
#home-bottom-right {
z-index: 1051;
padding: 75px;
position: relative;
overflow: hidden;
}
/* ------------- DJ STYLING STARTS ------------- */
div#carousel-example-generic.carousel.slide {
height: 100%;
}
div#carousel-example-generic.carousel.slide div.carousel-inner div.item img {
width: 100%;
}
.big-box,
.mini-box {
background-color: #10BCFF;
color: white;
text-align: center;
margin: 2px;
font-size: 1.5em;
}
.big-box {
height: 120px;
}
.mini-box {
height: 60px;
}
/* --------- Footer Section -------- */
ul#bottom-nav.nav.navbar-nav {
float: right;
}
ul#bottom-nav.nav.navbar-nav li {
margin: 0;
}
section.navbar.navbar-fixed-bottom div.container {
margin-right: 0;
}
section.navbar.navbar-fixed-bottom {
height: 50px;
z-index: 1060;
}
ul#bottom-nav.nav.navbar-nav li {
margin: 0;
text-align: center;
font-size: 12px;
right: 0;
padding: 0;
}
ul#bottom-nav.nav.navbar-nav li a img {
width: 28px;
}
I am Pretty sure I closed everything but I cannot get it to work on my computer. Tried display, position and several other options but nothing seemed to work. Thanks for you help in advanced.
<div class="row">
<div class="col-md-6">Tall</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">Top</div>
</div>
<div class="row">
<div class="col-md-12">Bottom</div>
</div>
</div>
</div>