如何从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 个对象？

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

Answer 1

是的，这是可能的。

您所需要的只是将当前的数据数组映射到另一个包含幻灯片的数组中，并且每个幻灯片都应该包含一个products或items属性。

显然，您需要修改渲染逻辑并循环浏览当前幻灯片的产品/项目并相应地显示它们（在表格中，或者它们在幻灯片的上下文中有意义）。

映射器函数（将接收产品和输出幻灯片）看起来像：

const createSlides = (data, pageSize) => Array.from(
  Array(Math.ceil(data.length / pageSize)).keys()).map(key => ({
    id: `slide-${key + 1}`,
    products: data.slice(key * pageSize, (key + 1) * pageSize)
  })
);

... data包含您当前的数据。

这是一个实现示例，我只是添加了几个函数来创建随机数据。 除了 mapper 函数（上面写的）之外，您不需要任何东西。

 const randomData = Array.from(Array(100).keys()).map(key => ({ id: 'product-' + (key + 1), ...randomProduct(), })); const createSlides = (data, pageSize) => Array.from( Array(Math.ceil(data.length / pageSize)).keys()).map(key => ({ id: 'slide-' + (key + 1), products: data.slice(key * pageSize, (key + 1) * pageSize) }) ); const slides = createSlides(randomData, 10); console.log(slides); /* helpers */ function pickRandom(items) { return items[Math.floor(Math.random()*items.length)]; } function randomProduct() { return { name: pickRandom(['Trek', 'Bike', 'Hike', 'Rest']), size: pickRandom(['L', 'S', 'XS', 'M', 'XL', 'XXL']), type: pickRandom(['Mountain Bike', 'Street Bike', 'Motorbike', 'Cycle']), price: pickRandom(Array.from(Array(10).keys()).map(p => (p + 1) * 1e3)), text_line: 'Bike rides bike of the same something, some, someone!Best with there opinion', } }

上面代码中的slides const（这也是我要登录到控制台的内容）是您必须提供滑块的内容。

Answer 2

而不是对象数组：

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>