We Keep Coding

Bootstrap 4 Carousel - indicators not appearing (controls and jumbotron container working fine)

I can't get the carousel indicators to show. I think it's something to do with my use of the jumbrotron and container etc inside each "slide". Maybe because the indicators are white so I can't see them - in which case how to I either budge the indicators up a bit or move the grey box down a bit, so that the white indicators will sit on top of the grey? I've spent hours trying to fix it but I'm fairly new to HMTL/CSS/JS etc so clearly missing something! Many thanks for your help.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<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>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 1</h1>
<p class="lead text-muted">Sample sentence 1</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 2</h1>
<p class="lead text-muted">Sample sentence 2</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 3</h1>
<p class="lead text-muted">Sample sentence 3</p>
</div>
</section>
</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>

I've changed some css to view the indicators clearly. You can check this.
.carousel-control-next-icon, .carousel-control-prev-icon {
display: inline-block;
width: 20px;
height: 20px;
background: no-repeat 50%/100% 100%;
background-color: #686161 !important;
border-radius: 100%;
box-shadow: 0px 0px 7px 2px #000000a1;
background-size: initial !important;
}
.carousel .jumbotron {
margin-bottom: unset;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<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>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 1</h1>
<p class="lead text-muted">Sample sentence 1</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 2</h1>
<p class="lead text-muted">Sample sentence 2</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 3</h1>
<p class="lead text-muted">Sample sentence 3</p>
</div>
</section>
</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>

You can change arrows color and will see them
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<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>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 1</h1>
<p class="lead text-muted">Sample sentence 1</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 2</h1>
<p class="lead text-muted">Sample sentence 2</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 3</h1>
<p class="lead text-muted">Sample sentence 3</p>
</div>
</section>
</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>
In this part fill='%23000' the 000 stands for the color.

I can see them just fine. Change the background colour to black or a darker shade to view them. :)

Bootstrap Carousel Slide Buttons Not Working

My Bootstrap Carousel Slide seems not working even though i tried other Answers here (one of them is this.
But almost all of them aren't working and outdated, even though the it solve most of others problems (which seems doesn't work on me)
Most of the code come from Bootstrap Snippet pack from Visual Studio 2017 (Extension)
<!-- Image Slider w/ Captions -->
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div id="#my-carousel" class="item active">
<img class="img-fluid d-block w-100" alt="First slide" src="http://placehold.it/1200x675&text=First+slide">
<div class="carousel-caption">
<h3>Caption heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="#my-carousel" class="item">
<img class="img-fluid d-block w-100" alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide">
<div class="carousel-caption">
<h3>Caption heading 2</h3>
<p>Morbi eget libero quis metus consectetur semper.</p>
</div>
</div>
<div id="#my-carousel" class="item">
<img class="img-fluid d-block w-100" alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide">
<div class="carousel-caption">
<h3>Caption heading 3</h3>
<p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-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="#my-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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="js/animations.js"></script>
JS: (Copied the code here)
$(document).ready(function () {
console.log("Main Content finished loading!");
});
$("#myCarousel .slider-pager a").click(function (e) {
var index = $(this).index();
slider.carousel(index);
e.preventDefault();
});
I also tried other's code in some websites and i can't seem to find the answer or solution to my problem.

I got your code to work as is by fiddling with the bootstrap dependencies.
The code you posted did not have bootstrap css. Not sure if you missed it in your own project, but I added a link to the CDN.
The link to bootstrap js seemed to be throwing an error (looking for a Popper object?). I switched from the beta to the stable release of bootstrap and it worked.
I entirely left out your custom jquery: the bootstrap css can use the html markup to know when to slide next, slide prev, etc.
A last note: I did not change it, but why does every item have id="#my-carousel"? I think only the outer div (with class carousel) needs id="my-carousel" (no hash symbol), and the rest could be removed.
<!-- Image Slider w/ Captions -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div id="#my-carousel" class="item active">
<img class="img-fluid d-block w-100" alt="First slide" src="http://placehold.it/1200x675&text=First+slide">
<div class="carousel-caption">
<h3>Caption heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="#my-carousel" class="item">
<img class="img-fluid d-block w-100" alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide">
<div class="carousel-caption">
<h3>Caption heading 2</h3>
<p>Morbi eget libero quis metus consectetur semper.</p>
</div>
</div>
<div id="#my-carousel" class="item">
<img class="img-fluid d-block w-100" alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide">
<div class="carousel-caption">
<h3>Caption heading 3</h3>
<p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#my-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="#my-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://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Your markup has several errors. The Bootstrap CSS CDN link is missing. Every slide in your markup has an ID id="#my-carousel". ID's have to be unique.
Here two working examples of Bootstrap sliders. One using data attributes and one using a JavaScript init and external controls.
var sliderTwo = $('#carouselExampleIndicators2').carousel({
/* your options for slider #2 */
})
$(".slider-pager li").click(function (e) {
var index = $(this).data('slide');
sliderTwo.carousel(index);
e.preventDefault();
});
.slider-pager {
list-style-type: none;
margin: 0;
padding: 0;
}
.slider-pager li {
background-color: #333;
color: #FFF;
padding: 1em;
margin: 0 0 1em 0;
cursor: pointer;
text-align: center;
border-radius: 4px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div class="container">
<h2>Slider via data attributes</h2>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- Your controls -->
<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>
<!-- Your slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/1200x675/333333/FFFFFF&text=First+slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/1200x675/333333/FFFFFF&text=Second+slide" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/1200x675/333333/FFFFFF&text=Third+slide" 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>
</div>
<hr>
<div class="container">
<h2>Slider via JavaScript,<br>external controls</h2>
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<!-- Your slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/1200x675/FF851B/FFFFFF&text=First+slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/1200x675/0074D9/FFFFFF&text=Second+slide" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/1200x675/F012BE/FFFFFF&text=Third+slide" alt="Third slide">
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<ul class="slider-pager">
<li data-slide="0" class="active">First slide</li>
<li data-slide="1">Second slide</li>
<li data-slide="2">Third slide</li>
</ul>
</div>

Bootstrap carousel images not loaded

Getting crazy :D Been stuck for three days.
I am trying to put a carousel in my page, I am loading the images located in my machine, each one having a size of 1200*480.
When I test it the images are not shown.
This is the code:
<div class="jumbotron">
<h1>Kurt Angle</h1>
<p>Olympic Gold Medalist, World Champion, Hall of Famer, Living Legend</p></div>
<!--CAROUSEL BEGINES-->
<div class="fluid-container">
<div class="carousel slide"
data ride="carousel"
id="carousel">
<!--indicators--->
<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>
<!--wrapper of the images(itmes)--->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Pictures/angle_olympics_croppedxcf.jpg" alt="slide1">
</div>
<div class="item">
<img src="file:///home/davide/Pictures/angle%20cropped%202.jpg"
alt="slide2">
</div>
<div class="item">
<img src="file:///home/davide/Pictures/kurt_angle_cropped_3.jpg"
alt="slide3">
</div>
</div>
<!--now let's put right and left control-->
<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>
CSS:
.jumbotron{
background-color: #241f14 !important;
color: #ffffff;
}
.carousel .item{
height: 100%;
}
Codepen page
Please could you help me?

try this one:
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://media.istockphoto.com/photos/overhead-view-of-two-business-persons-in-the-lobby-picture-id520791880?s=2048x2048" alt="Image">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="http://media.istockphoto.com/photos/friends-connection-digital-devices-technology-network-concept-picture-id525208898?s=2048x2048" alt="Image">
<div class="carousel-caption">
<h3>Lorem</h3>
<p>Lorem ipsum...</p>
</div>
</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>
DEMO HERE

Bootstrap 3 Grid Carousel

I'm trying to make a carousel with multiple grid elements. I want to do this with Bootstrap 3 but I can't get it.
This is how I want the carousel.
Carousel showing a grid system rather than a single image
Some expert who can help me?

I think the easiest way to do this is to use each carousel item as a container for your cell based content. In this case I used a table to hold some images, but one might just as well have used a bootstrap row.
td {
background-image: url(http://lorempixel.com/72/72/);
background-size: cover;
background-position: center center;
width: 33%;
height: 100px;
border: solid 2px aliceblue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<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">
<table style="width: 100%;">
<tr><td></td><td rowspan="2"></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</div>
<div class="item">
<table style="width: 100%;">
<tr><td rowspan="2"></td><td></td><td rowspan="2"></td></tr>
<tr><td></td></tr>
</table>
</div>
<div class="item">
<table style="width: 100%;">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

td {
background-image: url(http://lorempixel.com/72/72/);
background-size: cover;
background-position: center center;
width: 33%;
height: 100px;
border: solid 2px aliceblue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<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">
<table style="width: 100%;">
<tr><td></td><td rowspan="2"></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</div>
<div class="item">
<table style="width: 100%;">
<tr><td rowspan="2"></td><td></td><td rowspan="2"></td></tr>
<tr><td></td></tr>
</table>
</div>
<div class="item">
<table style="width: 100%;">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

How to prevent Bootstrap carousel from resuming of the slide animation after clicking on right/left controls

I'm using Bootstrap Carousel to show show some images.
I already removed the slide class and the data-ride="carousel" from the carousel div in order to remove the automatic sliding animation.
But when you click in one of the right/left controls to change the image, the slide animation resumes.
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<br>
<div id="myCarousel" class="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="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_chania2.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>
<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.6/js/bootstrap.min.js"></script>
I also tried adding a jQuery line above
$("#myCarousel").carousel("pause");
But this doesn't seem to help anyhow.
What can I do?
Thanks

Try using this javascript line instead of the one you wrote at the end of your answer:
$(document).ready(function(){
$("#myCarousel").carousel({interval: 500, pause: "hover"});}
You can adjust the interval to whatever you want and this will pause whenever the carousel is hovered over by the mouse even after using the left/right controls, hope this helps!

Try to add this script:
$('#myCarousel').on('slid.bs.carousel', function () {
$(this).carousel('pause');
})
The slid.bs.carousel event "is fired when the carousel has completed its slide transition".
The .carousel('pause') method "stops the carousel from cycling through items".
Please check the result:
$('#myCarousel').on('slid.bs.carousel', function () {
$(this).carousel('pause');
})
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<br>
<div id="myCarousel" class="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="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_chania2.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>
<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.6/js/bootstrap.min.js"></script>