Transform a series of images into a slider for compact devices

Looking to transform this row of images... https://i.sstatic.net/UWBUy.png

I need to create a small carousel for displaying the images on mobile devices (Responsive Design) using bootstrap. Here is the code for the current arrangement of images:

<div class="row d-flex justify-content-center pb-5" style="background-image: url('assets/img/Vector_Chain1.png'); margin-left:0px; margin-right:0px;">
                    <img src="assets/img/TheEye.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
                    <img src="assets/img/ThePyramid.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
                    <img src="assets/img/TheEthernal.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
                </div>

My goal is to have this div automatically convert into a carousel when viewed on small devices like phones, in order to provide optimal visualization.

htmlcsstwitter-bootstrapbootstrap-4carousel

Answer №1

  1. Add the classes d-block and d-md-flex to your container element.

  2. Set up a separate container for the carousel functionality specifically designed for mobile devices.

This is the final version of the HTML code:

<div class="row d-none d-md-flex justify-content-center pb-5" style="background-image: url('assets/img/Vector_Chain1.png'); margin-left:0px; margin-right:0px;">
  <img src="assets/img/TheEye.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
  <img src="assets/img/ThePyramid.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
  <img src="assets/img/TheEthernal.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
</div>

<div id="carouselExampleSlidesOnly" class="carousel slide d-block d-md-none" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="assets/img/TheEye.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="assets/img/ThePyramid.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="assets/img/ThePyramid.png" alt="Third slide">
    </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

Browsing through tabs to locate specific text

Currently, I am developing a feature for a Chrome extension and I could use some assistance in debugging. The feature involves retrieving a user's input as a string from a text box on popup.html and then scanning through all the open tabs in the curr ...

javascriptjqueryhtmlgoogle-chrome-extension

Content below divs that are fixed and absolutely positioned

I have a design layout similar to this (a small snippet) and I am facing an issue where the text within .content is not clickable. The positioning of #gradient is fixed due to the background image, and #empty has an absolute position to cover the entire bo ...

css

Ensure that icons are evenly spaced, regardless of whether they display a notification badge or not

Although not as abundant as depicted in the image below, it is more evident that I am seeking a couple of font awesome icons overlaid with a bootstrap badge to display notifications. The two issues that I am encountering are: There is excessive spacing ...

htmlbootstrap-4

How can you display Unicode characters within an HTML input element with type=submit value?

I am having trouble displaying a right facing triangle character after the main text on a form button based on a designer mockup. The code snippet causing issues is as follows: <input type="submit" value="Add to basket &#9654;" /> The desir ...

jqueryhtmlunicode

The location of the footer is not aligned correctly

Recently, I encountered an issue that has left me puzzled. The problem is that the footer on my webpage is appearing between the calendar button and the calendar itself. Here is a snippet from my calendar.html file: {% extends 'base.html' %} {% ...

htmlcssdjango

Present Images and Text Alongside Each Other in a Grid Layout

My goal is to have an image and text displayed side by side, but for some reason they are appearing stacked on top of each other. https://i.stack.imgur.com/F8OXL.png If you want to take a look at the code I am using, here is the link to my CodePen: https: ...

htmlcss

Navigating to User's Specific Info Page using Node.js

Would love some input on my current issue. I have a table featuring a list of users, and my goal is to display user information in detail whenever a user (which corresponds to a row in the table) is clicked. The process involves identifying which user was ...

javascripthtmlnode.jsexpress

CSS - Apply a captivating background to specific columns within a grid layout

Wow, I'm really struggling with CSS and this particular issue has me perplexed. I need to add background colors to specific columns but not all of them. The problem is that the padding gets messed up when I do this. Imagine having a headache while try ...

csstwitter-bootstrap

jQuery text alignment breaking bug

I am attempting to create an overlay for a couple of my divs to prevent users from progressing without completing previous tasks. The overlay is functioning correctly and the message is displaying, but I encounter issues when trying to center the message. ...

jquerycss

displaying and concealing elements with jquery

Is there a way to hide a div if the screen size exceeds 700px, and only show it when the screen size is less than 700px? Below is the jQuery code I'm attempting to use: jQuery(document).ready(function() { if ((screen.width>701)) { $(" ...

javascriptjquerycss

Concentrate on the HTML element once it becomes active

I am facing a challenge where I need to focus on a specific input element. However, there is a spinner that appears on page load and remains hidden until certain http requests are completed. All inputs are disabled until the requests are finished. The setu ...

javascriptjqueryhtmlcssangularjs

Neglect the styling of the element wrapper

Imagine I have two divs set up like so: <div name="parent" style="color:blue;padding:5px"> <div name="child" style="background:red"> Text that disregards the color:blue and padding:5px properties, yet still follows the background:red set ...

csshtmlparent

How do I position an element at the center of a div using CSS?

Here is some HTML code that I need help with: <div id='nav'><a href ='./?page=1'>1</a> 2 <a href ='./?page=3'>3</a> <a href ='./?page=4'>4</a> <a href ='./?page=5&ap ...

css

What could be causing the sudden disappearance of the button?

There is an element with the ID "alpha" that contains the text "Now I'm here...". When the button is clicked, only the text should be removed, not the button itself. <div id="alpha">Now I'm here...</div> <button type="button" oncl ...

javascripthtmldom

Troubleshooting a jQuery carousel: How can I prevent the thumbnails from automatically moving forward?

I am currently modifying a carousel where the thumbnails are moving out of frame. I need assistance in keeping them stationary, except for the blue thumbnail highlighter. To better illustrate the issue, I have created a jsFiddle here: http://jsfiddle.net ...

javascriptjquerycarousel

CSS in flexbox nested with no overflow utilized

I have created a basic "table" layout using flexbox. I want to implement horizontal scrolling for a specific part of the table by using overflow-x property. When you look at the provided code snippet, you'll notice that the CSS styles are only visib ...

htmlcssflexbox

Using Rails' link_to method within Bootstrap modals

I'm trying to implement a voting system where users can vote on different items displayed in a Bootstrap modal. Each item is listed as a button on the index page, and when clicked, it opens up the modal for voting. However, I'm facing challenges ...

javascriptjqueryruby-on-railsajaxtwitter-bootstrap

I am having difficulty with the fadeIn animation not working as expected in my situation

http://jsfiddle.net/9w0v62fa/1/ Instead of using opacity 0 and 1 in two different places, which I find redundant, I attempted to utilize the CSS animate property. However, I couldn't get it to work. Here is my code: .btn{ background:blue; pa ...

javascriptjqueryhtmlcss

Incomplete Rotation CSS Animation

I am attempting to create a horizontal spinning image using only CSS3. Check out my webpage here: You can find the CSS file here: www.csupomona.edu/~lannguyen/ISSM_WEB/css/main.css The code for calling the spin effect is at the top, with the actual imp ...

cssanimation

Troubleshooting issue with removing an item from jQuery's html5 localStorage

Exploring the following code snippet: $('#doneItem').click(function(){ $(this).each(function(index){ var item = 'personal' + index; alert(item); localStorage.removeItem('personal' + ...

jqueryhtmllocal-storage