Creating a disappearing carousel on mobile and tablet that disappears when extended to md size

Currently, I am developing a website that consists of a .row with 3 columns at full size, each containing a bootstrap4 card. However, when the website is viewed on tablet or mobile devices, those 3 images should transform into a carousel display.

I'm wondering if it's possible to achieve this functionality. The use of the grid system makes it a bit tricky to implement the carousel feature.

This is the layout I am attempting to create:

Full Size:

Mobile:

This is the code for the full-size layout:

<div class="row justify-content-center">
  <div class="col-md-4 d-flex justify-content-center">
    <div class="card card-radius" style="width: 18rem;">
      <img src="https://res.cloudinary.com/gnprojects/image/upload/v1546624022/cursos_1.jpg" class="card-img-top card-image-radius" alt="...">
      <div class="card-body">
        <h3 class="card-title">Basic Bakery</h3>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#">See more  <i class="fas fa-angle-right"></i></a>
      </div>
    </div>
  </div>
  <div class="col-md-4 d-flex justify-content-center">
    <div class="card card-radius" style="width: 18rem;">
      <img src="https://res.cloudinary.com/gnprojects/image/upload/v1546624022/cursos_1.jpg" class="card-img-top card-image-radius" alt="...">
      <div class="card-body">
        <h3 class="card-title">Basic Bakery</h3>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#">See more  <i class="fas fa-angle-right"></i></a>
      </div>
    </div>
  </div>
  <div class="col-md-4 d-flex justify-content-center">
    <div class="card card-radius" style="width: 18rem;">
      <img src="https://res.cloudinary.com/gnprojects/image/upload/v1546624022/cursos_1.jpg" class="card-img-top card-image-radius" alt="...">
      <div class="card-body">
        <h3 class="card-title">Basic Bakery</h3>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#">See more  <i class="fas fa-angle-right"></i></a>
      </div>
    </div>
  </div>
</div>

When the screen size reduces to tablet dimensions, my aim is to convert the layout into a carousel. Would I need to duplicate the same code within carousel tags and utilize @media queries to switch between the full-size design and the carousel on tablet devices?

htmlcssbootstrap-4

Answer №1

Appreciation to Jasie for the valuable insights. Following extensive efforts in constructing the carousel using grid, I successfully eliminated the carousel's classes with the help of jQuery.

The outcome is a responsive Bootstrap4 carousel designed for mobile and tablet devices; however, it transforms into something other than a carousel when the screen width exceeds 676px.

[codepen][1]

[1]: https://codepen.io/gabonessi/pen/REyXoM

Answer №2

If you're looking to implement a bootstrap carousel, make sure to use the necessary html code to activate it. Here's a helpful link for reference: https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp

It's important to include the carousel slide class in your html code to ensure the carousel functions properly.

You can also dynamically change this class using PHP to adjust the carousel based on viewport size. By adding or removing bootstrap classes accordingly, you can customize the carousel controls as needed.

In PHP, there are various methods to check viewport size such as: * * https://gist.github.com/dcondrey/11342487

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

Height and left properties do not work with CSS transitions

I am currently working on creating a custom toolbox. I want the toolbox to slide in from the left when opened, so I added a transition from left=-1500px to left=0;, which works perfectly. However, when I attempted to add a minimization feature by adding a ...

htmlcss

"Want to know the best way to retrieve the most recent form input value using jQuery or Javascript

I've been reading a lot about using jQuery to set and get field values, but I'm encountering an issue where I can't retrieve the value after submitting, editing it in an input field, and then submitting again. It works the first time, but no ...

javascriptjqueryhtmlformsmeteor

Aligning input and submit fields perfectly in the same line

Struggling to get an input form and submit button to align perfectly in Firefox and Safari. Any advice? Here's the current CSS for the 'Keep in touch' widget on www.landedhouses.co.uk: form.mc4wp-form p{margin-left:0px !important; display: ...

htmlcss

Trigger the execution of the second function upon the successful completion of the first

In the following code, my concept is to display: The clicked kingdom (clicked_id) initiates an attack on (clicked_id). https://i.stack.imgur.com/Bx8QW.png https://i.stack.imgur.com/Cg2GL.png https://i.stack.imgur.com/gUNxM.png How can I trigger the sec ...

javascripthtml

CSS - Tips for affixing footer to the bottom of a webpage

Currently, I am working on a small personal project to brush up my HTML & CSS skills, and I am encountering some difficulties in fixing the footer of my website to the bottom of the page. You can view the site here. I have researched online and discovered ...

htmlcssfooter

Instructions for setting a cookie to conceal a notification bar upon the second page load

I am looking for the following scenario: When a new visitor lands on my website, a notice bar fixed to the bottom of the screen becomes visible. After clicking on a menu item to navigate to another page, a cookie is set upon the second page load. This co ...

javascriptjqueryhtmlcsscookies

What steps should I take to ensure that my Ngrok domain is functioning properly?

Screenshot of Endpoints I've been facing challenges while attempting to get my NGROK domain operational. Despite completing all the necessary setup steps and successfully running multiple tunnels simultaneously with NSSM, as well as having a business ...

javascriptphphtmlnode.jsngrok

After filling out the form, the user's entered information is instantly shown on the same page

I want to create a form where my friend can input information that will be displayed on the same page. For example, when he enters the title in a text field and clicks submit, it should appear in the title box. Additionally, he should be able to enter va ...

jqueryhtmlcssajax

Why do identical elements show different scrollHeights when overflowed and how can this discrepancy be resolved?

I am using a plugin that generates a <p> element and continuously fills it with the content from a <textarea>. This plugin positions the <p> directly below the <textarea>, and styles them so that they appear identical in terms of th ...

javascriptjqueryhtml

Using innerHTML to replaceAll also modifies characters within the tags

I created a custom function to emphasize specific strings within a text by surrounding them with span tags and updating the content using the innerHTML property of the targeted element. However, I encountered an issue while working with innerHTML instead ...

javascripthtmlcss

What is the best way to center the dialogue on a GMap embed?

After embedding a Google Map using the Google Map Embed feature, I noticed that the info dialogue is not centered by default. You can see an example of this here. I came across another website where the dialogue is centered on the screen by default. You ...

htmlgoogle-maps

removing breaks from a text field

Struggling to remove line breaks when copying from Word and pasting into a textarea. I thought it would be easy, but it's not working as expected. I must be missing something simple, but I can't seem to find the issue. The function below is suppo ...

javascriptjqueryhtml

Achieving a persistent footer at the bottom of the page within Material Angular's mat-sidenav-container while using the router-outlet

I am looking to keep my ngx-audio-player fixed at the bottom of the screen, similar to what you see on most music streaming websites. I currently have a structure with divs and various elements for dynamic content and playing music. The issue is that the ...

htmlcssangularangular-material

What is the best method for developing a draggable element that remains stable?

I have developed a simple script for draggable elements, however, I am facing an issue. Whenever I move the mouse quickly, the element loses focus. Is there a way to improve the stability of the dragging functionality regardless of how fast I move the mou ...

javascripthtmlcssvue.js

Why is my JavaScript code functioning properly on jsfiddle but failing to work when run locally?

After recently creating JavaScript code that allows for form submission using the <form> tag, I encountered an issue when trying to implement it within an HTML page. Here is a snippet of the code: <script type="text/javascript"> var m ...

javascripthtmldom-events

What is the process for adding my JSON data to a select dropdown list?

Looking to populate a selectlist in HTML with options retrieved from an API. Below is the HTML code : <div id="example" role="application"> <div class="demo-section k-header"> <select id="FeaturesSelec ...

javascripthtmljqueryapi

Aurelia validator fails to refresh user interface

Despite the aurelia-validator plugin working correctly for form submission and validation, with all properties updating properly, the UI does not reflect any changes. There is no red outline around incorrect properties or error messages displayed. I have r ...

javascripthtmlvalidationaurelia

Developing Wordpress plugins involving images - path not found

I'm currently developing a WordPress plugin and encountering some issues with images. My plugin is located in wp-content/plugins/my-plugin/ directory, and within that, there's a folder named images/test.png - how can I properly reference this ima ...

cssstylesheetwordpress

Having trouble getting my initial Vue.js code to function properly alongside basic HTML

I am in need of assistance with this code as it does not seem to be working properly. I am using an external js file named app.js for the Vue JS code in the index.html file. Here is the code from index.html: new vue({ el: '#app', data: { ...

javascripthtmlvue.js

Display elements with a particular class using jQuery

I want to utilize jQuery to show all elements within a UL that have the class .active. Is this how my code should look? if ($(this).hasClass('active')) { $( ".active" ).show(); } This is my HTML structure <ul> <li>&l ...

jquerycssshow