How to change the height of a specific slide in carousel

Question

This is my code, it is a video carousel with 3 slides and on click of each slide the video is getting opened up in an iframe. Functionality wise it is working fine.I want to have the height of center slide to be bigger than the other two. How can i do that? I tried doing that with help of data-index (as data index of the slide remains same and with help of it I am trying to pick middle one) but it is not working. Can anyone please help with some other implementation?

//update the height of middle slide 
    $(document).ready(function () {
      let x = document.querySelectorAll('video[data-index]==1');
      [...x].forEach((btn) => {
        console.log(btn.getAttribute('data-index'))
        if (btn.getAttribute('data-index') == '1') {
          $(video).css({
            "height": "325px !important"
          })
        }
      });
    })
    const galleryContainer = document.querySelector('.gallery-container');
    const galleryControlsContainer = document.querySelector('.gallery-controls');
    const galleryControls = ['previous', 'next'];
    const galleryItems = document.querySelectorAll('.gallery-item');

    class Carousel {
      constructor(container, items, controls) {
        this.carouselContainer = container;
        this.carouselControls = controls;
        this.carouselArray = [...items];
      }
      // Update css classes for gallery
      updateGallery() {
        this.carouselArray.forEach(el => {
          el.classList.remove('gallery-item-1');
          el.classList.remove('gallery-item-2');
          el.classList.remove('gallery-item-3');
        });

        this.carouselArray.slice(0, 3).forEach((el, i) => {
          el.classList.add(`gallery-item-${i + 1}`);
        });
      }

      // Update the current order of the carouselArray and gallery
      setCurrentState(direction) {

        if (direction.className == 'gallery-controls-previous') {
          this.carouselArray.unshift(this.carouselArray.pop());
        } else {
          this.carouselArray.push(this.carouselArray.shift());
        }

        this.updateGallery();
      }

      setControls() {
        this.carouselControls.forEach(control => {
          galleryControlsContainer.appendChild(document.createElement('button')).className = `gallery-controls-${control}`;

          document.querySelector(`.gallery-controls-${control}`).innerText = control;
        });
      }

      useControls() {
        const triggers = [...galleryControlsContainer.childNodes];

        triggers.forEach(control => {
          control.addEventListener('click', e => {
            e.preventDefault();
            this.setCurrentState(control);
            // }

          });
        });
      }
    }
    function dismiss_iframe_forms() {       //FUNCTION TO DISMISS THE IFRAME WITH FORMS
      document.getElementById("iframe1").src = "";
      $("#iframe_forms1").hide();
      document.getElementById("iframe2").src = "";
      $("#iframe_forms2").hide();
      document.getElementById("iframe3").src = "";
      $("#iframe_forms3").hide();
    }

    function playbtn1() {
      document.getElementById("iframe1").src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
      $("#iframe_forms1").show(); // DISPLAY THE IFRAME CONTAINER FOR FORMS
    }
    function playbtn2() {
      document.getElementById("iframe2").src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
      $("#iframe_forms2").show();
    }
    function playbtn3() {
      document.getElementById("iframe3").src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
      $("#iframe_forms3").show();
    }
    const exampleCarousel = new Carousel(galleryContainer, galleryItems, galleryControls);

    exampleCarousel.setControls();
    // exampleCarousel.setNav();
    exampleCarousel.useControls();

.gallery {
      width: 100%;
    }

    .gallery-container {
      align-items: center;
      display: flex;
      height: 400px;
      margin: 0 auto;
      max-width: 1000px;
      position: relative;
    }

    .gallery-item {
      height: 150px;
      opacity: 0;
      position: absolute;
      transition: all 0.3s ease-in-out;
      width: 150px;
      z-index: 0;
    }

    .gallery-item-1,
    .gallery-item-3 {
      left: 33%;
      opacity: .4;
      transform: translateX(-50%);
      z-index: 1;
    }

    .gallery-item-2,
    .gallery-item-4 {
      height: 200px;
      opacity: 1;
      width: 200px;
      z-index: 1;
    }

    .gallery-item-2 {
      left: 30%;
      transform: translateX(-50%);
    }

    .gallery-item-2 {
      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
      /* / height: 300px ; */
      opacity: 1;
      left: 50%;
      transform: translateX(-50%);
      width: 300px;
      z-index: 2;
    }

    .gallery-item-3 {
      left: 52%;
      transform: translateX(-50%);
    }

    /* .gallery-item-5 {
      left: 85%;
      opacity: .4;
      transform: translateX(-50%);
    } */

    .gallery-controls {
      display: flex;
      justify-content: space-evenly;
      margin: 30px 0;
      margin-left: 98px;
    }

    .gallery-controls button {
      background-color: transparent;
      border: 0;
      cursor: pointer;
      font-size: 20px;
      margin: 0 20px;
      padding: 0 12px;
      text-transform: capitalize;
    }

    .play-button:after {
      content: "\25b6";
      font-size: 2.5em;
      line-height: 1.8em;
      color: lightgrey;
      position: relative;
      left: 18px;
    }

    .gallery-controls button:focus {
      outline: none;
    }

    .gallery-controls-previous {
      position: relative;
    }

    .gallery-controls-previous::before {
      border: solid #000;
      border-width: 0 2px 2px 0;
      content: '';
      display: inline-block;
      height: 4px;
      left: -10px;
      padding: 2px;
      position: absolute;
      top: 10px;
      transform: rotate(135deg) translateY(-50%);
      transition: left 0.15s ease-in-out;
      width: 4px;
    }

    .gallery-controls-previous:hover::before {
      left: -18px;
    }

    .gallery-controls-next {
      position: relative;
    }

    .gallery-controls-next::before {
      border: solid #000;
      border-width: 0 2px 2px 0;
      content: '';
      display: inline-block;
      height: 4px;
      padding: 2px;
      position: absolute;
      right: -10px;
      top: 50%;
      transform: rotate(-45deg) translateY(-50%);
      transition: right 0.15s ease-in-out;
      width: 4px;
    }

    .gallery-controls-next:hover::before {
      right: -18px;
    }

    .gallery-nav {
      bottom: -15px;
      display: flex;
      justify-content: center;
      list-style: none;
      padding: 0;
      position: absolute;
      width: 100%;
    }

    .gallery-nav li {
      background: #ccc;
      border-radius: 50%;
      height: 10px;
      margin: 0 16px;
      width: 10px;
    }

    .gallery-nav li.gallery-item-selected {
      background: #555;
    }

    .overlay-content {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }

    .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 4em;
      height: 4em;
      margin-top: 0.5em;
      margin-left: 1em;
      background: white;
      border-radius: 2em;
      cursor: pointer;
    }

    #iframe_forms1,
    #iframe_forms2,
    #iframe_forms3 {
      display: none;
      text-align: center;
      border-radius: 15px;
      padding: 0px;
      position: fixed;
      z-index: 2147483638;
      /*MUST BE SET HIGH TO ENSURE PROPER OVERLAP ON OTHER COMPONENTS*/
      width: 95%;
      height: 80%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      box-shadow: 2px 2px 8px 5px #888888;
      background-color: white;
    }

    iframe {
      border: none;
      position: absolute;
      top: 42px;
      left: 0;
      width: 100%;
      height: 90%;
    }

    .close_button {
      cursor: pointer;
      top: 0px;
      margin-top: 16px !important;
      padding: 10px;
      display: block;
      width: 58px;
      margin-right: 10px !important;
      background-color: #78b9e7;
      color: white;
      border-radius: 40px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      float: right;
    }

How to change the height of a specific slide in carousel

0 Answers