javascript - 如何从对象数组javascript制作滑块？

Question

const slidesShop = document.querySelectorAll('.slide-shop');
const slider = document.querySelector('.slider-shop');
const slideOne = document.getElementById('slide-1');
const slideTwo = document.getElementById('slide-2');
const slideThree = document.getElementById('slide-3');
const prev = document.getElementById('prev');
const next = document.getElementById('next');

const bikes = [{
    name: 'Trek',
    size: 'L',
    type: 'Mountain Bike',
    price: 1000,
    text_line: 'Bike rides bike of the same something, some, someone!Best with there opinion',
  },
  {
    name: 'Trek',
    size: 'XL',
    type: 'Mountain Bike',
    price: 1000,
    text_line: 'Bike rides bike of the same something, some, someone!Best with there opinion',
  }
]

let activeSlide = 0;
let bikesCount = 10;

const changeSlide = () => {
  slidesShop.forEach((page) => {
    page.classList.remove('active-1');
    slidesShop[activeSlide].classList.add('active-1');
  });
};

prev.addEventListener('click', () => {
  activeSlide--;
  if (activeSlide < 0) {
    activeSlide = slidesShop.length - 1;
  }
  changeSlide();
  showBikes();
});

next.addEventListener('click', () => {
  activeSlide++;
  if (activeSlide > slidesShop.length - 1) {
    activeSlide = 0;
  }
  changeSlide();
  showBikes();
});

const showBikes = () => {
  slideOne.innerHTML = '';

  for (let i = 1; i <= bikesCount; i++) {
    bikes.forEach((bikes) => {
      const {
        name,
        size,
        type,
        price,
        text_line
      } = bikes;

      const slideShopItem = document.createElement('div');
      slideShopItem.classList.add('slide-shop-item');

      slideShopItem.innerHTML = `
          <img src="img/about.jpg" alt="" />
          <div class="item-content">
            <h3>${name}</h3>
            <p>
              ${text_line}
            </p>
            <small>Size: <span>${size}</span></small>
            <small>Type: <span>${type}</span></small>
            <small>Price: <span>${price}$</span></small>
          </div>
      `;
      slideOne.appendChild(slideShopItem);
    });
  }
};

<div class="slider-shop">
  <div class="slide-shop active-1" id="slide-1"></div>
  <div class="slide-shop" id="slide-2"></div>
  <div class="slide-shop" id="slide-3"></div>
</div>

<div class="buttons-shop-container">
  <button id="prev">&#11164;</button>
  <button id="next">&#11166;</button>
</div>

我有一个这样的对象数组，只是对象多于两个：

const bikes = [
  {
    name: 'Trek',
    size: 'L',
    type: 'Mountain Bike',
    price: 1000,
    text_line:
      'Bike rides bike of the same something, some, someone!Best with there opinion',
  },
  {
    name: 'Trek',
    size: 'XL',
    type: 'Mountain Bike',
    price: 1000,
    text_line:
      'Bike rides bike of the same something, some, someone!Best with there opinion',
  }
]

我的问题是：是否可以制作一个滑块，在每张幻灯片中显示一个数组中的 10 个对象？那么第一次滑动 10 个对象，然后第二次滑动其他 10 个对象，然后第三次滑动接下来的 10 个对象？

这段代码的问题是它在一张幻灯片中向我展示了所有对象。我想把它们分成更多的幻灯片。有人可以帮我弄这个吗？

标签： javascripthtml

Answer 1

而不是一个对象数组：

const bikes = [{
    name: 'Trek',
    size: 'L',
    type: 'Mountain Bike',
    price: 1000,
    text_line: 'Bike rides bike of the same something, some, someone!Best with there opinion',
  },
  {
    name: 'Trek',
    size: 'XL',
    type: 'Mountain Bike',
    price: 1000,
    text_line: 'Bike rides bike of the same something, some, someone!Best with there opinion',
  }
]

您应该创建一个对象数组。这样，您就可以用其中的每个项目来表示每个页面。

const page = [{
    bikes: [{
        name: 'Trek',
        size: 'L',
        type: 'Mountain Bike',
        price: 1000,
        text_line: 'Bike rides bike of the same something, some, someone!Best with there opinion',
      },
      {
        name: 'Trek',
        size: 'XL',
        type: 'Mountain Bike',
        price: 1000,
        text_line: 'Bike rides bike of the same something, some, someone!Best with there opinion',
      },
    ],
  },
  {
    bikes: [{
      name: 'Super bike',
      size: 'M',
      type: 'Mountain Bike',
      price: 600,
      text_line: 'Lorem ipsum',
    }, ],
  },
  {
    bikes: [{
      name: 'smoll bike',
      size: 'S',
      type: 'Mountain Bike',
      price: 450,
      text_line: 'Lorem ipsum bla bla',
    }, ],
  },
];

并显示活动数据。使用page[activeSlide].bikes. 每次 activeSlide 改变它都会更新数据。

const slidesShop = document.querySelectorAll('.slide-shop');
const slider = document.querySelector('.slider-shop');
const slideOne = document.getElementById('slide-1');
const slideTwo = document.getElementById('slide-2');
const slideThree = document.getElementById('slide-3');
const prev = document.getElementById('prev');
const next = document.getElementById('next');


const page = [{
    bikes: [{
        name: 'Trek',
        size: 'L',
        type: 'Mountain Bike',
        price: 1000,
        text_line: 'Bike rides bike of the same something, some, someone!Best with there opinion',
      },
      {
        name: 'Trek',
        size: 'XL',
        type: 'Mountain Bike',
        price: 1000,
        text_line: 'Bike rides bike of the same something, some, someone!Best with there opinion',
      },
    ],
  },
  {
    bikes: [{
      name: 'Super bike',
      size: 'M',
      type: 'Mountain Bike',
      price: 600,
      text_line: 'Lorem ipsum',
    }, ],
  },
  {
    bikes: [{
      name: 'smoll bike',
      size: 'S',
      type: 'Mountain Bike',
      price: 450,
      text_line: 'Lorem ipsum bla bla',
    }, ],
  },
];


let activeSlide = 0;
let bikesCount = 10;

const changeSlide = () => {
  slidesShop.forEach((page) => {
    page.classList.remove('active-1');
    slidesShop[activeSlide].classList.add('active-1');
  });
};

prev.addEventListener('click', () => {
  activeSlide--;
  if (activeSlide < 0) {
    activeSlide = slidesShop.length - 1;
  }
  changeSlide();
  showBikes();
});
next.addEventListener('click', () => {
  activeSlide++;
  if (activeSlide > slidesShop.length - 1) {
    activeSlide = 0;
  }
  changeSlide();
  showBikes();
});

const showBikes = () => {
  slideOne.innerHTML = '';

  for (let i = 1; i <= bikesCount; i++) {
    page[activeSlide].bikes.forEach((bikes) => {
      const {
        name,
        size,
        type,
        price,
        text_line
      } = bikes;
      const slideShopItem = document.createElement('div');
      slideShopItem.classList.add('slide-shop-item');

      slideShopItem.innerHTML = `
          <img src="img/about.jpg" alt="" />
          <div class="item-content">
            <h3>${name}</h3>
            <p>
              ${text_line}
            </p>
            <small>Size: <span>${size}</span></small>
            <small>Type: <span>${type}</span></small>
            <small>Price: <span>${price}$</span></small>
          </div>
    `;
      slideOne.appendChild(slideShopItem);
    });
  }
};

<div class="slider-shop">
  <div class="slide-shop active-1" id="slide-1"></div>
  <div class="slide-shop" id="slide-2"></div>
  <div class="slide-shop" id="slide-3"></div>
</div>
<div class="buttons-shop-container">
  <button id="prev">&#11164;</button>
  <button id="next">&#11166;</button>
</div>