JSFiddle - React, Tailwind, and code Playground

by kerrydp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div class="gridwrapper">
  <div class="box1">
    <div class="swiper-container">
     <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
     <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
   </div>
  </div>
  <div class="box2">
    {details in this box}
  </div>
  <div class="box3">
    <p style="margin-top:0;">I am wanting the swiper width to fill the width of the grid box, and I would like the swiper height to be the same as the swiper width, making the swiper a square.  As you can see in the CSS, this grid wrapper has a max-width, so I can't just use the "vw" unit.</p>
    <hr/>      
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Adipiscing at in tellus integer feugiat scelerisque varius. Eget aliquet nibh praesent tristique magna sit amet. Sed felis eget velit aliquet sagittis. Ac turpis egestas integer eget aliquet nibh praesent. Morbi tristique senectus et netus et malesuada fames. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Maecenas accumsan lacus vel facilisis volutpat est velit egestas dui. Egestas egestas fringilla phasellus faucibus scelerisque. Vulputate eu scelerisque felis imperdiet...

CSS

body {
  padding: 0.5rem;
  margin: 0;
}

.box1 {
  width:400px;
  border: 1px solid black;
}

.gridwrapper {
  display: grid;
  max-width: 700px;
  grid-template-columns: 1.25fr 1fr;
  grid-gap: 0.5rem;
}

.gridwrapper > div {
  background: #eee;
}

.gridwrapper > div:not(:first-child) {
  padding: 1em;
}

.gridwrapper > div.box3 {
  grid-column: 1/3;
}

.swiper-container {
  width: 100%;
  height: 300px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

JavaScript

var swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
  },
});