The Bootstrap carousel spiraled into disarray

I am facing an issue with the basic bootstrap carousel. My goal is to make the slides move every four seconds. The current setup of the carousel code is as follows:

$(document).ready(function() {
    fixCarousel();
});

function fixCarousel() {
$('.carousel').carousel({
   interval: 1000*4
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://via.placeholder.com/750x150" alt="Image">
        <div class="carousel-caption car_slide">
          <h3 class="slide_text">Suppliers of skilled Workforce</h3>
          <a class="page-scroll" href="#services">
          <button class="learn_more_button btn btn-primary">
            LEARN MORE
          </button>
          </a>
        </div>
      </div>

      <div class="item">
        <img src="http://via.placeholder.com/750x150" alt="Image">
        <div class="carousel-caption car_slide">
          <h3>SMART, EFFECTIVE ENTERPRISE SOLUTIONS</h3>
          <a class="page-scroll" href="#services">
          <button class="learn_more_button btn btn-primary">
            LEARN MORE
          </button>
          </a>
        </div>
      </div>
    </div>

</div>

However, I have noticed some strange behavior. Sometimes it works fine, other times it waits for around 10 seconds or just a few seconds before transitioning. In some instances, it doesn't cycle through the slides at all.

Is there a solution to this issue? Any help would be greatly appreciated. Thank you.

Answer №1

Check out the solution https://jsfiddle.net/abc123xyz/

$(document).ready(function() {
  $('.slideshow').slideshow({
   speed: 2000
  });
});
.image {
  width: 500px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div id="mySlideshow" class="slideshow active" data-auto="slideshow">

    <!-- Slides -->
    <div class="slide-container" role="list">
      <div class="slide active">
        <img src="http://via.placeholder.com/450x250" alt="Slide 1">
        <div class="caption slide-caption">
          <h2 class="slide-title">Discover New Horizons</h2>
          <a class="explore-link" href="#learn">
            <button class="btn btn-primary learn-more-button">EXPLORE NOW</button>
          </a>
        </div>
      </div>

      <div class="slide">
        <img src="http://via.placeholder.com/450x250" alt="Slide 2">
        <div class="caption slide-caption">
          <h2 class="slide-title">Innovative Solutions for You</h2>
          <a class="explore-link" href="#discover">
            <button class="btn btn-primary learn-more-button">DISCOVER MORE</button>
          </a>
        </div>
      </div>
    </div>

</div>

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

fade out row upon successful deletion using ajax

My code includes an AJAX function to delete items by row. In my table, there is a column with the action to perform the deletion. Here is the AJAX function: //delete detail function deleteDetail(id_po_req_detail) { var tr = ...

AngularJS dynamically creates an HTML template that includes an `ng-click` attribute calling a function with an argument

Struggling to create an HTML template using an AngularJS directive, the issue arises when trying to pass an object into a function within one of the generated elements. Here is the directive code in question: app.directive('listObject', function ...

AngularJS directive for jQuery Handsontable is a powerful tool for creating interactive

I've been experimenting with using jQuery handsontable in conjunction with an angular directive, but I've encountered a strange issue. Whenever I type something into the cells, the characters appear outside of the table instead of inside it. Oddl ...

Revamp your code by utilizing ES6 class to replace multiple if statements in Javascript

Currently, my code is filled with numerous if statements and I am considering a switch to classes in ES6. However, Javascript isn't my strong suit... so PLEASE HELP ME..! Previous code: //example code function first(){ console.log('first sce ...

Exploring the Terrain: Troubleshooting Meteor CSS with Twitter Bootstrap

Recently, I have encountered an issue that perplexes me - I am unable to debug less code in my meteor app when the twbs:boostrap package is present. Interestingly, everything works fine when I remove it, but as soon as I add it back, the CSS seems to be co ...

Challenge of integrating Bootstrap data source with Flask and WTForm

When using the bootstrap autocomplete function, I am passing in a list. The template code loads in this list: <script> var autoc = {{ autoc|tojson|safe}};</script> Using WTForm: {{form.name(**{"data-provide":"typeahead","data-source": autoc ...

What steps can be taken to reduce the size of the cards in ant.design?

Currently, I am using the ant.design Card component to present messages in a chat webapp built with react/redux. However, each card is displaying too much space around the text. Is there a way to adjust the card so that it wraps the text more closely? htt ...

Clicking the button becomes impossible after entering text and using `evaluateJavascript`

I am currently working on finding a solution to input the receipt number and click the 'Check Status' button on this specific website: After successfully entering the receipt number: document.getElementById('receipt_number').value = &a ...

CSS following a clicked event

http://codepen.io/anon/pen/GqmEAq My goal is to make the 'x' button clicked (the 'x' is created after clicking the plus sign on the menu) and then bring the dropdown back up. I have attempted: a:after:checked ~ .submenu{ max-height ...

The div swiftly clicks and moves beyond the screen with animated motion

Here is a code snippet that I am working with: $(document).ready(function(){ $(".subscriptions").click(function (){ if($(".pollSlider").css("margin-right") == "-200px"){ $('.pollSlider').animate({"margin-right": '+ ...

Align text within HTML with the use of Bootstrap

Example data value category type item1 100 food fruit item2 50 drinks soda item3 75 snacks chips I want to achieve this forma ...

Arranging data into columns using HTML and CSS

I'm currently working on a CSS solution to organize various elements like buttons and text in a tabular column format. My main challenge lies in controlling the layout effectively, especially since CSS columns are not compatible with IE9 and earlier v ...

Issue encountered while attempting to save the date to a json file

While working on my code to directly print the date from index.js into data.json, I encountered an error stating that data is not defined. This is what I have done so far: Ran npm init Installed jsonfile using npm i jsonfile index.js const json ...

Is there a way to specifically execute a Mongoose validate function solely for the create user page and not the edit user page?

Exploring Different Tools In the process of developing a website using Node.js, Express, and MongoDB. Leveraging mongoose for interacting with the MongoDB server has been quite beneficial. However, I encountered an issue where a function within my Mongo ...

How do I overwrite this calculation using JQuery?

I have a website: link There are two pages on my site that have the same div elements... I want one page to perform a certain calculation on the divs, and another page to perform a different calculation... New JavaScript Code: jQuery(document).ready(fu ...

What is the process for using dojo to load content?

As I work on creating a single-page website with the help of dojo, I refer to tutorials that explain how to utilize dojo/request for ajax requests. The process is straightforward - simply make a request, receive HTML content, and insert it into a designate ...

Is it possible to apply CSS styling to all placeholders in a Sencha Touch application?

Having trouble figuring out how to style all the placeholders in my application with CSS. I've attempted a few different methods: .customField input::-webkit-input-placeholder { color: #2e4bc5; } .x-text-field input::webkit-input-placeholder{ c ...

When making a request through local apache, the POST method is switched to GET

I've been attempting to send a post request using the code below. However, the request is being sent as a GET instead of POST. How can I resolve this issue? $.ajax({ url: 'https://www.exampleurl.com', method: 'POST', h ...

Craft a Flawlessly Repeating Sound Experience - Online

I'm facing a challenge in creating a flawless loop of an audio file. However, all the methods I've tried so far have resulted in a noticeable gap between the end and the start. Here are the approaches I experimented with: The first approach inv ...

Modifying JQuery function to target two IDs instead of just one

I am utilizing a bootstrap 5 tablist on my website that allows for navigating between tabs using custom left and right arrows. If I wish to introduce a second bootstrap 5 tablist with a new unique ID, how can I modify the code to integrate the new ID and e ...