Troubleshooting: Updating Bootstrap Carousel Image for Mobile Display

/*Custom Carousel Styling for Mobile Devices*/
@media (max-width: 425px){
  #banner-one img{
    background-image: url("/images/mobile_banner1.jpg") !important;
  }
  
  #banner-two img{
    background-image: url("/images/mobile_banner2.jpg") !important;
  }
  
  #banner-three img{
    background-image: url("/images/mobile_banner3.jpg") !important;
  }
  
  #banner-four img{
    background-image: url("/images/mobile_banner4.jpg") !important;
  }
}
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div id="banner-one" class="carousel-item active">
      <img class="d-block w-100" src="/images/banner-one.jpg" alt="First slide">
    </div>
    <div id="banner-two" class="carousel-item">
      <img class="d-block w-100" src="/images/banner-two.jpg" alt="Second slide">
    </div>
    <div id="banner-three" class="carousel-item">
      <img class="d-block w-100" src="/images/banner-three.jpg" alt="Third slide">
    </div>
    <div id="banner-four" class="carousel-item">
      <img class="d-block w-100" src="/images/banner-four.jpg" alt="Fourth slide">
    </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>
</div>

I encountered a challenge with my Bootstrap Carousel in my project, as it functions flawlessly across all views except on mobile devices. I attempted several solutions to modify the carousel images for each slide specifically in the Mobile View, but unfortunately, nothing seemed to work as intended.

javascripthtmljquerycssbootstrap-4

Answer №1

You have the ability to control the visibility of both images using CSS.

Check out the snippet below (open in full screen to see the views switch):

.desk-img {
  display: block;
}

.mobile-img {
  display: none;
}

@media (max-width: 700px) {
  .desk-img {
    display: none !important;
  }
  .mobile-img {
    display: block;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div id="banner-one" class="carousel-item active">
      <img class=" w-100  desk-img" src="https://via.placeholder.com/800x380?text=slide%201" alt="First slide">
      <img class=" w-100  mobile-img" src="https://via.placeholder.com/800x380?text=mobile slide%201" alt="First slide">
    </div>
    <div id="banner-two" class="carousel-item">
      <img class=" w-100 desk-img" src="https://via.placeholder.com/800x380?text=slide%202" alt="Second slide">
      <img class=" w-100  mobile-img" src="https://via.placeholder.com/800x380?text=mobile slide%202" alt="Second slide">
    </div>
    <div id="banner-three" class="carousel-item">
      <img class=" w-100 desk-img" src="https://via.placeholder.com/800x380?text=slide%203" alt="Third slide">
      <img class=" w-100  mobile-img" src="https://via.placeholder.com/800x380?text=mobile slide%203" alt="Third slide">
    </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>
</div>

Answer №2

One solution could be to utilize the picture element:

<picture>
  <source media="(max-width: 425px)" srcset="mobile-img.jpg" />
  <source media="(max-width: 768px)" srcset="tablet-img.jpg" />
  <img src="desktop-or-default-img.jpg" class="d-block w-100" alt="..." />
</picture>

With this setup, mobile-img.jpg will display on screens below 425px, tablet-img.jpg will appear between 425px and 768px, and desktop-or-default-img.jpg will show for screens above 768px.

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

Localized Error: The property 'clientWidth' cannot be retrieved as the object is null or undefined

The issue with the error message seems to only occur on Internet Explorer, and unfortunately there doesn't seem to be a clear solution at the moment. Even after setting http-equiv="X-UA-Compatible" to IE8, the problem persists and I cannot seem to re ...

javascriptjqueryhtmlinternet-explorerdom

What is the best way to generate a new div element when the content exceeds the preset height of the current div?

CSS .page{ width: 275px; hight: 380px; overflow: auto; } HTML <div class="page">dynamic text</div> Is there a way to automatically create new div elements when dynamic text overflows past the fixed height of the init ...

javascriptjquerydynamictextoverflow

What is the best way to shuffle the displayed images on a website to make the order random?

I'm looking to create a unique collage using 10 image files in a folder with vanilla JS. The goal is to randomize the images within a Bootstrap container on a website while maintaining their aspect ratio by utilizing a grid layout. However, I've ...

javascripthtmlcssbootstrap-4

Is it possible to dynamically change HTML content by utilizing a JSON file?

Looking to implement a JavaScript loop (using jQuery) that can dynamically populate the HTML file with content from a JSON file based on matching <div> ids to the JSON "id" values. The solution should be scalable and able to handle any number of < ...

javascriptjqueryhtmljsonloops

How can one effectively capture and handle Ajax errors on a global scale in an ASP.NET MVC application?

Often I catch myself adding this (simplified) code in multiple javascript files: $(document).ajaxError(function (e, xhr, settings, exception) { alert('error in: ' + settings.url + ' \\n' + ...

jqueryajaxasp.net-mvcerror-handling

Display data in an HTML table using PHP and AJAX within a single file

My project involves using PHP to populate an HTML table with random numbers upon page load. What I'm aiming to achieve is the ability to click a button and have the table populated with new numbers by invoking PHP through an ajax request. The challeng ...

javascriptphpajax

execute a file in nodejs

I am trying to use nodejs to load test.txt file. var fs = require('fs'); fs.readFile('./test.txt', function (err, data) { if (err) { throw err; } console.log(data); }); The server path is C:\server\test\serve ...

javascriptnode.js

What strategies can I use to eliminate nested loops while constructing a navigation?

I am working with a JSON file that contains data for a navigation panel consisting of links. A brief snippet of the file is shown below: [ { "category": "Pages", "links": [ { "url": "#", "cap ...

javascriptjquery

Cheerio - Ensure accurate text retrieval for selectors that produce multiple results

Visit this link for more information https://i.stack.imgur.com/FfYeg.png I am trying to extract specific market data from the given webpage. Specifically, I need to retrieve "Sábado, 14 de Abril de 2018" and "16:00". Here is how I did it using Kotlin an ...

javascriptjqueryweb-scrapingweb-crawlercheerio

Bootstrap 5.5.2 facing transition issues on bundle.js

Recently, I attempted to incorporate zoom.js into my project to enable image zoom functionality similar to that of the medium website. After linking both the CSS and JS files, it seemed to be working properly. However, I encountered an issue where the tra ...

javascripthtmlbootstrap-5

Using both PHP and HTML to create a select tag

I'm new to PHP and HTML and I'm trying to create a form with three drop-down lists (select tags). However, when I select an option from one list, the values in the other two lists disappear. Should I save the selected values when submitting the f ...

phphtmltags

What is the reason behind jQuery failing to trigger the 'input' event when setting the input to $.val('')?

What is the reason behind the absence of the input event trigger when using jQuery.val('') to change the value of a text input? http://jsfiddle.net/EC85C/2/ https://developer.mozilla.org/en-US/docs/Web/Reference/Events/input ...

jquery

Issues with Javascript Arrays not adding objects with duplicate values

When objects have arrays with the same values, only one of them is considered. For example: data[2018][2][25] <-- this one gets ignored by the object data[2018][2][22] Sample Code: var date = new Date(); var data = {}; <?php $eventsNum = 3> &l ...

javascriptphparraysobjectpush

Determine whether an item in a RadGrid is currently in Edit mode using Javascript

Looking for a solution with a telerik RadGrid where I need to determine if a GridDataItem is in edit mode. Preferably using JavaScript. I know how to do this with VB, but I want to achieve it on the client side. Additionally, I would appreciate assistan ...

javascriptasp.netradgrid

Encountered an issue during the creation of a Nuxt.js project using the command line tool, where a SyntaxError was triggered

I encountered an issue while attempting to set up a nuxt.js starter project using the nuxt cli. Here are the steps I followed: Installed vue cli globally with the command: npm install -g vue-cli Created the project using: vue init nuxt-community/star ...

javascriptnode.jsexpressvue.jsnuxt.js

The basic node API request is not showing any information

There is a request in my server.js file var Post = require('./../models/post'); //GET ALL POSTS app.get('/api/posts', function (req, res) { Post.getPosts(function (err, posts) { if(err) { throw err; } ...

javascriptnode.jsmongodbexpressmongoose

Input specific ng-if conditions

I'm a bit confused about the conditions for my ng-if and could use some assistance. I have a form on my page that is rendered using ng-repeat and a couple of custom filters. You can check out this plunker. The issue I'm facing is that I need to p ...

javascriptangularjs

Retrieve Image URL from RSS Medium Feed

I am attempting to showcase the images from each post in medium's RSS feed using only JavaScript or Angular, without relying on JQuery. I am able to retrieve the title, creation date, and link for each post. Currently, I am developing with Ionic2. en ...

javascriptangularjsionic2rssmedium-editor

JavaScript function within a local website that interacts with an external site to set a cookie

As the owner of both domain A.com and B.com, I am faced with a situation. On B.com, there is a handler (ashx) that writes a cookie. However, I am currently on A.com. My goal is to trigger this handler from site A.com using JavaScript (specifically jQuery) ...

c#jqueryasp.net

How to Customize Field Text in Django HTML Forms

I am utilizing a Django form: from django import forms from hello.models import Whisper class WhisperForm(forms.ModelForm): class Meta: model = Whisper fields = '__all__' When I display it on an HTML page, it looks like th ...

pythonhtmldjangodjango-forms