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="如何從javascript物件陣列制作滑塊？" />
<div >
<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">⮜</button>
<button id="next">⮞</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 個物件？
這段代碼的問題在于它在一張幻燈片中向我顯示了所有物件。我想將它們分成更多的幻燈片。有人可以幫我弄這個嗎？
uj5u.com熱心網友回復：
Instead of an array of object:
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',
}
]
You should make an array of array of object. This way you represents every page with every item in it.
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',
}, ],
},
];
And to show the active data. use page[activeSlide].bikes. every time activeSlide change it will update the data.
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="如何從javascript物件陣列制作滑塊？" />
<div >
<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">⮜</button>
<button id="next">⮞</button>
</div>uj5u.com熱心網友回復：
Yes, it's possible.
All you need is to map your current data array into another array, containing slides, and each slide should contain a products or items prop.
Obviously, you'll need to modify your rendering logic and loop through the current slide's products/items and display them accordingly (in a table, or however they make sense in the context of your slide).
A mapper function (which would take in the products and output slides) would look something like:
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)
})
);
... where data has your current data.
Here's an implementation example, where I simply added a couple of functions to create randomized data. You don't need anything from it, except the mapper function (written above).
Show code snippet
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',
}
}The slides const in the above code (which is also what I'm logging to console) is what you'll have to feed your slider.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/310040.html
標籤：javascript html
上一篇：如何使用VueCompositionAPI作為跨組件的全域狀態？
下一篇：如何對物件串列進行分組