Is it possible to merge elements into a carousel in the mobile display?

I have a collection of elements that I would like to combine into a swipeable carousel. Is there a way to achieve this, specifically to make it a carousel only in mobile view?

If needed, here is the HTML code. Thank you for your assistance.

<div class="col-md-5 col-xs-12 d-flex justify-content-center little">
    <div class="col launch">
      <div class="row-sm-3 row-md-4 fx">
        <div class="row d-flex justify-content-center resim"><img src="css/img/Icon1.png" alt=""></div>
        <div class="row d-flex justify-content-center baslik">First 7 Days Free</div>
        <div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
      
      </div>
      <div class="row-sm-3 row-md-4 fx">
        <div class="row d-flex justify-content-center resim"><img src="css/img/Icon2.png" alt=""></div>
        <div class="row d-flex justify-content-center baslik">Fully Support</div>
        <div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
        
      </div>
  </div>
  <div class="col star">
      <div class="row-sm-3 row-md-4 fx">
        <div class="row d-flex justify-content-center resim"><img src="css/img/Icon3.png" alt=""></div>
        <div class="row d-flex justify-content-center baslik">Modern Flat Design</div>
        <div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
      </div>
      <div class="row-sm-3 row-md-4 fx" >
        <div class="row d-flex justify-content-center resim" ><img src="css/img/Icon4.png" alt="" id="ozel"></div>
        <div class="row d-flex justify-content-center baslik">User Friendly</div>
        <div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
      </div>
  </div>


  </div>
htmlcssbootstrap-4slidercarousel

Answer №1

One solution is to include code for both a grid-like display and a carousel. Here is an example:

<!-- Code of your grid view -->
<div id="gridView">
  <div class="col-md-5 col-xs-12 d-flex justify-content-center little">
    ...
  </div>
</div>
<!-- Code of your carousel -->
<div id="carouselExampleControls" class="carousel slide mx-3 my-2" data-ride="carousel">
  ...
</div>

Utilize the Bootstrap display property to show and hide containers appropriately. For example, use d-md-none to hide on md screens and wider, and d-none d-md-block to hide on screens smaller than md:

<!-- Code of your grid view -->
<div id="gridView" class="d-none d-md-block">
  <div class="col-md-5 col-xs-12 d-flex justify-content-center little">
    ...
  </div>
</div>
<!-- Code of your carousel -->
<div id="carouselExampleControls" class="carousel slide mx-3 my-2 d-md-none" data-ride="carousel">
  ...
</div>

Since d-flex is being used, an extra 

<div id="gridView">
has been added around it.

Refer to this Bootstrap carousel example with captions:

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    ...
  </ol>
  ...
</div>

You can integrate your containers within this structure and combine it with the above approach for a seamless display.

Best of luck!

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

Unable to place text inside an image using Bootstrap

My issue pertains to text placement on images, which is behaving oddly in my code. The problem seems to stem from a hover system I have implemented, where the text only displays correctly when triggered by a hover event. My code snippet below addresses the ...

htmlcssbootstrap-5

What is the most efficient way to transform HTML into React components effortlessly?

I have been attempting to automate the process of converting HTML into React components. I followed the link below to automatically convert HTML into React components: https://www.npmjs.com/package/html-to-react-components However, I encountered an issue ...

javascripthtmlreactjsnpm

Unknown identifier in the onClick function

I want to create a JavaScript function that can show or hide a paragraph when clicking on an arrow. The challenge I'm facing is that I have a list of titles generated in a loop on the server, and each title is accompanied by an arrow. Initially, the c ...

javascriptjqueryhtml

Tips on obtaining the element selector when a div is being dynamically loaded during an AJAX call

When running two ajax calls, I encounter an issue where the second call loads some HTML onto the page that is needed for processing a specific div in the first call. However, since the div is not present until after the second call is completed, I receiv ...

javascriptjqueryhtmlajax

Steps for displaying a website within a specific Div using HTML

I'm trying to set up a website to open within a specific <div> tag, like the example shown in this link: Responsive. Can anyone spot what I'm doing incorrectly? <html> <head> <script> function mobile320() { ...

javascriptjquerycsshtml

What is the reason for requiring the addition of "repeat" to ensure that it appears on the

Check out my website Take a look at my custom CSS dot { background:url("images/non_selected.png") repeat scroll 22px 22px transparent; height:22px; width:22px; } After making this change url("images/non_selected.png") norepeat scroll 22px 22px tran ...

htmlcss

What is the method for HTML inline handlers to retrieve the global window object and the variables contained within it?

During my coding test, I encountered an interesting scenario. I had a function called write and used a button with an inline onclick handler to trigger the write() function. function write(text) { alert(text) } <button onclick='write("Some tex ...

javascripthtmlscopedom-eventsglobal-scope

What are some tips for managing the hover effect using CSS3?

Here's a demonstration of my current setup. When you hover over the black box, a transition occurs and reveals my tooltip. However, I only want the tooltip to appear when hovering over the black box itself. Currently, the transition also triggers if y ...

javascriptjqueryhtmlcss

Issue with displaying the file-field in Django admin after upgrading from Django 2.1 to version 3

Since upgrading from Django 2.1 to 3, the file field in Django admin is now displaying as "loading". https://i.sstatic.net/8JDWu.png An error is appearing in the console. https://i.sstatic.net/RCgwt.png https://i.sstatic.net/78YtG.png Previously, ther ...

javascripthtmlcssdjangoconsole

Using Twig: Transfer the content of a textfield as a parameter in the routing

I have a task of redirecting to another page while passing along the value from a textfield. Here is my current code: {% extends "base.html.twig" %} {% block body %} <button onclick="host()">Host the session</button> <button onclic ...

javascripthtmlsymfonyroutestwig

Creating a Smooth Curve with CSS

Recently, I've decided to create a unique clock design inspired by the one showcased here. However, instead of using images like they did, I would like to implement ARC. Is it possible to create an arc using only CSS? For instance, if I wanted to make ...

htmlcss

Flick user media cards left or right to uncover the following one

I am currently working on creating a widget that will display user media objects in a horizontal layout using ng-repeat. The goal is to allow users to swipe left or right to reveal the next media card, similar to the image shown below. In the example, you ...

javascripthtmlcssangularjs

Adjusting jQuery Button Width with input type of "button"

Currently, I am working with jQuery Mobile to develop a straightforward Golf Score Card App. To calculate the total at the end of a form submission, I've implemented the following code. <input id="total" type="text" name="total" value="" readonly= ...

jqueryhtmlcssinputsize

Variables for Angular Material themes

My app has multiple theme files, and I select the theme during runtime. .client1-theme{ // @include angular-material-theme($client1-theme); @include all-component-colors($client1-theme); @include theme-color-grabber($client1-theme, $client1-a ...

cssangularthemesscss-mixins

A guide to adjusting the size of an iframe within a bootstrap modal

I am currently facing an issue where I am trying to display an iframe inside a bootstrap modal. The challenge is that the content within the iframe is dynamic, so the size may vary each time the modal is opened. As seen here, the modal appears too big and ...

htmlbootstrap-4bootstrap-modal

I am unable to tap on the input field

Having a major issue here... I've encountered a problem with this website: sk.maze-it.dk When attempting to click on "BOOK MØDE" in the navigation bar and select an available date (e.g. 30) followed by clicking on "Book møde", two fields appear - o ...

javascriptphphtmlcsswordpress

Flexbox - Consistent height image columns

I'm working on a basic flexbox layout that looks something like this: html,body { margin:0; padding:0; } body { height:100%; width:100%; } .panel-grid { -webkit-align-items: flex-start; ...

htmlcssflexbox

Update the styling of each div element within a designated list

Looking for a way to assist my colorblind friend, I am attempting to write a script. This is the layout of the page he is on: <div class="message-pane-wrapper candy-has-subject"> <ul class="message-pane"> <li><div style=" ...

javascripthtmlcss

Text with gradient overlays

After successfully implementing a gradient effect on an image, I am facing the issue of it covering my text as well. I am struggling to locate the part of the code that needs to be modified in order to prevent the text from being obscured by the gradient e ...

htmlcssbootstrap-4

Div refuses to clear floats

Working on an app at and encountering an issue with the main container not clearing floats, causing overflow on the content. Attempted to use this CSS: .clearfix:after { content:""; display: table; clear: both; } Added the class to the main ...

htmlcss