What's causing all my carousel slides to stack on top of each other instead of presenting in a

Whenever I click 'run' or 'preview' in a browser, specifically using Chrome, all three slides are displayed stacked from 1 to 3 in a static view. They do not toggle through each slide as intended.

This issue only occurs on Codeply, a platform I frequently use. The code does work correctly on Codepen and when added to my HTML and CSS files via Atom code editor. It seems to be an isolated problem with Codeply, even though I have JavaScript and Bootstrap packages installed there.

.carousel-item {
  height: 150px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfada0a0bbbcbbbdaebf8ffae1fee1fc">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3934342f282f293a2b1b6e756a75"[email protected]</a>/dist/js/bootstrap.bundle.min.js"integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

htmlcsscarouselbootstrap-5

Answer №1

Ignore the previous query. I forgot to save my chosen framework, which is the latest version of Bootstrap, in Codeply. Everything is working perfectly now.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The horizontal navigation bar will not extend the entire length of the page

I'm facing an issue with my horizontal navigation bar as it doesn't span the entire screen. I need help figuring out how to make it full-width. You can see what I mean here. Additionally, once the navigation bar spans the screen, I want the image ...

htmlcss

Could someone assist me in resolving the issue of receiving empty emails from my online form submission?

Every day, I receive 6 blank emails from my contact form at the same time. Even though the form on the website is filled out correctly and all the information goes through, I still get these mysterious blank emails. I have implemented validation checks in ...

javascriptphphtmlforms

What is the method for customizing the NavBar color using CSS?

Hi there! I recently came across a responsive multi-level menu that caught my eye. After copying the CSS and JavaScript exactly, I ended up with this NavBar. The issue I'm facing is changing the default color (which is green) to another color. Here&ap ...

jqueryhtmlcss

Is there a way to retrieve the id of the parent element containing the PHP code using PHP?

I need to verify if the php code being executed is located within a div named "parent2". Currently, I am customizing a Joomla HTML override and attempting to place one module in two different positions. If the module is contained within parent2, then spe ...

phphtmljoomla

Is there a way to create a customized select handle using CSS?

Is there a way to create a resizable border that appears when a user clicks on the div? And when they move the mouse over it, can the cursor change accordingly? I also want the user to be able to drag the element's border and have the element resize a ...

cssselectionborderresize

What is the correlation between statistics and posts that are generated dynamically?

One interesting aspect to consider is how statistics are connected to individual posts. For instance, linking the like count to each Facebook post or tying upvote and downvote stats to a question on Stackoverflow presents some intriguing challenges. How ...

phpjavascripthtmlajax

How can you implement a transform transition toggle when a user clicks on an element

Check out this CodePen example for a cool overlay animation: https://codepen.io/pen/MoWLrZ Experience the unique animation of two overlays as you click for the first time. However, on the second click, watch as both overlays seamlessly return to their ori ...

jqueryhtmlcssanimation

The `.append()` function includes HTML content as plain text

I am using JavaScript to dynamically add HTML elements to my webpages. I have created a loop that iterates through all the projects, each containing multiple pictures. The first step involves generating the project title and adding it within a div element ...

javascriptjqueryhtmlappend

Tips for altering the class of an HTML button dynamically when it's clicked during runtime

I currently have a set of buttons in my HTML page: <button id="button1" onclick="myFunction()" class="buttonClassA"></button> <button id="button2" onclick="myFunction()" class="buttonClassA"></button> <button id="button3" onclic ...

javascriptjqueryhtmlcssajax

Error encountered when trying to show a modal using a PHP script

I'm encountering an issue with the modal system on my website. Let me share some code snippets: MODALS ARE BUILT WITH W3.CSS LIBRARY modal.js (including debug statements) let modal = null; let title = null; let content = null; $(document).ready(() = ...

javascriptphphtmljquerycss

Learn how to smoothly scroll to the top of a div by clicking on a team name

CSS Code .hover-div { position:absolute; margin-top:-150px; visibility:hidden; transition:all 0.5s linear 0s; } .team_hover:hover + .hover-div { margin-top:0px; visibility:visible; } .hover-div:hover { margin-top:0px; visi ...

angularjscss

Expand the HTML Template and Resize Children to Fit the Window

My software creates HTML email templates that typically range from 600px to 650px in width, but can sometimes be as wide as 900px. The templates have nested table elements for email clients, with all dimensions specified in fixed pixels rather than relativ ...

javascripthtmlmeta-tagsviewportemail-templates

Is it possible to apply a CSS Transition to just one specific type of transform?

Can you animate just one type of css transform using transitions? My css looks like this: cell{ transform: scale(2) translate(100px, 200px); transition: All 0.25s; } Now I only want to animate the scale property. I could use position:absolute with ...

csstransformtransition

"Using AJAX in PHP will not generate any output when returning JSON

Hey everyone, I'm having trouble with my simple PHP test code. I can't seem to get the err value that I want. 2.php $error = "abc"; $er = json_encode($error); return $er; Here's my HTML: <html> <head> <script src="https:// ...

phphtmljson

Saving user-generated inputs within a React.js component's state, focusing on securely handling passwords

Curious about forms in React.js? I don't have any issues, but I'm wondering if there are potential flaws in my approach. I've set up a basic form with two inputs for email and password: <input type="email" name="email" value= ...

javascripthtmlreactjs

Implementing jQuery UI toggleClass method to seamlessly alternate between two distinct CSS classes

My goal is to toggle between two CSS classes on a selector click using Jquery UI .toggleClass(), but unfortunately, it's not producing the desired toggle effect. $(".toggle").click(function () { $(".archivePosts .columns").removeClass( "l ...

javascriptjqueryhtmlcssjquery-ui

Python's selenium did not locate the specified CSS element

After transferring the code from Selenium IDE to Python, the selenium test was functioning properly except for clicking on the item and scrolling clicks smoothly on an item. Here is the HTML selenium code: <?xml version="1.0" encoding="UTF-8"?> ...

pythonhtmlcssseleniumxpath

Do lengthy words sink while short words swim?

I need to display some text inside a box. To achieve this, I enclose my text within an <article> element. <article> <p>Here is the text that I want to display in a box.</p> </article> I then style it as a block with fix ...

css

Using jQuery Datepicker, showcase two distinct datepickers on a single page

Currently, I am utilizing the jQuery [Datepicker][1] on a website, but I am facing challenges when attempting to display two datepickers on the same page in different manners. The first one should only appear once you click the text box, and once a date i ...

javascriptjqueryhtmlwebdatepicker

I encountered a problem in Javascript where I was unable to get the video.getCurrentTime() function to display the current time of

While everything else in my code is running smoothly with setInterval, there seems to be an issue with video.getCurrentTime() not displaying in the div id = "test" when the video is playing. I've been trying to figure out why this is happening. Here&a ...

javascripthtml