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

What is the best way to initially hide a div using slide toggle and then reveal it upon clicking?

Is there a way to initially hide the div tag and then animate it in a slide toggle effect? I attempted using display:none on my '.accordion_box' followed by show() in slideToggle, but this results in adding the CSS property display: block. My goa ...

javascriptjqueryhtmlcss

instructions on how to eliminate slideUp using jquery

I am trying to eliminate the slide-up function from my code $( document ).ready(function() { $("#tabBar ul.buttons > li > a").on("click", function(e){ //if submenu is hidden, does not have active class if(!$(this).hasClass("activ ...

javascriptjqueryhtml

Dynamic HTML element

I created an input number field and I want to dynamically display the value of this field in a container without having to refresh the page. I am currently using ajax for this purpose, but unfortunately, I still need to reload the page. HTML: < ...

javascripthtmljqueryajaxdynamic

The name 'withStyles' is nowhere to be found

import * as React from "react"; import Button from "@material-ui/core/Button"; import * as PropTypes from "prop-types"; import {WithStyles} from '@material-ui/core'; import "./App.css"; import PageTwo from "./components/PageTwo"; ...

javascriptreactjstypescriptmaterial-ui

The table's width exceeds the appropriate size

Take a look at the code snippet below <%-- Document : index Created on : Feb 7, 2014, 1:03:15 PM --%> <%@page import="java.util.Map"%> <%@page import="java.util.Iterator"%> <%@page import="analyzer.DataHolder"%> <%@p ...

javahtmlcssjsp

The functionality of the webservice is not functioning properly

I'm currently working with Express and NodeJS to create a simple hello world webservice. I am attempting to call this webservice in ReactJS using Axios, but I am encountering issues with the response from the webservice. Below is my code for the webse ...

javascriptnode.jsreactjsexpressaxios

Vue 3 throws an error stating: "An uncaught DOMException occurred because the string contains an invalid character."

Exploring the capabilities of vue.js on a basic website. The setup consists of a single index.html file and all JavaScript is housed in an index.js file. The website is a work in progress, but there are no blockers preventing the JavaScript functionality ...

javascripthtmlvue.jsvuejs3

Component template using Knockout.js and RequireJS for HTML widgets

Trying to implement the widget example for knockout from here. Unfortunately, I am having issues loading the template from an external HTML file using requirejs. ko.components.register('like-or-dislike', { template: { require: &apos ...

javascripthtmlknockout.jsrequirejs

The battle between HTML5's async attribute and JS's async property

What sets apart the Html5 async attribute from the JS async property? <script src="http://www.google-analytics.com/ga.js" async> versus (function() { var ga = document.createElement('script'); ga.type = 'text/javascript&apo ...

javascripthtml

I am exploring directories on my server but encountered a restriction while using $.ajax

I am currently working on designing a basic webpage using p5.js, where I have implemented a script to search for images within folders and display them all on a single page. To facilitate this process, I am utilizing the $.ajax({}); function to check ...

javascriptjqueryajaxcorsp5.js

Tips on altering CSS attributes within Magnific Popup

I am currently utilizing the Magnific Popup plugin in my project. The code snippet I have implemented is as shown below: $(".event").magnificPopup({ items: { src: ".hidden-div", type: "inline" ...

jquerycssjquery-pluginspopupmagnific-popup

Exploring the nuances of receiving responses with NextJs, Nodemailer, and Fetch

Currently in the process of constructing a basic contact form with Next.js, nodemailer, and fetch. Despite successfully sending emails from the frontend form to the designated email account, the network shows the contact submission as pending. After approx ...

javascriptnode.jsemailnext.jsnodemailer

What is the process for retrieving data on the server side using node.js that has been sent from the frontend via the post method

After diving into learning node.js with the express framework, I encountered a roadblock. I'm experimenting with a basic query search webapp and trying to send some data (a boolean named all) from front-end plain javascript via ajax to the server sid ...

javascriptnode.jsajaxexpress

Utilizing Firebase Cloud Messaging for push notifications in Twilio Conversations

I am currently facing a challenge in setting up push notifications using Twilio Conversations and Firebase Cloud Messaging on a Next.js 12 app. The documentation assumes the use of Firebase 8 syntax, but I am working with Firebase 9 in this case. I have be ...

javascriptnext.jsfirebase-cloud-messagingtwilio

What methods can I use to compare a React Component across multiple pages with Cypress?

One task I am trying to tackle is comparing a component on one page with the same component on another page using Cypress. For example, let's say I have a Pricing Component on the Home page, and I want to verify if the values on the Pricing Page are i ...

javascriptreactjsnext.jscypress

Here's how you can pull information from a MySQL database and showcase it on an HTML

I successfully created a database in MySQL where users can enter their details on /upload.html, which then get stored in the test2 database and person_list table. However, I am facing an issue with displaying this data on /download.html. My goal is to hav ...

phpmysqlhtml

Having trouble reaching the elements stored in an array?

As a beginner in Angular and JavaScript, I may be making some obvious mistakes so please bear with me. I have written this code that allows the selection of 2 text files and then combines them into a single array. $scope.textArray = []; $scope.textUpload ...

javascripthtmlarraysangularjs

The React hook is activated each time a key is pressed, but it should ideally only be triggered when there is

I have created a hook for my Formik form that should be called whenever a specific field's Selection option is chosen. However, I am facing an issue where the hook is being triggered on every key press in every form field. I am not sure what mistake ...

javascriptreactjsnext.jsformik

The issue arises when React child props fail to update after a change in the parent state

Here's the main issue I'm encountering: I am opening a websocket and need to read a sessionId from the first incoming message in order to use it for subsequent messages. This should only happen once. I have a child component called "processMess ...

javascriptreactjswebsocket

Tips for creating a dynamic header background using custom CSS for my website design

As I embark on creating my very first WordPress website using the Blossom Pin Pro theme, I'm encountering an issue where the background image of the header disappears when adjusting the window width. Click here to visit the site If you have a code s ...

csswordpress