Why is my Bootstrap Carousel not working? - html

I am making a MEAN stack application using angular 7. I use a Bootstrap Carousel but it's not working.
#slider .item {
height: 500px;
}
.carousel-caption {
font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->
<div class="carousel slide" id="slider" data-ride="carousel">
<!--indicators-->
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="../../assets/public/RoadTipsMain.jpg" style="width: 100%">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="item" id="slide2">
<img src="../../assets/public/5.jpg" style="width: 100%">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="item" id="slide3">
<img src="../../assets/public/cardrive.jpg" style="width: 100%">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#slider" data-slide="prev" role="button"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#slider" data-slide="next" role="button"><span class="icon-next"></span></a>
</div>
Is there any mistake I am doing with the code? I think #slider is not working in angular 7.

As I already explained here (marked as duplicate but nothing happened):
You have to give all items (pictures) of the carousel the class
carousel-item but you only gave them the class item. Same with the
Previous and Next buttons. The classes should be carousel-control-prev and carousel-control-next but you only gave
them the class carousel-control.
The rest seems to be working just fine! When handling Bootstrap you
always have to look out for the classes since they have to be exactly
right for it to work at all. (You could also probably remove the
popper.js-script at the bottom since it is not used at all.)
So basically just change all <div class="item"> to <div class="carousel-item"> and add -next and -prev to the control
classes as I did here:
#slider .carousel-item {
height: 500px;
}
.carousel-caption {
font-size: 18px;
}
.carousel-item>img {
width: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->
<div class="carousel slide" id="slider" data-ride="carousel">
<!--indicators-->
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1000/600/">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="carousel-item" id="slide2">
<img src="https://picsum.photos/1000/600/">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="carousel-item" id="slide3">
<img src="https://picsum.photos/1000/600/">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#slider" 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="#slider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

I have the same problem like that.
You must be careful to read again Getting Started carousel focused on Dependency.
https://ng-bootstrap.github.io/#/getting-started
Don't forget to add BootstrapCDN (content delivery network) in your HTML file:
https://www.bootstrapcdn.com/
this is my BootstrapCDN in my workspace:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Related

How to reduce the image height in carousel slider

How to reduce the image height in carousel slide in bootstrap, but it must be responsive after reducing the image height.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/xactprofile1.png" class="d-block w-100 d-inline-block" alt="..." />
</div>
</div>
</div>
Try this. It changes height when you try to reduce the height based on this. Add it to your image.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale.</p>
</body>
</html>
Will changing the .carousel-inner height solve your problem? or it's not what you are looking for? because you could use for example height: 50vh and it will change the images too but the whole inner is effected with it. and images are going to stay responsive.
check out this snippet:
CSS:
.carousel-inner {
height: 50vh;
}
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="slider">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1920/1080 " class="d-block w-100 vh-100" alt="pic-1">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1081" class="d-block w-100 vh-100 " alt="pic-2">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1082" class="d-block w-100 vh-100 " alt="pic-3">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1083" class="d-block w-100 vh-100 " alt="pic-4">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1084" class="d-block w-100 vh-100 " alt="pic-5">
<div class="overlay "> </div>
</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>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

how to allow my carousel slider image to be responsive

I was trying to recreate a navbar/header/slider like this https://matchthemes.com/demohtml/dina/index.html
However, I have an issue with my carousel slider image. It looks fine when it is in webpage form, but when I shrink it to a mobile form, my image does not resize to the same as my carousel slider. Below is an image of what I mean.
mobile form
website form
This is my HTML for the carousel slider
<section class="container-fluid carouselcontainer">
<section 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 -->
<section class="carousel-inner">
<section class="item active">
<img src="image/restaurant.jpg" alt="Los Angeles" style="width:100%; height:100%;">
</section>
<section class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%; height:100%;">
</section>
<section class="item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%; height:100%;">
</section>
</section>
<!-- 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>
</section>
</section>
This is my CSS. It's only 1 line. It is the only way I know to resize the carousel and the image
.carousel-inner {
width:100%;
height:830px;
}
You can use image in background with "background-image:url('..');" like
<section class="item active" style="background-image:url('https://www.w3schools.com/bootstrap/chicago.jpg');">
</section>
You need to some CSS in item class to adjust images what you want.
Example
.item{
width: 100%;
height: 100%;
background-repeat: no-repeat ;
background-size: cover ;
background-position: center ;
}
How about letting a browser pic the best image?
img {
max-width: 100%;
}
and read the following link
https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html
and use "img srcset"
This is Your Solution
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<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>
You Can Edit or Preview Code Here Also Code Link
Try to make the width of your carousel image 100%
.carousel-inner .item img {
width: 100%;
}

Accessibility - Bootstrap4 Carousel control tabbing is not going on to carousel-caption div while using the tab key from Keyboard

PFB is the example, Here I am using for Bootstrap Carousel control.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel2&stacked=h
This example is working fine but when i am using tab key from the keyboard, control is not going on to anchor tag inside the div with class "carousel-caption".
I tried "tab-index" attribute for anchor tag to set the tabbing but tabbing is not working properly.
I want tabbing to work like below:
Left Arrow -> 1st anchor tag("LA is always so much fun!") -> 2nd anchor tag("Thank you, Chicago!") -> 3rd anchor tag("We love the Big Apple!") -> Right arrow
Could anyone please let me know how to implement tabbing for
<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="C:\Users\user1\Desktop\Sample\video-bg-static1.png" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<a>LA is always so much fun!</a>
</div>
</div>
<div class="item">
<img src="C:\Users\user1\Desktop\Sample\video-bg-static2.png" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<a>Thank you, Chicago!</a>
</div>
</div>
<div class="item">
<img src="C:\Users\user1\Desktop\Sample\video-bg-static3.png" alt="New york" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<a>We love the Big Apple!</a>
</div>
</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>
You can't have tab index defined on an <li>, so we had to wrap our ul.carousel-indicators>li inside an anchor tag (which does work with tab index)...
Check the code which works with the same example and implements tabIndex as you wanted...
update: in light of questioner's comment, tab index now goes to the <p> under the heading on each slide instead of the carousel indicators; the href for these <a> tags to be updated by the user...
.carousel-indicators .active {
border-radius: 50%;
}
<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="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 class="carousel-caption">
<h3>Los Angeles</h3>
<a class="active" tabindex="2" href="#myCarousel" data-slide-to="0">
<p>LA is always so much fun!</p>
</a>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<a class="" tabindex="3" href="#myCarousel" data-slide-to="1">
<p>Thank you, Chicago!</p>
</a>
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<a class="" tabindex="4" href="#myCarousel" data-slide-to="2">
<p>We love the Big Apple!</p>
</a>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="" data-target="#myCarousel" data-slide-to="0">
</li>
<li class="" data-target="#myCarousel" data-slide-to="1">
</li>
<li class="" data-target="#myCarousel" data-slide-to="2">
</li>
</ol>
<!-- Left and right controls -->
<a class="left carousel-control" tabindex="1" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" tabindex="5" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
According to your comment:
...Here I want to navigate between the carousel controls using the keyboard.
You can use keydown event. As reported in the documentation:
Keyboard events are only generated by , and anything with the contentEditable attribute or with tabindex="-1".
It's required to add tabindex="-1" to your carousel div plus the event handler.
$('#myCarousel').on('keydown', function(e) {
if (e.keyCode == 37) { // left arrow
$('#myCarousel').carousel('prev')
} else {
if (e.keyCode == 39) { // right arrow
$('#myCarousel').carousel('next')
}
}
})
<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/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" tabindex="-1">
<!-- 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://dummyimage.com/300x200/000/fff&text=1" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<a>LA is always so much fun!</a>
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/300x200/000/fff&text=2" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<a>Thank you, Chicago!</a>
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/300x200/000/fff&text=3" alt="New york" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<a>We love the Big Apple!</a>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

I've made a carousel on my webpage, works fine on the computer, when I make it smaller but on mobile it stays stretched

I've made a carousel on my webpage, works fine on the computer, it follows it well when I make it smaller on the screen but on mobile it stays stretched vertically making it very long/high.
I've tried to change heights and all the other standard procedure but the confusing part is that it works so well on computer but not on mobile.
In my head that shouldn't be possible
.carousel {
max-height: 790px;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: block !important;
}
.carousel img {
width: 100% !important;
max-height: 790px;
}
.carousel-inner {
width: 90% !important;
margin: auto !important;
}
<div style="max-width:100%" class="container">
<div class="row">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img\homeg1.jpeg" alt="First Picture">
</div>
<div class="carousel-item">
<img src="img\homeg3.jpeg" alt="Second Picture">
</div>
<div class="carousel-item">
<img src="img\homeg4.jpeg" alt="Third Picture">
</div>
</div>
<!-- Left and right controls -->
<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>
All you need is the images to be responsive via the img-fluid class and you'll get a similar experience on Desktop and mobile...
I have removed your css... removed inline max-width:100% from the parent div... added img-fluid classes to the images
following code works for you?
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class='img-fluid' src="https://valor-software.com/ngx-bootstrap/assets/images/nature/1.jpg" alt="First Picture">
</div>
<div class="carousel-item">
<img class='img-fluid' src="https://valor-software.com/ngx-bootstrap/assets/images/nature/2.jpg" alt="Second Picture">
</div>
<div class="carousel-item">
<img class='img-fluid' src="https://valor-software.com/ngx-bootstrap/assets/images/nature/3.jpg" alt="Third Picture">
</div>
</div>
<!-- Left and right controls -->
<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>

Floating a Bootstrap Carousel

I'm trying to float a div with text content in it to the left of a Bootstrap Carousel, but the results make no sense. Can someone help me out?
It seems like the elements are staying block, even though I specify them as inline. Could this have to do with Bootstrap itself?
I've also included the CSS just in case it helps.
<div class="container">
<div id="elSlideShow">
<div id="slideShowLeft">
<h2>Description of Piano</h2>
<p>werg wer foierjfoi jerij eri ioerjioj eruueruer uerueuerguerurhgueruig eurgu eruig eruiguerguer ueruigerigneign</p>
</div>
<div id="slideShowRight">
<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" role="listbox">
<div class="item active">
<img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#666:#444/text:Second slide" alt="Second slide">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide">
</div>
</div>
<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>
</div>
h2 {
font-size: 30px;
}
#slideShowLeft {
float: left;
display: inline;
width: 40%;
}
#slideShowRight {
width: 55%;
float: right;
display: inline;
}
You can simply float them by using "float: left;" property. Put it in either CSS or in div, like style="float:left;"
https://fiddle.jshell.net/odzbg8rh/
You can adjust the distance between each button in CSS
I've copied your code and its working. Just a few points to correct.
Remove display: inline from your css as you are using float and when applied float to elements, it makes them block. So display: inline makes no sense when using with float.
Add class clearfix to parent of floating elements to set their layout.
<div id="elSlideShow" class="clearfix">
h2 {
font-size: 30px;
}
#slideShowLeft {
float: left;
width: 40%;
}
#slideShowRight {
width: 55%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="elSlideShow" class="clearfix">
<div id="slideShowLeft">
<h2>Description of Piano</h2>
<p>werg wer foierjfoi jerij eri ioerjioj eruueruer uerueuerguerurhgueruig eurgu eruig eruiguerguer ueruigerigneign</p>
</div>
<div id="slideShowRight">
<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" role="listbox">
<div class="item active">
<img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#666:#444/text:Second slide" alt="Second slide">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide">
</div>
</div>
<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>
</div>
Thanks for the help people, actually the problem was a list that came before. The fact that I floated that list probably messed with these elements. My solution was to add a line break after that list.