I am having trouble getting my carousel to load into my webpage.
I have played around with adding CSS height/width to the carousel div and even tried adding height to the contained img elements, but must be failing somewhere.
All help is much appreciated. Here's the notable code (cut from a larger document)...
IN MY HEAD:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
AT THE BOTTOM OF MY BODY:
<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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
THE CAROUSEL:
<div id="carousel" class="carousel slide" data-right="carousel">
<div class="carousel-inner" roll="listbox">
<div class="carousel-item">
<img class="d-block w-100" src="https://www.neptunus.co.uk/app/uploads/2019/05/evolution-pieterschelte-rotterdam-76997-1.jpg" alt="Temporary structures built on the Pioneering Spirit catamaran">
<div class="carousel-caption">
<h3>Pioneering Spirit</h3>
<p>Weeks at sea produced thousands of square meters of temporary hospitality structures.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://www.eventindustrynews.com/wp-content/uploads/2018/03/Neptunus-Image-2.jpg" alt="Main structure for England's Rugby World Cup.">
<div class="carousel-caption">
<h3>Rugby World Cup</h3>
<p>Twickenham proves annual demand for White Rose Crew, but this year was special.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://www.neptunus.co.uk/app/uploads/2019/05/evolutioniii-thales-farnborough1.jpg" alt="A three story structure for Farnborough Airshow.">
<div class="carousel-caption">
<h3>Thales</h3>
<p>Our favourite biannual build of the worlds largest airshow.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://s3.eu-west-2.amazonaws.com/luxurylondon.co.uk-storage-bucket-001/images/articles-body/603/masterpiece-2019-london.jpg" alt="Masterpiece Arts Fair, Chelsea.">
<div class="carousel-caption">
<h3>Masterpiece</h3>
<p>We are proud to be an integral part of this incredible transformation year in, year out.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/62AF/production/_112536252_cdf_200420_cardiffhospital18.jpg" alt="Emergancy hospital built in the Pricipality Stadium.">
<div class="carousel-caption">
<h3>Emergancy Covid-19 Field Hospital</h3>
<p>Helping turn The Pricipality Stadium into Wales largest hospital in just 10 days.</p>
</div>
</div>
</div>
</div>
Check jquery cdn and check for the latest CDN.Using bootstrap given CDN will not work for you
I figured it out the minute I posted this.
I hadn't set any of the slides to "active".
Easy fix :)
Related
When I hit run or preview in a browser, I am using Chrome, a static view of all three slides stacked 1-3 is displayed. So they do not toggle through each one.
This is only not working on codeply which I use often. It does work on codepen and it does work once I add it to my html and CSS files through atom code editor. Its only codeply that it will not run and I have javascript and bootstrap packages installed in codeply.
.carousel-item {
height: 150px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" data-interval="1000">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color: red;">
<img src="https://via.placeholder.com/600x150" class="d-block w-100" alt="First Slide">
</div>
<div class="carousel-item" style="background-color: yellow;">
<img src="https://via.placeholder.com/600x150/ff0000" class="d-block w-100" alt="Second Slide">
</div>
<div class="carousel-item" style="background-color: blue;">
<img src="https://via.placeholder.com/600x150" class="d-block w-100" alt="Third Slide">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Disregard this question. I wasn't saving my selected framework which was latest bootstrap version in codeply. It works fine.
I'm in the process of learning Bootstrap (v4.5.2), and wanted to create a simple carousel that slides automatically for my website. I went to Bootstrap documentation and copied the example code for a carousel with slides only (https://getbootstrap.com/docs/4.5/components/carousel/), and added some color and height to the divs to see if it was working. Here is the code:
.carousel-item {
height: 100px;
}
<!-- Bootstrap v4.5.2 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color:red;">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item" style="background-color:blue;">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item" style="background-color:yellow;">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
As you can see, everything works fine except the sliding animation. If instead of v4.5.2 I use v4.0.0 of bootstrap (with the exact same code) it works perfectly fine:
.carousel-item{
height: 100px;
}
<!--Bootstrap v4.0.0 CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause: "hover";>
<div class="carousel-inner">
<div class="carousel-item active" style="background-color:red;">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item" style="background-color:blue;">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item" style="background-color:yellow;">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
But I would like to use the latest version of the framework if possible.
I have noticed that even in the documentation pages, in v4.0.0 sliding animation works on the example slides (https://getbootstrap.com/docs/4.0/components/carousel/), but not in v4.5.2 (https://getbootstrap.com/docs/4.5/components/carousel/), so I'm guessing this might be a bug from the newer version? Or maybe as I'm a newbie I'm doing something wrong? Thanks in advance for your answers, I hope the question is clear and well written, it's my first time asking somtehing over here.
After hours of research I think I just found out what was causing the error. It seems like on the newest updates some bootstrap code has the feature (prefers-reduced-motion), a CSS media feature that is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. By using this feature the browser will check the configuration of your operating system, and wil display the animations accordingly.
So If you have reduced animations on your operating system configuration then the browser will not show some animations, like in this case. To be able to see the animation you must do the following:
OSX: Settings > General > Accessibility > Reduce Motion
IOS: System Preferences > Accessibility > Display > Reduce Motion
Windows: Settings > Ease of Access > Show animations in Windows > ON
For more info about this check out this issue on github.
Working from chrome using windows, I turned ON the "show animations in windows" button and everything works perfectly now. Hope this helps guys, and sorry if it was a trivial issue.
Slide Animation issue on Bootstrap v4.5.2 & v5.1 (https://getbootstrap.com/docs/4.5/components/carousel/)
I manage to fix it using additional CSS
<style>
.carousel-item{
transition: -webkit-transform .6s ease;
transition: transform .6s ease;
transition: transform .6s ease,-webkit-transform .6s ease;
}
</style>
then the animation slide started working, I don't need to explain reading the code tells everything.
Can you help me do a css for this sample?
I want to display the card in 1 column when it's view on tablet devices,
and 2 column if it's view on desktop.
Sample
Thanks!
You should use Bootstrap's grid system here. I have attached a sample code with just two divs. This is for your better understanding. Before you proceed to cards, first play around with the grid system and make yourself wise in it. This is as simple as it looks. A bootstrap row is divided by equal 12 columns. They can be represented using- lg- large device, md- medium device, sm- small device and xs- extra small device.
col-lg-6 col-md-12 -This implies that, the DOM elements should take 6 columns of a row when it is in Desktop view and 12 columns when it is in Tablet view.
Make sure you learn how media queries work, then proceed with bootstrap's grid system. Hope it helps!.. Happy coding.!!
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
#div1{
background: #0ef;
}
#div2{
background: #fe0;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="row">
<div class="col-lg-6 col-md-12" id="div1">div 1</div>
<div class="col-lg-6 col-md-12" id="div2">div 2</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Grid system - bootstrap 4
https://getbootstrap.com/docs/4.3/layout/grid/
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
It would be pretty simple using css grid.
Let’s say you have 4 divs. Put those in a container. Set that container to:
container {
display: grid;
grid-template-columns: auto auto;
}
This sets 2 automatically scaled columns normally.
and then set a media query for your selected width of a tablet
#media (max-width: 500px) {
container {
grid-template-columns: auto;
}
}
This means up to 500px, there will only be one column. No one else used css grid so I thought it would be cool to show.
I might have mixed up columns and rows cause I’m dumb but yea that’s it. I suggest you learn about media queries, and css grid/flexgrid/bootstrap
So, I was trying to make my modal only work on screens smaller than tablets. That worked successfully.
But now, I made some changes and I need to home to work on desktop size as well.
I tried removing the d-none to d-block but it didn't work
Any ideas?
<div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
<figure class="cap-left">
<img src="assets/about/about1.jpg" class="img-fluid">
<a href="#myModal" role="button" data-toggle="modal" class="d-inline d-xl-none"><figcaption>
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</figcaption></a>
<figcaption class="d-none d-xl-inline">
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</figcaption>
</figure>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="#myModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<img src="assets/about/about1.jpg" class="img-fluid">
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</div>
</div>
</div>
</div>
Well, that's just because I had designed that code snippet to work that way. That behavior was what the original asker wanted.
So, to get the link show up on large screens (everywhere basically), you just comment out or remove the second figcaption and also remove the d-xl-none class from the first one.
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
<figure class="cap-left">
<img src="https://placeimg.com/640/480/animals" class="img-fluid">
<a href="#myModal" role="button" data-toggle="modal" class="d-inline"><figcaption>
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</figcaption></a>
<!--
<figcaption class="d-none d-xl-inline">
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</figcaption>
-->
</figure>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="#myModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<img src="https://placeimg.com/540/380/animals" class="img-fluid">
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</div>
</div>
</div>
</div>
</div>
</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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I have a carousel on angular web app which is supposed to move images on intervals but it is not working as expected, I can not figure out the reason behind --
here's my code
<div id="section1" class="carousel slide" data-ride="carousel" data-interval="1000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#section1" data-slide-to="0" class="active" ></li>
<li data-target="#section1" data-slide-to="1" ></li>
<li data-target="#section1" data-slide-to="2" ></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img1.jpg" alt="...">
<div class="carousel-caption">
<!-- <h3>Caption Text</h3> -->
</div>
</div>
<div class="item ">
<img src="img2.jpg" alt="...">
<div class="carousel-caption">
<!-- <h3>Caption Text</h3> -->
</div>
</div>
<div class="item ">
<img src="img3.jpg" alt="...">
<div class="carousel-caption">
<!--h3>Caption Text</h3-->
</div>
</div>
</div>
</div>
Everything seems fine, what bootstrap plugin did you used, because the class you have applies requires bootstrap plugin. Please let me know which bootstrap plugin did you use...
try this CDN for bootstrap plugin. It works perfectly with mine
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Bootstrap jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!--Bootstrap javascript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>