Equal-Height Slide Deck Holder

I'm struggling to maintain a consistent height of 700px for my image slideshow, which consists of four images with varying heights. I attempted setting the img at max-height: 700px, but unfortunately that didn't yield the desired outcome.

You can view the codepen here.

   

 var slideIndex = 1;

  showSlide(slideIndex);


  function plusSlides(n) {
      showSlide(slideIndex += n);
  }

  function currentSlide(n) {
      showSlide(slideIndex = n);
  }


  function showSlide(n) {

      var i;

      var slides = document.getElementsByClassName("myslides");

      var dots = document.getElementsByClassName("dots");

      if (n > slides.length) {
          slideIndex = 1
      };

      if (n < 1) {
          slideIndex = slides.length
      };

      for (i = 0; i <slides.length; i++) {

          slides[i].style.display = "none";

      };

      for (i = 0; i < dots.length; i++) {

          dots[i].className = dots[i].className.replace(" active","");

      };

      slides[slideIndex - 1].style.display = "block";

      dots[slideIndex - 1].className += " active";

  }
body{
  font-family: verdana,sans-serif;
  margin: 0;
  font-size: 100%;
}

#slideshow-container{
  position: relative;
  margin: auto;
  background-color: black;
  overflow: hidden;
}

#slideshow-container img{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  position: relative;
  max-height: 700px !important;
}

.myslides{
  display: none;
}

.prev , .next{
  position: absolute;
  top: 50%;
  font-size: 30px;
  font-weight: bold;
  padding: 16px;
  margin-top: -22px;
  border-radius: 0 3px 3px 0;
  color: #fff;
  cursor: pointer;
  z-index: 1;
}

.next{
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,.next:hover{
  background-color: rgba(0,0,0,0.8);
}

.caption{
  text-align: center;
  position: absolute;
  bottom: 5px;
  width: 100%;
  color: #f2f2f2;
  font-size: 1em;
/*   font-size:15px ; */
/*   padding:8px 22px ; */
}

.fade{
  animation-name:fade ;
  animation-duration:1.5s ;
}

@keyframes fade{
  from {opacity: 0.4;}
  to {opacity: 1 ;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!---Images not owned by me --->

<div id="slideshow-container">
 <div id="mainImg">

  <div class="myslides fade">
    <div><img src="https://static.boredpanda.com/blog/wp-content/uploads/2014/12/Top-10-photographers-for-travel-portraits27__700.jpg"></div>
      <div class="caption">Text 1</div>
  </div>

  <div class="myslides fade">
    <div><img src="https://cdn-images-1.medium.com/max/1600/1*way-yv9effv2b7PKZeUDMA.png"></div>
      <div class="caption">Text 2</div>
  </div>

  <div class="myslides fade">
    <div><img src="https://www.shutterbug.com/images/17/promosa111217.png"></div>
      <div class="caption">Text 3</div>
  </div>

  <div class="myslides fade">
    <div><img src="http://jmacpratt.weebly.com/uploads/1/2/0/1/12013129/portrait2_orig.jpg"></div>
      <div class="caption">Text 4</div>
  </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

    <a class="next" onclick="plusSlides(1)">&#10095;</a>

   </div>
</div>

javascripthtmlcssslideshow

Answer №1

Modify the style from max-height: 700px to height: 700px and change width: 100%; to width: auto;

var slideIndex = 1;

showSlide(slideIndex);


function plusSlides(n){

showSlide(slideIndex += n);

}


function currentSlide(n) {

showSlide(slideIndex = n);

}


function showSlide(n){

var i;

var slides = document.getElementsByClassName("myslides");

var dots = document.getElementsByClassName("dots");

if (n > slides.length) { slideIndex = 1};

if (n < 1) { slideIndex = slides.length};

for (i=0;i<slides.length;i++) {

slides[i].style.display = "none";

};

for (i=0;i<dots.length;i++) {

dots[i].className = dots[i].className.replace(" active","");

};

slides[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " active";

}
body{
  font-family: verdana,sans-serif;
  margin: 0;
  font-size: 100%;
}

#slideshow-container{
  position: relative;
  margin: auto;
  background-color: black;
  overflow: hidden;
}

#slideshow-container img{
  display: block;
  margin: 0 auto;
  width: auto;
  position: relative;
  height: 700px !important;
}

.myslides{
  display: none;
}

.prev , .next{
  position: absolute;
  top: 50%;
  font-size: 30px;
  font-weight: bold;
  padding: 16px;
  margin-top: -22px;
  border-radius: 0 3px 3px 0;
  color: #fff;
  cursor: pointer;
  z-index: 1;
}

.next{
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,.next:hover{
  background-color: rgba(0,0,0,0.8);
}

.caption{
  text-align: center;
  position: absolute;
  bottom: 5px;
  width: 100%;
  color: #f2f2f2;
  font-size: 1em;
/*   font-size: 15px; */
/*   padding: 8px 22px; */
}

.fade{
  animation-name:fade;
  animation-duration:1.5s;
}

@keyframes fade{
  from {opacity: 0.4;}
  to {opacity: 1;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!---Images not owned by me --->

<div id="slideshow-container">
 <div id="mainImg">

  <div class="myslides fade">
    <div><img src="https://static.boredpanda.com/blog/wp-content/uploads/2014/12/Top-10-photographers-for-travel-portraits27__700.jpg"></div>
      <div class="caption">Text 1</div>
  </div>

  <div class="myslides fade">
    <div><img src="https://cdn-images-1.medium.com/max/1600/1*way-yv9effv2b7PKZeUDMA.png"></div>
      <div class="caption">Text 2</div>
  </div>

  <div class="myslides fade">
    <div><img src="https://www.shutterbug.com/images/17/promosa111217.png"></div>
      <div class="caption">Text 3</div>
  </div>

  <div class="myslides fade">
    <div><img src="http://jmacpratt.weebly.com/uploads/1/2/0/1/12013129/portrait2_orig.jpg"></div>
      <div class="caption">Text 4</div>
  </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

    <a class="next" onclick="plusSlides(1)">&#10095;</a>

   </div>
</div>

Answer №2

To enhance the display, include the property height="700px" in the outer container and apply the same property height="700px" to all img elements listed below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!---Images not owned by me --->

<div id="slideshow-container" height="700px">
 <div id="mainImg">

  <div class="myslides fade">
    <div><img height="700px" src="https://static.boredpanda.com/blog/wp-content/uploads/2014/12/Top-10-photographers-for-travel-portraits27__700.jpg"></div>
      <div class="caption">Text 1</div>
  </div>

  <div class="myslides fade">
    <div><img height="700px" src="https://cdn-images-1.medium.com/max/1600/1*way-yv9effv2b7PKZeUDMA.png"></div>
      <div  class="caption">Text 2</div>
  </div>

  <div class="myslides fade">
    <div><img height="700px" src="https://www.shutterbug.com/images/17/promosa111217.png"></div>
      <div class="caption">Text 3</div>
  </div>

  <div class="myslides fade">
    <div><img height="700px" src="http://jmacpratt.weebly.com/uploads/1/2/0/1/12013129/portrait2_orig.jpg"></div>
      <div class="caption">Text 4</div>
  </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

    <a class="next" onclick="plusSlides(1)">&#10095;</a>

   </div>
</div>

Answer №3

One alternative suggestion would be to utilize background images for the slideshow, as this approach can simplify setting a specific height while maintaining relative width.

var slideIndex = 1;

showSlide(slideIndex);


function plusSlides(n) {

  showSlide(slideIndex += n);

}


function currentSlide(n) {

  showSlide(slideIndex = n);

}


function showSlide(n) {

  var i;

  var slides = document.getElementsByClassName("myslides");

  var dots = document.getElementsByClassName("dots");

  if (n > slides.length) {
    slideIndex = 1
  };

  if (n < 1) {
    slideIndex = slides.length
  };

  for (i = 0; i < slides.length; i++) {

    slides[i].style.display = "none";

  };

  for (i = 0; i < dots.length; i++) {

    dots[i].className = dots[i].className.replace(" active", "");

  };

  slides[slideIndex - 1].style.display = "block";

  dots[slideIndex - 1].className += " active";

}
body {
  font-family: verdana, sans-serif;
  margin: 0;
  font-size: 100%;
}

#slideshow-container {
  position: relative;
  margin: auto;
  background-color: black;
  overflow: hidden;
}

#slideshow-container>div {
  position: relative;
  height: 700px;
  width: 100%;
}

#slideshow-container .bg-img {
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#slideshow-container img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  position: relative;
  max-height: 700px !important;
}

.myslides {
  display: none;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  font-size: 30px;
  font-weight: bold;
  padding: 16px;
  margin-top: -22px;
  border-radius: 0 3px 3px 0;
  color: #fff;
  cursor: pointer;
  z-index: 1;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.caption {
  text-align: center;
  position: absolute;
  bottom: 5px;
  width: 100%;
  color: #f2f2f2;
  font-size: 1em;
  /*   font-size: 15px; */
  /*   padding: 8px 22px; */
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
<!---Images not owned by me --->

<div id="slideshow-container">
  <div id="mainImg">

    <div class="myslides fade">
      <div>
        <span class="bg-img" style="background-image: url('https://static.boredpanda.com/blog/wp-content/uploads/2014/12/Top-10-photographers-for-travel-portraits27__700.jpg')"></span>
      </div>
      <div class="caption">Text 1</div>
    </div>

    <div class="myslides fade">
      <div>
        <span class="bg-img" style="background-image: url('https://cdn-images-1.medium.com/max/1600/1*way-yv9effv2b7PKZeUDMA.png')"></span>
      </div>
      <div class="caption">Text 2</div>
    </div>

    <div class="myslides fade">
      <div>
        <span class="bg-img" style="background-image: url('https://www.shutterbug.com/images/17/promosa111217.png')"></span>
      </div>
      <div class="caption">Text 3</div>
    </div>

    <div class="myslides fade">
      <div>
        <span class="bg-img" style="background-image: url('http://jmacpratt.weebly.com/uploads/1/2/0/1/12013129/portrait2_orig.jpg')"></span>
      </div>
      <div class="caption">Text 4</div>
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

    <a class="next" onclick="plusSlides(1)">&#10095;</a>

  </div>
</div>

<br>

 <div style="text-align:center">

<span class="dots" onclick="currentSlide(1)"></span> 

<span class="dots" onclick="currentSlide(2)"></span> 

<span class="dots" onclick="currentSlide(3)"></span> 

<span class="dots" onclick="currentSlide(4)"></span> 

</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

Striving to convert Celsius to Fahrenheit using ReactJS

I am currently attempting to convert Celsius into Fahrenheit within this specific div. Despite being fairly new to React, I’m finding it challenging to determine where exactly to place the conversion calculation. return ( <div className="app& ...

cssreactjs

Error importing React Icons with the specific icon FiMoreHorizontal

Currently following a guide to create a Twitter-like application and I need to add the following imports: import { FiMoreHorizontal } from 'react-icons/fi' 2.3K (gzipped: 1K) import { VscTwitter } from 'react-icons/vsc' 3.1K (gzipped: ...

javascriptreactjsimportreact-icons

JavaScript popup cannot be shown at this time

I'm encountering an issue with displaying popups using JavaScript. Currently, only the div with class "popup" is being shown. When a user takes action, both popup and popup2 should be displayed but for some reason, it's not working as expected. ...

javascripthtmlcssgoogle-chrome-extension

Retrieve the Most Recent Matching Date within an Array

In my mongoDB database, I am searching for datasets with expired date values. When I say expired, I mean that the timestamp of the last element in an array is older than a certain interval from the current timestamp (determined by a category). Each datase ...

javascriptmongodb

Select the top row of a table when the checkbox is ticked to emphasize it

Previously, I tackled a challenge on a webpage using jQuery where checkboxes in a table needed to be selected based on specific data attributes. Essentially, if one checkbox in a row was selected, the rest of the checkboxes would be disabled if their data ...

javascriptjquerycss

What is the process for sending body data through Swagger in a Node.js/Express environment?

Below is the configuration for my swagger: /** * @swagger * /api/addData: * post: * consumes: * - text/html * produces: * - text/html * parameters: * - name: author * in: body * required: true * ...

javascriptnode.jsexpressswagger

Is it possible to define a multiplication margin using css?

I am trying to place a box in the center of a container, but I am unable to set a static height for the parent element as it may change. This is causing issues with aligning the box perfectly in the middle of the page. Any assistance would be greatly app ...

htmlcssangularsasscalc

When using Node.js with Express and ssh2, my data structures remain intact without any resets when loading web pages

To display jobs sent by users to a cluster, the code below is used (simplified): var split = require('split'); var Client = require('ssh2').Client; var conn = new Client(); var globalRes; var table = [["Head_1","Head_2"]]; module.exp ...

javascriptnode.jsexpress

What is the best method for inserting a URL link using jQuery within a CSS element?

Check out this code snippet: <span class='maincaptionsmall'> Test </span> Due to certain ajax and jquery scripts on my page, I am unable to use HREF as a link. In other words, the following code won't work: <span class=&ap ...

javascripthtmlcsshyperlinkhref

Ways to modify CSS using JavaScript

Can anyone assist me with a custom CSS code that I found? It looks like this: header.type-2:not(.fixed-header) nav>ul>li>a{ color:#000; } I've been trying to change the color to #fff using JavaScript, but haven't had any success yet. ...

javascripthtmlcss

How can I retrieve the value of a radio button using jQuery

My goal is to retrieve the selected/checked radio button value using the .get function. I believe my code is correct, but the sequence seems to be off. $.get('burgerorder_check.php', function(data) { inputVal = $('input[type ...

javascriptphpjquery

Error in Typescript persists even after short-circuit evaluation is used

Kindly review the provided code sample type type1 = string[] | undefined; let variable1 : type1 = undefined; console.log(variable1 && variable1.length); Upon attempting to run this code in Typescript Playground, an error is generated stating Pro ...

javascripttypescriptcompiler-errors

What advantages does $sce or Strict Contextual Escaping provide in AngularJS, and why is it unnecessary for React?

I find it perplexing that I am unable to fully grasp the true value of utilizing SCE in AngularJS (even after reviewing the documentation) when it comes to security benefits. It leaves me wondering why React does not require SCE. So, to summarize my quest ...

javascriptangularjsreactjsjavascript-framework

Tips for utilizing ng-model in an Angular application

<input type="search" placeholder="{{'COMPONENT_PROPERTIES.SEARCH_ICON' | translate}}" ng-model="icon.name" list="classIcon" ng-change="changeFn(icon.name)"> <i class="{{$select.selected}}"></i> &nbsp;&nbsp; {{$s ...

angularjshtml

Tips for extracting certain characters from a URL and saving them as an ID using JavaScript

Consider this scenario where I have a specific URL: http://localhost:3000/legone/survey/surveyform/form11/03141800300000030001 In order to achieve the desired outcome, I aim to extract and store different parts of the URL into designated IDs. Specificall ...

javascripthtmlurl

Send input data to a script seamlessly without triggering a page reload

I'm facing an issue with sending form values to a script. My goal is to have the form values displayed on another part of the page when the user clicks a button. While I can achieve this using PHP or similar web scripting languages by sending the valu ...

javascriptajaxformssubmit

What criteria does the browser use to select the media type for filtering CSS links?

One of the pages on my website includes a link to a stylesheet specifically for printing purposes. <link rel="stylesheet" href="../print.css" type="text/css" media="print" /> While most browsers ignore this link and its styles when rendering for sc ...

cssinternet-explorer-7media

Struggling to separate a section of the array

Check out this array: [ '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a171319121b1f163a1f1915080a54191517">[email protected]</a>:qnyynf', '<a href="/cdn-cgi/l/email-protection" class="__cf_e ...

javascript

What causes the variance in outcomes between employing a literal string versus a local variable?

Here is a loop that I am working with: for (var key in criteria) { var exists = Object.keys(item).some(function(k) { return item[k] === "Test"; }) } Initially, this loop functions as expected and returns 15 trues based on the number of i ...

javascriptobjectecmascript-6

Is there a way to extract the content length from the raw DraftJS data?

I have a system where I am storing the data from my DraftJS editor in my database as a JSON string by passing it through convertToRaw(editorState.getCurrentContent()). For example, this is how the stored data looks like in the database: {"blocks": [{"key ...

javascriptreactjsdraftjs