javascript - 使 vanilla js 轮播适应 ie

Question

我正在构建一个使用像这样的轮播的网站:

https://codepen.io/queflojera/pen/RwwLbEY?editors=1010

它在 opera、chrome、edge 上完美运行，但在 ie 上停止运行，我需要它在 ie 上运行，如果有人知道任何解决方法，我将非常感激。

//I'm not pretty sure what is causing the ie failure on this code
//     Select the carousel you'll need to manipulate and the buttons you'll add events to
const carousel = document.querySelector("[data-target='carousel']");
const card = carousel.querySelector("[data-target='card']");
const leftButton = document.querySelector("[data-action='slideLeft']");
const rightButton = document.querySelector("[data-action='slideRight']");

// Prepare to limit the direction in which the carousel can slide, 
// and to control how much the carousel advances by each time.
// In order to slide the carousel so that only three cards are perfectly visible each time,
// you need to know the carousel width, and the margin placed on a given card in the carousel
const carouselWidth = carousel.offsetWidth;
const cardStyle = card.currentStyle || window.getComputedStyle(card)
const cardMarginRight = Number(cardStyle.marginRight.match(/\d+/g)[0]);

// Count the number of total cards you have
const cardCount = carousel.querySelectorAll("[data-target='card']").length;

// Define an offset property to dynamically update by clicking the button controls
// as well as a maxX property so the carousel knows when to stop at the upper limit
let offset = 0;
const maxX = -((cardCount) * carouselWidth +
  (cardMarginRight * cardCount) -
  carouselWidth - cardMarginRight);


// Add the click events
leftButton.addEventListener("click", function() {
  if (offset !== 0) {
    offset += carouselWidth + cardMarginRight;
    carousel.style.transform = `translateX(${offset}px)`;
  }
})

rightButton.addEventListener("click", function() {
  if (offset !== maxX) {
    offset -= carouselWidth + cardMarginRight;
    carousel.style.transform = `translateX(${offset}px)`;
  }
})

.wrapper {
  height: 200px;
  width: 632px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.button-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
}

.carousel {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  display: flex;
  position: absolute;
  left: 0;
  transition: all .5s ease;
}

.card {
  background: black;
  min-width: 632px;
  height: 200px;
  display: inline-block;
}

.card:nth-child(odd) {
  background-color: blue;
}

.card:nth-child(even) {
  background-color: red;
}

<div class="wrapper">
  <ul class="carousel" data-target="carousel">
    <li class="card" data-target="card">1</li>
    <li class="card" data-target="card">2</li>
    <li class="card" data-target="card">3</li>
    <li class="card" data-target="card">4</li>
    <li class="card" data-target="card">5</li>
    <li class="card" data-target="card">6</li>
    <li class="card" data-target="card">7</li>
    <li class="card" data-target="card">8</li>
    <li class="card" data-target="card">9</li>
  </ul>
  <div class="button-wrapper">
    <button data-action="slideLeft">L</button>
    <button data-action="slideRight">R</button>
  </div>
</div>

Answer 1

Invalid character

carousel.style.transform = `translateX(${offset}px)`;

IE 不支持模板文字(反引号)

固定使用

carousel.style.transform = "translateX("+offset+"px)";

也得到

Unable to get property '0' of undefined or null reference

因为在IE中是auto

const cardMarginRight = Number(cardStyle.marginRight.match(/\d+/g)[0]);

修复:

const marginRight = cardStyle.marginRight;
const cardMarginRight = isNaN(parseInt(marginRight)) ? 0 : Number(cardStyle.marginRight.match(/\d+/g)[0]);

//I'm not pretty sure what is causing the ie failure on this code
//     Select the carousel you'll need to manipulate and the buttons you'll add events to
const carousel = document.querySelector("[data-target='carousel']");
const card = carousel.querySelector("[data-target='card']");
const leftButton = document.querySelector("[data-action='slideLeft']");
const rightButton = document.querySelector("[data-action='slideRight']");

// Prepare to limit the direction in which the carousel can slide, 
// and to control how much the carousel advances by each time.
// In order to slide the carousel so that only three cards are perfectly visible each time,
// you need to know the carousel width, and the margin placed on a given card in the carousel
const carouselWidth = carousel.offsetWidth;
const cardStyle = card.currentStyle || window.getComputedStyle(card)
const marginRight = cardStyle.marginRight;
const cardMarginRight = isNaN(parseInt(marginRight)) ? 0 : Number(cardStyle.marginRight.match(/\d+/g)[0]);

// Count the number of total cards you have
const cardCount = carousel.querySelectorAll("[data-target='card']").length;

// Define an offset property to dynamically update by clicking the button controls
// as well as a maxX property so the carousel knows when to stop at the upper limit
let offset = 0;
const maxX = -((cardCount) * carouselWidth +
  (cardMarginRight * cardCount) -
  carouselWidth - cardMarginRight);


// Add the click events
leftButton.addEventListener("click", function() {
  if (offset !== 0) {
    offset += carouselWidth + cardMarginRight;
    carousel.style.transform = "translateX("+offset+"px)";
  }
})

rightButton.addEventListener("click", function() {
  if (offset !== maxX) {
    offset -= carouselWidth + cardMarginRight;
    carousel.style.transform = "translateX("+offset+"px)";
  }
})

.wrapper {
  height: 200px;
  width: 632px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.button-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
}

.carousel {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  display: flex;
  position: absolute;
  left: 0;
  transition: all .5s ease;
}

.card {
  background: black;
  min-width: 632px;
  height: 200px;
  display: inline-block;
}

.card:nth-child(odd) {
  background-color: blue;
}

.card:nth-child(even) {
  background-color: red;
}

<div class="wrapper">
  <ul class="carousel" data-target="carousel">
    <li class="card" data-target="card">1</li>
    <li class="card" data-target="card">2</li>
    <li class="card" data-target="card">3</li>
    <li class="card" data-target="card">4</li>
    <li class="card" data-target="card">5</li>
    <li class="card" data-target="card">6</li>
    <li class="card" data-target="card">7</li>
    <li class="card" data-target="card">8</li>
    <li class="card" data-target="card">9</li>
  </ul>
  <div class="button-wrapper">
    <button data-action="slideLeft">L</button>
    <button data-action="slideRight">R</button>
  </div>
</div>