Mobile phone carousel glitch

I am encountering an issue with the Bootstrap v4.0 Carousel that I can't seem to resolve. Despite searching online for similar problems, I have not been able to find a solution, which is quite perplexing.

Whenever I load a page on an iPhone, the carousel displays the same image twice, regardless of whether the indicator is clicked or if it automatically slides. Please refer to the code below. Additionally, I have included a Heroku link below for you to test the issue on a phone (please note that I have not tested this on Android devices as I do not own one).

<div id="carouselExampleIndicators" class="carousel slide">
  <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://scontent.fltn2-1.fna.fbcdn.net/v/t1.0-9/97087554_10157568429427872_2295505830386073600_n.jpg?_nc_cat=101&_nc_sid=dd9801&_nc_ohc=EKpvsglOk3IAX9Py33W&_nc_ht=scontent.fltn2-1.fna&oh=fb94e49d41d443272c2507f8b1759f46&oe=5EECA22E" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
    <h5>Welcome to the Studio Odontoiatrico Associato Dr. M. and M. Licata</h5>
  </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://scontent.fltn2-1.fna.fbcdn.net/v/t1.0-9/s960x960/99289016_10157586004457872_3467314234633748480_o.jpg?_nc_cat=102&_nc_sid=8024bb&_nc_ohc=fIZBMtey49YAX_5ayAc&_nc_ht=scontent.fltn2-1.fna&_nc_tp=7&oh=05fcf2eb72e639ae9092bcd7ad20a811&oe=5EEA0C36" alt="Second slide">
        <div class="carousel-caption d-none d-md-block">
    <h5>Who We Are<a href="/staff" class="btn btn-primary btn-sm"> Go &raquo;</a></h5>

  </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://scontent.fltn2-1.fna.fbcdn.net/v/t1.0-9/p720x720/98180802_10157586032592872_239014732453904384_o.jpg?_nc_cat=110&_nc_sid=8024bb&_nc_ohc=sMMh-yGOJtYAX8RUyro&_nc_ht=scontent.fltn2-1.fna&_nc_tp=6&oh=7479cde50b0b49b927dd9bd01a59198f&oe=5EEC6724" alt="Third slide">
        <div class="carousel-caption d-none d-md-block">
    <h5>Where We Are<a href="/contacts" class="btn btn-primary btn-sm"> Go &raquo;</a></h5>

  </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>

javascriptjquerycssbootstrap-4carousel

Answer №1

After investigating further, I identified the problem. Surprisingly, after removing and relinking the CDNs for Bootstrap, the issue seems to have been resolved.

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

Adding routes dynamically in nodeJS using Express is a powerful way to manage your server

Is there a way to dynamically add paths to nodeJS within a running program? Instead of relying on kludged solutions like resetting the server when files change, I am looking for a more efficient method. Any suggestions? EDIT: This project is focused on pr ...

javascriptnode.jsexpress

How can animations be disabled in Angular/Javascript?

I have been assigned the task of developing an Angular component for my company's applications that will include a toggle to disable all animations within the app for accessibility purposes. It is important to note that I am unable to go into each in ...

javascriptangularanimationaccessibility

Accessing JSON key by value alone

Imagine you have a variable storing the value of a key in a JSON object. Let's see... var stooges = [ {"id" : "a", "name" : "Moe"}, {"id" : "b", "name" : "Larry"}, {"id" : "c", "name" : "Shemp"} ]; var stooge = "Larry"; I am seeking gui ...

javascriptjqueryjsonobject

Transfer data from a child component to a parent component in a React application

Currently, I am working on my second React app. This time, I am experimenting with nested components, unlike my previous project which only had a single component. The main focus of this project is a calculator app built using React. To guide my design pro ...

javascriptreactjs

Unique content on a web page when it is loaded with HTML

Is there a way to dynamically load various content (such as <img> and <a>) into divs every time a page is loaded? I've seen websites with dynamic or rotating banners that display different content either at set intervals or when the page ...

javascripthtmlajaxrandom

Clicking to remove added child element

I have written a script that creates an image popup when the site loads. Here is the code: <script type="text/javascript"> function showPopup() { var div = document.createElement('div'); div.className += 'popup'; div.inne ...

javascripthtmlcss

Changing the alignment of Bootstrap 4.5 dropdowns depending on the size of the screen

I'm currently working on a navigation bar that includes a button using the dropdown component with right-alignment. The reason for the right-alignment is that the button is positioned all the way to the right within the navbar: <div class="dro ...

twitter-bootstrapbootstrap-4dropdown

What is the best way to implement a loop using JQuery?

<script> $(function() { $('.slideshow').each(function(index, element) { $(element).crossSlide({ sleep: 2, fade: 1 }, [ { src: 'picture' + (index + 1) + '.jpg' } ]); }); ...

javascriptjqueryhtmlcssloops

Changing an AngularJS Protractor promise from a string to a decimal number - how to do it?

I am currently working with Angular.js Protractor to retrieve the values of cells in a grid. Although I can successfully retrieve these values, they are strings and I need to perform calculations with them. Upon attempting this: ptor.findElements(protrac ...

javascriptangularjspromisekarma-runnerprotractor

"Enhance Your Website with a Custom Contact Form using Bootstrap, jQuery Validation

I am currently working on integrating a straightforward Bootstrap contact form with AJAX and jQuery validation. Despite being close to the desired outcome, there are a few issues that I cannot seem to resolve. The form validates input fields (although I ai ...

javascriptjqueryajaxtwitter-bootstrapjquery-validate

What is the best method for establishing environment variables across different platforms?

When working with Node scripts on Windows, the format should be like this: "scripts": { "start-docs": "SET NODE_ENV=development&&babel-node ./docs/Server.js" } However, on Linux, the SET command is not used, so it would look like this: "scri ...

javascriptnode.jsnpm

Why is the div element within the container not automatically occupying 12 columns, but rather only 1?

I'm struggling to comprehend the bootstrap grid system, as explained in Murach's .Net book. Please take the time to read through the entire post. I am aware of the solution (<div class="col-lg-12">Col x</div> works), but I am curious ...

htmlcss.netbootstrap-4

javascriptcode to execute before loading google maps

I am facing an issue with displaying markers on Google Maps. The problem arises when the array with latitude and longitude values is constructed through an Ajax request. Due to the map being loaded before the initialization of the array, I am unable to see ...

javascriptajaxgoogle-maps

How do I assign a default value to an optional parameter in a derived class in Typescript?

One of my classes is called ClientBase: export class ClientBase { constructor(private uri: string, private httpClient: HttpClient) { } // Contains Various Methods } I have multiple subclasses that are derived from the ClientBase For instance: @I ...

javascripttypescript

Laravel: Retrieving controller results via AJAX by passing multiple checkbox values

I have a select box that is functional and sends values to the controller successfully. However, I am interested in using checkboxes instead of the select box, and I want to achieve this without the need for a submit button. I attempted to implement Ajax ...

jqueryjsonajaxlaravel

Vue alert: Issue in v-on function: 'TypeError: Unable to access property 'Array' of undefined

When I click on the button, I want to validate the inputs for empty values. I am attempting to filter the array and add an error to the array if any of the inputs are empty. However, upon clicking the button, I encounter the error message "'Error ...

javascriptarraysvue.jsvuejs2

What are the distinctions between executing a c++ function and a JavaScript function?

After attempting to execute the c++ program provided below, a compilation error occurred. However, when trying to execute the second javascript code snippet below, no errors were detected. Why is this? ////c++//// #include<iostream> using namespace ...

javascriptc++node.jsfunctiongcc

Error: The function initMap() is not recognized in the Google Maps API

I have been experimenting with the Flickr API and I'm currently working on asynchronously loading images along with their metadata. To accomplish this, I have a script that utilizes three AJAX calls: $(document).ready(function() { var latLon = { ...

javascriptjqueryajaxgoogle-maps

Efficiently transfer the array elements by cutting and pasting

While I am aware that $pull and $push can be used to update array elements in mongodb, I am interested in cutting an element and pasting it to a different index. To illustrate my question, consider the following scenarios: Scenario 1 Starting with the ...

javascriptarraysnode.jsalgorithmmongodb

JS - Reducing in size increases request size

I'm facing an issue with compressing my request - instead of reducing the size, it seems to be increasing it: const requestData = LZString.compress(JSON.stringify({ data: bigBase64StringHere })); await axios.post("api-endpoint", requestData, ...

javascriptgoogle-chromeaxiosrequestcompression