I have array of objects that includes name and description. My goal here is to display the name and description dynamically in my image carousel with the help of Tiny Slider js.
I try the following attempt but failed.
- Use
.getElementById()
to get the slider element and.map()
to render the data inside the object but unfortunately the whole data was rendered in one slider only.
index.html
<div id="sliderCont" >
<div>
<div >
<div style="background-image: url('src/images/img-1.jpg')">
<a href="http://">View More</a>
</div>
<br>
<div >
<h3 id="project-name"></h3>
<p id="project-description" ></p>
</div>
</div>
</div>
</div>
app.js
const project = [
{
image: "",
name: "Project 1",
description: "Project Description here.",
},
{
image: "",
name: "Project 2",
description: "Project Description here. 2",
},
{
image: "",
name: "Project 3",
description: "Project Description here. 3",
},
{
image: "",
name: "Project 4",
description: "Project Description here. 4",
},
];
document.getElementById("project-name").innerHTML = project.map((proj) => proj.name);
document.getElementById("project-description").innerHTML = project.map((proj) => proj.description);
Tiny Slider Config
let slider = tns({
container: ".my-slider",
slideBy: 1,
speed: 200,
nav: false,
controlsContainer: "#controls",
prevButton: ".previous",
nextButton: ".next",
preventScrollOnTouch: "auto",
autoplay: true,
autoplayButtonOutput: false,
responsive: {
1600: {
items: 4,
gutter: 20,
},
1024: {
items: 3,
gutter: 20,
},
768: {
items: 2,
gutter: 20,
},
480: {
items: 1,
},
},
});
CodePudding user response:
project.map((proj) => proj.name)
...returns an array:
["Project 1", "Project 2", "Project 3", "Project 4"]
When assigning this array to document.getElementById("project-name").innerHTML
it is converted to the string "Project 1,Project 2,Project 3,Project 4"
.
So you're essentially assigning this string to the .project-name
innerHTML
value:
document.getElementById("project-name").innerHTML = "Project 1,Project 2,Project 3,Project 4";
The same thing happens with:
document.getElementById("project-description").innerHTML = project.map(
(proj) => proj.description
);
Instead, first iterate, forEach()
, over the project
array, and in the loop block add a slide.
To create multiple slides use cloneNode()
to copy the .slide
DIV. (Since you're duplicating this DIV and it's child nodes, don't use IDs. Use class names instead: .project-name
and .project-description
.) And append the new node to the .slide
's parentNode
.
After the project
array loop is exited, remove, removeChild()
, the original .slide-info
DIV.
const project = [
{
image: "https://source.unsplash.com/random?w=200",
url: "p1.html",
name: "Project 1",
description: "Project Description here."
},
{
image: "https://source.unsplash.com/random?w=200",
url: "p2.html",
name: "Project 2",
description: "Project Description here. 2"
},
{
image: "https://source.unsplash.com/random?w=200",
url: "p3.html",
name: "Project 3",
description: "Project Description here. 3"
},
{
image: "https://source.unsplash.com/random?w=200",
url: "p4.html",
name: "Project 4",
description: "Project Description here. 4"
},
];
// get target DIV, containing .slide-img, .project-url, .project-name, and .project-description
const slide = document.querySelector(".slide");
// iterate over project array
project.forEach(proj => {
// make a clone of .slide for new slide
const newslide = slide.cloneNode(true);
// add image background to .slide-img div
newslide.querySelector(".slide-img").style.backgroundImage = `url('${proj.image}')`;
// add url href to .project-url anchor tag
newslide.querySelector(".project-url").href = proj.url;
// add name to .project-name header
newslide.querySelector(".project-name").innerHTML = proj.name;
// add description to .project-description paragraph
newslide.querySelector(".project-description").innerHTML = proj.description;
// add slide to .slide parent
slide.parentNode.appendChild(newslide);
});
// remove original slide
slide.parentNode.removeChild(slide);
<div>
<div >
<div >
<a href="" style="color: white;">View More</a>
</div>
<br>
<div >
<h3 ></h3>
<p ></p>
</div>
</div>
</div>