This is the first time I've ever used bootstrap. My bootstrap carousel only has indicators. Could this be because I haven't specified pictures yet.
See the following code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width = device-width, initial-scale = 1" />
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
.jumbotron{
background-color:#2E2D88;
color:white;
}
.tab-content{
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}
.nav-tabs{
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="jumbotron">
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="slide1">
<div class="carousel-caption">
<h1>Great food</h1>
<p>Taste what keeps people coming back</p>
<p>Order for delivery, carry out, or catering</p>
</div>
</div>
</div>
<div class="item">
<div class="slide2">
<div class="carousel-caption">
<h1>Great prices</h1>
<p>A good meal doesn't have to cost an arm and a leg</p>
<p>Order for delivery, carry out, or catering</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"></a>
<span class="glyphicon glyphicon-chevron-left"></span>
<a class="right carousel-control" href="#theCarousel" data-slide="next"></a>
<span class="glyphicon glyphicon-chevron-right"></span>
</div>
<p>
Blah blaha blahb lbahlbahbabablah balha blha blah blah
</p>
</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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
Related concerns: I'm not sure if I should be using bootstrap 4 or 3. I've heard bootstrap 4 compiles with sass but I don't know what that is. Can someone with more experience with this framework help me?
You need to link your images in the carousel-inner class.
check this for more details :
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h
I wasn't able to get this working until I used examples from https://v4-alpha.getbootstrap.com/components/carousel/.
Here is what I came up with:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width = device-width, initial-scale = 1" />
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
.jumbotron{
background-color:#3e4fa9;
border-radius:0px;
color:white;
}
.tab-content{
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}
.nav-tabs{
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Welcome</h1>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="images/sampledining.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h3>Great food</h3>
<p>Taste what keeps people coming back</p>
<p>Order for delivery, carry out, or catering</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="images/samplegyros7.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h3>Great prices</h3>
<p>A good meal doesn't have to cost an arm and a leg</p>
<p>Order for delivery, carry out, or catering</p>
</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 class="jumbotron">
<p>
blah blah blah
</p>
</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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
Related
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.
I am trying to create a responsive Bootstrap carousel with a static hero header that stays the same when the carousel images change. The hero header has to be left-aligned to a responsive bootstrap container element as well as vertically centered inside the bootstrap carousel. I have tried searching for solutions but have come up empty. I have also tried using an "overlay" element with position: absolute, however, that doesn't allow me to left-align the hero header inside the bootstrap container element nor does it allow me to vertically align the hero header to the bootstrap carousel. This is what I want it to look like.
This is what I want it to look like.
This is what I have so far.
.heroOverlay {
z-index: 12;
position: absolute;
/* takes div out of document flow */
top: auto;
/* The distance between the div with the top of document */
left: 0px;
/* Make the div full width */
right: 0px;
/* Make the div full width */
margin: auto auto 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<header>
<div class="heroOverlay">
<div class="container">
<div class="jumbotron text-right bg-transparent">
<h1 class="display-4">Chinese Take-In</h1>
<p class="lead">Take-in Ingredients, Take-out Memories</p>
<hr class="my-4">
<a class="btn btn-primary btn-lg" href="/booking.html" role="button">Book Now</a>
</div>
</div>
</div>
<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">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Asian food on table">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Stirfry being cooked in a wok">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Ramen noodles in bowl">
</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>
</header>
<!-- JQuery & JQuery UI -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<!-- Bootstrap 4 JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Any help would be greatly appreciated. Thanks!
Welcome to stack overflow...
Check out the sample code
for smaller sizes, you may have to spell out the exact size of the fonts... similarly for very large screens, best for you to spell out the exact size of the fonts... because the fonts with units vw are dynamic with regards to size. Media queries will help you take care of these extreme cases.
HTML:
.heroOverlay {
z-index: 12;
position: absolute;
top: 30%;
left: 0px;
right: 0px;
margin: auto auto 0 10%;
width: 80%;
background: rgba(240, 255, 255, .5);
padding: 30px 0;
}
.heroOverlay h1 {
font-size: 5.5vw;
}
.heroOverlay p {
font-size: 3vw;
}
.heroOverlay a {
font-size: 2vw;
padding: .5vw 1vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<header>
<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="heroOverlay">
<div class="container">
<div class=" text-left bg-transparent">
<h1 class="display-4">Chinese Take-In</h1>
<p class="lead">Take-in Ingredients, Take-out Memories</p>
<a class="btn btn-primary btn-lg" href="/booking.html" role="button">Book Now</a>
</div>
</div>
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Asian food on table">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Stirfry being cooked in a wok">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Ramen noodles in bowl">
</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>
</header>
<!-- JQuery & JQuery UI -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<!-- Bootstrap 4 JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
If I put index.js to the top of the other js file than my js file works but not the carousel functionality, if it I put the index.js in the bottom then the carousel functionality works but not my index.js.... Any thoughts how to fix it.
alert("I am an alert box!");
h1{
margin-left: 25%;
padding-left: 5%;
}
.carousel-item{
margin-left: 25%;
margin-top: 10%;
}
body {
background-color: lightblue;
}
<!DOCTYPE html>
<html>
<head>
<title>ChrisDWebAPP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<h1>Connected To Boot Strap</h1>
<body>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-50" src="https://cdn.pixabay.com/photo/2017/11/06/18/39/apple-2924531_960_720.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-50" src="https://cdn.pixabay.com/photo/2017/11/06/18/39/apple-2924531_960_720.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-50" src="https://cdn.pixabay.com/photo/2017/11/06/18/39/apple-2924531_960_720.jpg" alt="Third slide">
</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>
</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://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>
<script src="index.js" </script>
</body>
</html>
Thank you...
your code
<script src="index.js" </script>
should be
<script src="index.js"></script>
^
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>
I'm using the bootstrap carousel as in its website and there are 3 slides that each contains an image and a div of texts.
I want to manipulate it as on slide change, the texts animated from right to left.
I've included the code snippet and I'll appreciate your help.
var $carousel = $('#myCarousel');
$carousel.bind('slide.bs.carousel', function(e) {
$('#myCarousel .item .container div').animate({
'top': '-50px',
'opacity': '0.5'
// transition: 'all 0.5s all 0.4s ease-in-out',
},500);
$('#myCarousel .item.active .container div').animate({
// transition: 'all 0.5s all 0.4s ease-in-out',
'top': '0',
'opacity': '1'
},500);
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<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" role="listbox">
<div class="item active">
<img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345">
<div class="container">
<div class="carousel-caption" style="background-color:rgba(255,255,255,0.2)">
<h1>H1</h1>
</div>
</div>
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345">
<div class="container">
<div class="carousel-caption" style="background-color:rgba(255,255,255,0.2)">
<h1>H1</h1>
</div>
</div>
</div>
<div class="item">
<img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Chania" width="460" height="345">
<div class="container">
<div class="carousel-caption" style="background-color:rgba(255,255,255,0.2)">
<h1>H1</h1>
</div>
</div>
</div>
</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>
</div>
</body>
</html>
It may be that the issue is that you're attempting both of the animations in the slide.bs.carousel handler, so they are both being applied to the same element. If you break it up into the slide.bs.carousel (which happens before the slide) and slid.bs.carousel (which happens after the new slide) events, you'll have better control of the "pre"/"post" slide.
Check here for an example. I used slideUp instead of animate, but you should be able to replace with whatever animation you want. https://jsfiddle.net/sheldon_griffin/zz9nwng3/1/
$('#myCarousel').on('slide.bs.carousel', function(e) {
$('.carousel-caption').hide();
}).on('slid.bs.carousel', function(e) {
$('.active .carousel-caption').slideToggle('slow');
});