What is the best way to showcase two div elements side by side within my carousel

/* Implementing slideshow functionality */

var currentIndex = 0;
displaySlides();

function displaySlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    currentIndex++;
    if (currentIndex > slides.length) {currentIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[currentIndex-1].style.display = "flex";  
    dots[currentIndex-1].className += " active";
    setTimeout(displaySlides, 5000); // Change image every 2 seconds
}


/* End of slideshow implementation */
@charset "UTF-8";
/* Stylesheet */
body {
  margin: 0;
  font-size: 28px;
  background-color: #00011f;
  display: flex;
  flex-direction: column;
  margin : auto;
}

img {vertical-align: middle;}

/* Slideshow container */
#slideshow{
float: flex;}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  margin-top: 50px;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Indicators */
.dot {
  height: 5px;
  width: 5px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* Responsive design */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px;}
}
<!DOCTYPE html>
<html>

<link rel="stylesheet" href="CSS/style2.css" />
<link rel="shortcut icon" href="IMAGES/PNG/favicon.png" />

    <head>
        <meta charset="utf-8" />
        <title>Electrophotonic Engineering</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">


    </head>


    <body>
    
<div class="slideshow-container">

<div id = "slideshow" class="mySlides fade">
  <div><img src="IMAGES/PNG/background.png"></div>
  <div class="text"> Test Text Here </div>
 </div>


<div class="mySlides fade">
  <img src="IMAGES/PNG/waterfall.png" style="width:100%">
  <div class="text">Insert Caption Here</div>
</div>

<div class="mySlides fade">
  <img src="IMAGES/PNG/bridge.png" style="width:100%">
  <div class="text">Insert Another Caption Here</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

<div class="content" ></div>

<script type="text/javascript" src="JS/sticky_navbar.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script  src="js/index.js"></script>


</body>
</html>

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

Answer №1

I have provided a Codepen solution to address your issue, allowing you to examine the modifications I implemented in your code.

Instead of using float:flex, which is a display layout method, I switched to display:flex. Additionally, I included additional style rules that establish a 2 column layout, ensuring each column occupies 50% of the flexbox container's width (I defined the width as 75vw, equivalent to 75% of the browser screen's width for this purpose).

To maintain consistency in the layout, it is crucial for each 'slide' markup to be identical. As a result, I updated the style rule from #slideshow to

.mySlides</code and placed the image within a div tag, consistent with what you had initially added to the first slide.</p>

<p>The necessary styling is outlined below, including distinctive border colors for clarity:</p>

<pre><code>.mySlides{
    display: flex;
    flex-direction: row;
    width: 75vw;
    border: 1px solid red;
}
.mySlides > div {
    flex: 0 0 50%;
    border: 1px solid green;
}

In this context, flex: 0 0 50% specifies that each column should occupy a minimum of 50% width.

Other minor adjustments were made primarily for visual appeal.

I trust you will find this information helpful. Should you have any questions, feel free to reach out :-)

Check out the Codepen here

Answer №2

There was a mistake in your code with the property - float: flex. It should actually be display: flex. Additionally, you should not set this to #slideshow as the JavaScript update will automatically change it to display: block.

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

Seeking the location of the `onconnect` event within the Express framework

With the use of "express," I have implemented a middleware function like so: app.use(function(request, response, next) { console.log(request.headers["user-agent"]); // etc. }); This currently displays the user-agent header in the console for ever ...

Aligning a pair of <div> elements within a container in a form field

As I attempt to recreate the survey form challenge from FreeCodeCamp.org Projects, I am facing an issue with aligning two <div> elements inside their parent <div> without the second child moving to a new line using CSS properties other than flo ...

What is the best way to retrieve the value of this event in a React component?

Is there a way to retrieve the value of an input field? Typically, I would use event.target.value to do so. However, in this case, that method is not viable because the path of event.target leads me to an li element instead: https://i.sstatic.net/0iB9v.pn ...

Is it possible to use reactjs and react-router to showcase either a component or {this.props.children}?

Here's the scene: I have multiple components where certain words can be clicked to link to a reference page/component. If the highlighted words are not clicked, the component is displayed as is (and there are many of them with this feature and a menu ...

The Material UI Grid item shifted upwards as a result of the image loading

While working on a project using the Material UI grid system with create-react-app, I encountered an issue with two adjacent grid items. Initially, they display as intended: However, upon loading the page, there is a brief moment where the text on the rig ...

Tips for utilizing Material UI's Tooltip feature alongside a TableRow

I'm currently facing an issue where I'm trying to include a MUI TableRow inside a Tooltip component in order to display a long uuid when hovering over the row. However, I noticed that all the columns of the row are being compressed into the first ...

Customizing the hover color of text in Bootstrap 5

I'm looking to modify the hover color on my navbar. The Navbar currently has a black background with text in #b3b3b3 color. I want the text to turn white when hovered over, instead of staying the same color, but none of the CSS codes I've tried s ...

Managing changes to object properties in Angular

I am encountering a situation where I have an object containing both an 'id' and 'name' property, structured like this: function format(id){ return '(' + id + ')'; } function MyObject(id){ this.id = id; this. ...

Arranging Bootstrap 4 columns in a vertical stack

My HTML code is as follows: <html> <head> <title>Title</title> <meta charset="utf-8"> <meta name="description" content="description"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <li ...

Looking to substitute the <mark> element within a string with the text enclosed in the tag using JavaScript

In need of help with replacing tags inside a string using JavaScript. I want to remove the start and end tags, while keeping the content intact. For example, if my input string is: <div class="active"><mark class="active-search-position">The ...

"Delve into the art of utilizing negative space between elements with

Looking to implement hover detection between rows in a grid container, rather than on individual items. The number of items in the container and per row may vary. https://i.sstatic.net/yBgKI.png It's important to note that the item count in the cont ...

Updating a JSON array by including a new key-value pair using Javascript

Below is a json string that needs to be converted into a new Json Array: Raw Data: [ ["yrxqBHmPkNhZ60_eab97ebf-c2a3-40a5-972a-91597ad9a4ca_99371", "SUCCEEDED", "2023-08-31T21:59:31.325000+05:30", "2023-08-31T22:13:42.165000+05:30"], ["yrxqBHmPkNhZ ...

Are the ajaxSend and ajaxStop events in Jquery not functioning properly?

Having trouble getting the ajaxSend and Stop functions to work properly. I understand that these are global variables, but for some reason I am not able to use them as intended. I never receive an alert when trying to use them in my code. I was hoping to ...

A tiny blue spot popping up beside the roster of users

I'm working on a render function that displays a list of users with avatars and names. The issue I'm facing is that when the page initially loads, there's a blue dot to the left of each user. However, if I navigate to another page and then g ...

There seems to be an issue with configuring placeholders in Tailwind CSS

After deciding to switch to using only tailwind CSS, I noticed that on a particular page there were inputs with transitions but no icon on the inner left side. Adjusting the colors and position of the placeholder helped prevent collisions between the icon ...

Using JQUERY, extract the text within a specified class's p tag and insert it into a textarea

In my current project, I am working on a feature where users can write posts and comment on them. Each comment has an edit or delete option in its menu. When a user wants to edit a comment, they click on the menu item with the class of edit-comment. The co ...

Label the timeline map generated with the leaftime plug-in for leaflet in R with the appropriate tags

Here is a code snippet extracted from the R leaftime package documentation examples. It generates a map with a timeline that displays points as they appear over time. I am interested in adding labels to these points to show their unique id numbers. Upon ...

Can qTip 2.0 be configured to use a different default attribute instead of 'title'?

Is there a way to set qTip to use an attribute other than 'title' as the default? I need to use another attribute because when I disable qtip and add elements dynamically with "title", the title still shows when I hover over the element, which i ...

Firebase functions are giving me a headache with this error message: "TypeError: elements.get is not

Encountering the following error log while executing a firebase function to fetch documents and values from the recentPosts array field. Error: Unknown error status: Error: Unknown error status: TypeError: elements.get is not a function at new HttpsEr ...

What steps can I take to prevent the [Vue warn]: Potential infinite update loop detected in a component render function issue in my VueJS project?

What are some tips to prevent an infinite update loop in a component render function using VUEJS? I have created a simple show password button with the following structure: <div class="mt-4 switchContainerGenPassword"> <div class="switchGene ...