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>
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 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>
I need a simple thing, but I'm a new programmer and if someone could help it would be great! Here's the thing:
I'm giving you the full code below and this is the page. As you can see there are 8 images inside. I need to make them appear in a random order using JavaScript. I can't make this happen, because when I put the script inside body into the Bootstrap component, it doesn't get the CSS style of Bootstrap. How can I fix this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//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">
<meta name="description" content="">
<meta name="author" content="">
<title>3 Col Portfolio - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/3-col-portfolio.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var gallery = new Array();
gallery[0] = new Array(new Array ("immagine_prova5.png", "http://www.altervista.org"),
new Array ("immagine_prova6.png", "http://www.ii.org"), new Array
("immagine_prova5.png", "http://www.google.it"), new Array ("module_04.jpg", "#04"));
gallery[1] = new Array(new Array ("module_05.jpg", "#0"), new Array ("module_06.jpg",
"#06"), new Array ("module_07.jpg", "#07"), new Array ("module_08.jpg", "#08"));
function pickImageFrom(whichGallery)
{
var idx = Math.floor(Math.random() * gallery[whichGallery].length);
document.write('<a href="' + gallery[whichGallery][idx][1] + '"><img src="img/' +
gallery[whichGallery][idx][0] + '"></a>');
}
</script>
</head>
<body>
<script language="javascript">pickImageFrom(1);</script><br /><br />
<p> </p>
<!-- Navigation --><nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container"><!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"><button class="navbar-toggle" type="button" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-
only">Toggle navigation</span> </button> <a class="navbar-brand" href="#">Start
Bootstrap</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse --></div>
<!-- /.container --></nav><!-- Page Content -->
<div class="container"><!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Page Heading <small>Secondary Text</small></h1>
</div>
</div>
<!-- /.row --> <!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="">
</a>
</div>
</div>
<!-- /.row --> <!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"/><script
async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script></a>
<!-- Responsive Ad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-2393383294332670"
data-ad-slot="4230127403"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> </div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
</div>
<!-- /.row --><hr /><!-- Footer --><footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
<!-- /.row --></footer></div>
<!-- /.container -->
<p> </p>
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The images you are adding via js are missing the css-class for your style to work.
Add class="img-responsive" to the images in your js code.
document.write('<a href="' + gallery[whichGallery][idx][1] + '">
<img class="img-responsive" src="img/' + gallery[whichGallery][idx][0] + '"></a>');