I am trying to include a bootstrap 5 carousel to my side, but the interactive part (prev/next button and the autosliding every couple of seconds) does not work - it only shows the first.
The carousel code is 100% copied from https://mdbootstrap.com/docs/standard/components/carousel/ and should work. The same code is also used in the official docs: https://getbootstrap.com/docs/5.0/components/carousel/#with-captions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<!-- Carousel wrapper -->
<div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-mdb-target="#carouselBasicExample" data-mdb-slide-to="0" class="active"></li>
<li data-mdb-target="#carouselBasicExample" data-mdb-slide-to="1"></li>
<li data-mdb-target="#carouselBasicExample" data-mdb-slide-to="2"></li>
</ol>
<!-- Inner -->
<div class="carousel-inner">
<!-- Single item -->
<div class="carousel-item active">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg" class="d-block w-100" alt="..."/>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg" class="d-block w-100" alt="..."/>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg" class="d-block w-100" alt="..."/>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<a class="carousel-control-prev" href="#carouselBasicExample" role="button" data-mdb-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselBasicExample" role="button" data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
<!-- Carousel wrapper -->
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
</body>
</html>
It seems like some kind of script is broken, dev tools does not show any error tho. The CDN links are the one recommended in the bootstrap 5 tutorial.
The script tag can be found at end of body.
Follow the official documentation of Bootstrap 5 here: https://getbootstrap.com/docs/5.0/components/carousel/
It will work 100%.
Update after your reply:
For me (I tested it) it works like charm with this code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Carousel Bootstrap 5</title>
<!-- Link to Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="one.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="two.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="three.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>
Okay, so I found the fix: use data-bs-.. instead of data-mdb-...
I followed the tutorial over at https://mdbootstrap.com/docs/standard/components/carousel/ because the official docs were initially not working, unfortunately they used a different tag attribute. Changing all attributes fixed it.
Apparently MDBootstrap is a framework that slightly differs from bootstrap (not a fork, entirely written from scratch). The name is a bit misleading in my opinion.
Related
Carousel not working please provide me guidelines to make it run.
also, if possible make it infinite load on horizontal scroll.
I tried but JavaScript is not working. Kindly provide me actual guidance to make it run.
https://codepen.io/TA0011/pen/qBxqmYr
Code
let currentScrollPosition = 0;
let scrollAmount = 320;
const sCont = document.querySelector(".storys-conatainer");
const hScroll = document.querySel ector(".horizontal-scroll");
let maxScroll = -sCont.offsetWidth + hScroll.offsetWidth;
function scrollHorizontally(val) {
currentScrollPosition += (val * scrollAmount);
sCont.style.left = currentScrollPosition + "px";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
</head>
<body>
<div class="container">
<div class="horizontal-scroll">
<button class="btn-scroll" id="btn-scroll-left" onclick="scrollHorizontally(1)"><i class="fas fa-chevron-left"></i></button>
<button class="btn-scroll" id="btn-scroll-right" onclick="scrollHorizontally(-1)"><i class="fas fa-chevron-right"></i></button>
<div class="storys-container">
<div class="story-circle">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaibWeB6YHcbSZ05T8GEaAaxROO_JCdcYpjgU-rH_yS9IEduhj11ExA_yWVPKrTnqxJzg&usqp=CAU" alt="">
</div>
<div class="story-circle">
<img src="2.jpg" alt="">
</div>
<div class="story-circle">
<img src="3.jpg" alt="">
</div>
<div class="story-circle">
<img src="1.jpg" alt="">
</div>
<div class="story-circle">
<img src="2.jpg" alt="">
</div>
<div class="story-circle">
<img src="3.jpg" alt="">
</div>
<div class="story-circle">
<img src="1.jpg" alt="">
</div>
<div class="story-circle">
<img src="2.jpg" alt="">
</div>
<div class="story-circle">
<img src="3.jpg" alt="">
</div>
<div class="story-circle">
<img src="1.jpg" alt="">
</div>
<div class="story-circle">
<img src="2.jpg" alt="">
</div>
<div class="story-circle">
<img src="3.jpg" alt="">
</div>
<div class="story-circle">
<img src="1.jpg" alt="">
</div>
<div class="story-circle">
<img src="2.jpg" alt="">
</div>
<div class="story-circle">
<img src="3.jpg" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
Why don't you use Bootstrap CSS library. It's pretty easy and simple and I guess you'll manage to get hold of it quickly. Everything is available in a pre-written form and you just need to make some minor changes like your images' src and that's all. Here is how it works.
To start with, you need to include Bootstrap’s production-ready CSS and JavaScript via CDN. Place the tag in the for Bootstrap CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
, and the tag for JavaScript bundle before the closing :
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
Of course, there are other ways to get started with Bootstrap. I assume the above the easiest, but if you're interested, you can read more about it on their webpage:
Get started with Bootstrap
Anyway, next you just need to create a container for your carousel in your . You can do this by using bootstrap containers and columns. Here is a simple code:
<div class="container">
<div class="row justify-content-center">
<div class="col-6">
</div>
</div>
</div>
Again, if you're interested to know more about containers and columns, you can read these pages:
Bootstrap Containers
Bootstrap Columns
Finally, in order to make your carousel as quickly as possible, just copy and paste this pre-written code for carousel inside the above:
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/image01.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/image02.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/image03.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Of course you need to write down the correct src for your own images in the code snippet above. Again, if you'd like to know more about Bootstrap carousels and how to customize them, you can check their own webpage:
Bootstrap Carousel
Hope you find this useful. :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="container">
<div class="row justify-content-center">
<div class="col-6">
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-6">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/image01.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/image02.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./images/image03.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"></script>
</body>
</html>
I have written the following code for carousel using Bootstrap 4. I have appended the code. However, I am unable to bring the other slides into picture only the first slide comes into picture even with the controls. I wish to know what is wrong with the code.
carousel.js
<html>
<head>
<title> Carousel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Carousel</title>
<style>
</style>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="Desert.jpg" alt="Desert" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Hydrangeas.jpg" alt="Hydrangeas" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Jellyfish.jpg" alt="Jellyfish" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
You don't add the Bootstrap JavaScript plugins, so the code for the slide behaviors of the carousel isn't available. You have to add the following <script> to the <head> at least:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
Your working example:
<html>
<head>
<title> Carousel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js"></script>
<!-- Bootstrap CSS and JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<!-- wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://placehold.it/100x101" alt="Desert" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placehold.it/100x102" alt="Hydrangeas" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placehold.it/100x103" alt="Jellyfish" style="width:100%;">
</div>
</div>
<!-- left and right controls -->
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
I've been trying to implement a simple image carousel into this website I'm making. It's very basic page right now and this is the order in which I'm linking the CSS's and javascripts
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I understand the importance of linking jquery first, which is what I've done. And this is how my carousel code looks.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/badminton.jpg" alt="Badminton">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/football1.jpg" alt="Football">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/pool.jpg" alt="Pool">
</div>
</div>
As you can see I've basically copied the one from their site just to get it working. My first image loads however trying to click the arrow to the next gives me the following error
Console log error of jquery / bootstrap conflict
I've looked online and there seems to be no consensus on which version of bootstrap should be used with which jquery. Any help would be appreciated, thanks.
You need a new version of Bootstrap.Try my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/badminton.jpg" alt="Badminton">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/football1.jpg" alt="Football">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/pool.jpg" alt="Pool">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
</body>
</html>
</body>
</html>
[with no error][1]
The only change that I can recommend is removing the word "carousel" from the class names of the slide <divs>, like this:
<div class="item active">
And like this:
<div class="item">
This is for Bootstrap 3.3.7. I haven't reviewed 4.0 yet.
I am trying to implement cloud carousel which should start cycling as soon as the page loads and pauses when hovered upon.But I am not able to do anything with my code.
I am doing it for the first time, so I cannot figure out the error. I have included the libraries but it's still giving me this error.
$(document).ready(function(){
$("#cloud-carousel").CloudCarousel({
xPos:285,
yPos:120,
speed:0.15,
xRadius: 16,
yRadius: 170,
autorotate:'left',
buttonLeft: $("#left-but"),
buttonRight: $("#right-but"),
mouseWheel:true
})
})
img{
height:100px;
width:100px;
}
<head>
<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">
<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>
<script src="cloud-carousel.1.0.5.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery.mousewheel.min.js">
</script>
<script language="JavaScript" type="text/javascript" src="jquery-ui.min.js"></script>
</head>
<body>
<div id="cloud-carousel" class="carousel cloud-carousel active" style="postion:relative; overflow:hidden;">
<div class="carousel-cycle" style="display-block">
<a class="thumbnail">
<img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/03/1458289957powerful-images3.jpg" class="carousel cloudcarousel "/>
</a>
<a class="thumbnail">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQdC9d6Z2Al0vMxQRqFc0230CUo-C-1BhIC3I5R9XTFw7MQLdeP" class="carousel cloudcarousel" />
</a>
<a class="thumbnail">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaKH4dU_U6Pe6WX5G8B9DZkkpzGHUxUJeGmOHbwKh6KrFsZsm6" class="carousel cloudcarousel" />
</a>
<a class="thumbnail">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaKH4dU_U6Pe6WX5G8B9DZkkpzGHUxUJeGmOHbwKh6KrFsZsm6" class="carousel cloudcarousel"/>
</a>
<a class="thumbnail">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQdC9d6Z2Al0vMxQRqFc0230CUo-C-1BhIC3I5R9XTFw7MQLdeP" class="carousel cloudcarousel"/>
<a>
</div>
</div>
<input id="left-but" type="button" value="Left">
<input id="right-but" type="button" value="Right">
</body>
See my code below this might help you...
$(document).ready(function(){
$('#myCarousel_15').hover(function(){
$("#myCarousel_15").carousel('pause');
},function(){
$("#myCarousel_15").carousel('cycle');
});
});
.adjust-img
{
width : 100%;
height : 300px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel_15" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel_15" data-slide-to="0" class=""></li>
<li data-target="#myCarousel_15" data-slide-to="1" class=""></li>
<li data-target="#myCarousel_15" data-slide-to="2" class="active"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg" alt="Title goes here.">
<div class="carousel-caption">
<h3>Title goes here.</h3>
<p>This is 1st image of iceland and this is its caption</p>
</div>
</div>
<div class="item">
<img src="http://www.icelandprocruises.co.uk/media/img/gallery/home/0002-gallery-iceland-waterfall-1.jpg" alt="Title goes here.">
<div class="carousel-caption">
<h3>Title goes here.</h3>
<p>This is 2nd image of iceland and this is its caption</p>
</div>
</div>
<div class="item active">
<img src="http://querzy.com/wp-content/uploads/2016/06/iceland.jpg" alt="Title goes here.">
<div class="carousel-caption">
<h3>Title goes here.</h3>
<p>This is 3rd image of iceland and this is its caption</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel_15" 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_15" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Trying to have a carousel in the webpage that I'm creating. The carousel should contain 3 images, but the images are simply stacked one on top of the another. This index file is located in a folder that also contains the css, fonts, and js folders. I'm not sure if this is a trivial fix, but I can't figure it out.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media
queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js">
</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<![endif]-->
</head>
<body>
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<a href="#">
<img class="d-block img-fluid" src="https://fgl.scene7.com/is/image/FGLSportsLtd/332266454_99_a
? wid=288&hei=288&op_sharpen=1&resMode=sharp2" alt="First
slide">
</a>
</div>
<div class="carousel-item">
<a href="#">
<img class="d-block img-fluid" src="https://fgl.scene7.com/is/image/FGLSportsLtd/332266454_99_a
? wid=288&hei=288&op_sharpen=1&resMode=sharp2" alt="Second
slide">
</a>
</div>
<div class="carousel-item">
<a href="#">
<img class="d-block img-fluid" src="https://fgl.scene7.com/is/image/FGLSportsLtd/332266454_99_a
? wid=288&hei=288&op_sharpen=1&resMode=sharp2" alt="Third
slide">
</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hiddin="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as
needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
On JSFiddle here: https://jsfiddle.net/057z6f35/1/
The issue has to do with the bootstrap version you have. I suspect you are using bootstrap 3.x. In this case the carousel inner items need to have a class of "item" not "carousel-item". The carousel-item class is for the v4 alpha version. Update your code to look like:
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="#">
<img class="d-block img-fluid"
src="https://fgl.scene7.com/is/image/FGLSportsLtd/332266454_99_a
? wid=288&hei=288&op_sharpen=1&resMode=sharp2" alt="First
slide">
</a>
</div>
<div class="item">
<a href="#">
<img class="d-block img-fluid"
src="https://fgl.scene7.com/is/image/FGLSportsLtd/332266454_99_a
? wid=288&hei=288&op_sharpen=1&resMode=sharp2" alt="Second
slide">
</a>
</div>
<div class="item">
<a href="#">
<img class="d-block img-fluid"
src="https://fgl.scene7.com/is/image/FGLSportsLtd/332266454_99_a
? wid=288&hei=288&op_sharpen=1&resMode=sharp2" alt="Third
slide">
</a>
</div>
</div>