I am looking to design a pair of Carousels that will be positioned right next to

Is it possible to set up two Carousels next to each other?

https://i.sstatic.net/Dv7PB.png

<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <div id="Carousel" class="carousel slide">

            <ol class="carousel-indicators">
                <li data-target="#Carousel" data-slide-to="0" class="active"></li>
                <li data-target="#Carousel" data-slide-to="1"></li>
            </ol>

            <!-- Carousel items -->
            <div class="carousel-inner">

                <div class="item active">
                    <div class="row">
                        <div class="col-md-6"><a href="images/one.jpeg" target="_blank" class="thumbnail"><img src="images/two.jpeg" class="img-responsive" alt="Image" style="max-width:100%;"></a></div>
                        <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" alt="Image" style="max-width:100%;"></a></div>
                    </div><!--.row-->
                </div><!--.item-->

                <div class="item">
                    <div class="row">
                        <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" alt="Image" style="max-width:100%;"></a></div>
                        <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" style="max-width:100%;"></a></div>
                    </div><!--.row-->
                </div><!--.item-->

            </div><!--.carousel-inner-->

            <a data-slide="prev" href="#Carousel" class="left carousel-control black-link">‹</a>
            <a data-slide="next" href="#Carousel" class="right carousel-control black-link">›</a>

        </div><!--.Carousel-->

    </div> <!--.col-md-8-->
</div> <!--.row-->

<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <div id="Carousel2" class="carousel slide">

            <ol class="carousel-indicators">
                <li data-target="#Carousel" data-slide-to="0" class="active"></li>
                <li data-target="#Carousel" data-slide-to="1"></li>
            </ol>

            <!-- Carousel items -->
            <div class="carousel-inner">

                <div class="item active">
                    <div class="row">
                        <div class="col-md-6"><a href="images/one.jpeg" target="_blank" class="thumbnail"><img src="images/two.jpeg" class="img-responsive" alt="Image" style="max-width:100%;"></a></div>
                        <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" alt="Image" style="max-width:100%;"></a></div>
                    </div><!--.row-->
                </div><!--.item-->

                <div class="item">
                    <div class="row">
                        <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" alt="Image" style="max-width:100%;"></a></div>
                        <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" style="max-width:100%;"></a></div>
                    </div><!--.row-->
                </div><!--.item-->

            </div><!--.carousel-inner-->

            <a data-slide="prev" href="#Carousel" class="left carousel-control black-link">‹</a>
            <a data-slide="next" href="#Carousel" class="right carousel-control black-link">›</a>

        </div><!--.Carousel-->

    </div> <!--.col-md-8-->
</div> <!--.row-->

and perhaps I used the wrong term during my search

javascripthtmlcssbootstrap-4carousel

Answer №1

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport content="width=device-width, initial-scale=1">
  <link rel="stylesheet href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://placeimg.com/640/480/any" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://placeimg.com/640/480/any" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://placeimg.com/640/480/any" alt="Third slide">
    </div>
  </div>
</div>
</div>
<div class="col">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://placeimg.com/640/480/any" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://placeimg.com/640/480/any" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://placeimg.com/640/480/any" alt="Third slide">
    </div>
  </div>
</div>
</div>
</div>
</body>
</html>

Change the col values to col-2 or col-3 and so forth for your desired layout variations

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

Exploring the Modularity of Post Requests with Node.js, Express 4.0, and Mongoose

Currently, I am immersed in a project that involves utilizing the mean stack. As part of the setup process for the client-side, I am rigorously testing my routes using Postman. My objective is to execute a post request to retrieve a specific user and anot ...

javascriptnode.jsrestexpressmongoose

Which method is better for HTML5/JavaScript GeoLocation: Passing data to a callback function or suspending an async call using promises?

Trying to figure out how to utilize HTML5/Javascript Geolocations effectively for passing location data to an ajax call and storing it in a database. The main challenges I'm facing are the asynchronous nature of the Geolocation call and issues with va ...

javascriptajaxhtmlasynchronousgeolocation

Locate the ancestors of a specific element inside a designated container

Reviewing my code, it contains... <div class="container"> <div id="tropical"> <div class="info"> <div class="desc"> <p>Lorem ipsum.......</p> ...

javascriptjqueryhtmlcss

Encountered a problem with AngularUniversal prerendering: UnhandledPromiseRejectionWarning: Unable to locate NgModule metadata for 'class{}'

Objective The task may seem lengthy, but it's straightforward! Currently, I am utilizing Angular Universal for Server-Side Rendering (SSR) by following a tutorial. The Universal/express-engine has been installed, main.js is generated in the dist/pro ...

javascriptangulartypescriptexpressangular-universal

Issue with the appearance of the footer in my Wordpress template

After creating a WordPress template, I noticed that the footer is not extending to 100% width as expected. Check out the page here Any suggestions on why this might be happening? Could it be due to a missing closing div tag somewhere in the code? Thank ...

csswordpress

Sending an HTTP request from within an Express/Node.js application

I am currently in the process of setting up an express service for a program I am developing. The goal is to interact with an external API, retrieve the data, and store it in a MongoDB database that I have already set up. While this task may seem straight ...

javascriptangularjsnode.jsexpress

Ensure that the div is completely filled by the button and input elements

My dilemma involves filling a div element with a button and an input field. I'm struggling to set the exact width of the button, which is causing the input field to overflow the parent container. Despite many attempts with various properties, includin ...

htmlcssbuttoninput

When the checkbox is ticked, icheck will make a POST request, but it won't

I am currently experimenting with using icheck to handle POST requests for a temporary table. My goal is to add an entry when a box is checked and remove it when unchecked. Currently, when I check the box, it alerts me and successfully stores the informati ...

javascriptjqueryajax

Unable to scroll to top using div scrollTop() function

Here's the fiddle I mentioned: http://jsfiddle.net/TLkmK/ <div class="test" style="height:100px;width:70px;overflow:auto"> Some text here that needs scrolling. </div> alert($('.test').scrollTop()); Feel free to scroll down ...

javascriptjqueryhtmlscroll

Type Error in Node.js Form Submission: Unable to define 'userId' property due to undefined value

After implementing login and registration features on a specific page in my application at views/employee/login.hbs, I encountered an issue. Upon entering registration details (email, username, password, and confirm password) and clicking the register butt ...

javascriptnode.jsmongodbexpressmongoose

Place one flex item in the center and align another item to the bottom

I am attempting to center one flex item both vertically and horizontally. At the same time, I want some text to remain fixed at the bottom of the flex container. When I use margin-top:auto on the text, it just moves the inner box to the top. Any suggesti ...

htmlcssflexbox

Tips for choosing an item within a div -> ul -> li using Selenium

I need help with a menu that displays a list on mouse hover, and I'm trying to click on "Logout". However, the code I've written so far is not giving me the desired result. This is the Java code I have: public void logout() throws Exception { ...

javahtmlcsseclipseselenium

Encountering a 500 Internal Server Error while attempting to insert data into a MYSQL database using

I am experiencing an issue while trying to insert radio checked data values into a MySQL database using PHP, jQuery, and AJAX. Whenever I attempt to insert the values, I encounter an internal server 500 error... Any assistance would be greatly appreciated ...

phpjqueryhtmlmysqlajax

Tracking time in seconds and milliseconds with a stopwatch

Greetings! I am currently working on a reaction test to measure how quickly users react, and I seem to be struggling to find the necessary resources. I am curious about creating a basic stopwatch in seconds and milliseconds that can be triggered later by a ...

javascriptjqueryhtmlcss

divide a single item into several items depending on its attribute

data = {1-inputWidth : '30px' , 1-inputHeight: '30px', 1-color : 'red', 2-inputWidth : '20px' , 2-inputHeight: '10px', 2-color : 'blue', 3-inputWidth : '60px' , 3-inputHe ...

javascript

The issues of cross-origin domains arise when utilizing iframes with src links originating from the server side

Encountering a cross-origin domain issue, receiving the following error while working with an iframe: candidateInterviewCtrl.js:39 Uncaught SecurityError: Blocked a frame with origin "http://localhost:9000" from accessing a frame with origin "http://local ...

javascriptangularjsiframe

Is the xmlhttprequest timeout/abort feature not functioning as anticipated?

Check out this snippet of my AJAX function: /** * This function initiates an AJAX request * * @param url The URL to call (located in the /ajax/ directory) * @param data The data to send (will be serialized with JSON) * @param callback The fu ...

javascriptajaxiframeconnection-timeout

Is there a way I can toggle between nav-pills and nav-stacked based on varying screen sizes?

Can someone help me with a solution to switch between nav-stacked nav-pills for mobile and non-nav-stacked nav-pills for other devices using Bootstrap? For instance, on a desktop: <nav> <ul class="nav nav-pills"> <li role="presentat ...

htmlcsstwitter-bootstrap

I am unable to incorporate added height into the component

In my current project using react.js, material-ui, and sass, I had the task of creating a ChatBit component. After writing it, here is the code: customComponent.js file. // @flow import * as React from 'react'; import { useState } f ...

javascriptcsssassmaterial-uireactjs

Woocommerce Dual Column Payment Portal

I prefer a two-column layout for the checkout process on www.narwal.shop/checkout Here is the code I added: /* Large devices (large desktops, 1200px and up) */ @media (min-width: 993px) { /* --------------------- WOOCOMMERCE -------- ...

csswordpresswoocommercecheckout