Hosted Project
https://js-beginners.github.io/background-image-slider-project/
Github Source Files
https://github.com/JS-Beginners/background-image-slider-projectJavaScript Used
- DOM Manipulation
- Control Structures
- Arrays
- Array.forEach()
- JavaScript CSS Manipulation
- eventListeners
Project Description/Summary
This project is very similar to the Testimonials JavaScript Project. I did find it a lot easier, however. For this image slider, when an arrow is clicked, the next image in the array shows up.New Things Learned or Refreshed
Before doing this project, I didn't realize how easy it was to make a slider project. I thought it was just a jQuery thing. Turns out I was wrong.Time to Code
This took about 15 minutes to codeLines of Code
This took me 35 lines of code.Biggest Take Away(s)
Image sliders aren't a jQuery thing. All I had to do was access different images from inside of an array. And to make accessing each image easier, I just needed to make sure images had the same name but different numbers so they can be accessed by an index.Your Turn!
What to Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
app.jsfile. - Implement the JavaScript code in your own
app.js file. - Add a link to your finished project below!
What You Should See
- A default image should be displayed when you load the page.
- When you click the “left” button, one of five images should display, all the way until each of the five numbers display in sequence.
- Repeat step 2 for the “right” button.
Need to see the video solution for this project?
Get John's JavaScript Tutorial and Projects Course
Here my solution : https://github.com/Aaron-Werweiss/image-slideshow/blob/master/js/app.js
I didn’t use an array, I used if else statements instead.
Could you tell me why you decided to use IIFE in this and prior challenges?
Thanks for your time
My Code :
var pics = [“pic1.jpg”,”pic2.jpg”,”pic3.jpg”,”pic4.jpg”,”pic5.jpg”,”pic6.jpg”,”pic7.jpg”,”pic8.jpg”];
var desArr = [“Aston Martin Vulcan Sports EDITION”,
“Audi SUV HYBRID”,
“BMW 7 Series”,
“2021 Corvette Stingray Coupe”,
“Ferrari 812 FastBack”,
“Mclaren Vulcan GT SPORTS”,
“Porche Cayman 2020”,
“AUDI RS SUV”,
];
var textContainer = document.getElementById(‘desid’);
var imageContainer = document.getElementById(“imgcont”);
var counter = 0;
function getDes(event) {
textContainer.innerHTML = desArr[counter];
}
function funcNext() {
counter++;
imageContainer.src = pics[counter];
}
function funcPrev() {
counter–;
imageContainer.src = pics[counter];
}
My solution
(function() {
const btnLeftEl = document.querySelector(‘.btn-left’)
const btnRightEl = document.querySelector(‘.btn-right’)
const imgContainerEl = document.querySelector(‘.img-container’)
let counter = 0;
btnLeftEl.addEventListener(‘click’, (e) => {
if (counter !== 0) {
counter–
imgContainerEl.style.backgroundImage = `url(“../img/contBcg-${counter}.jpeg”)`
}
})
btnRightEl.addEventListener(‘click’, (e) => {
if (counter !== 4) {
counter++
imgContainerEl.style.backgroundImage = `url(“../img/contBcg-${counter}.jpeg”)`
}
})
})();