[JS Project 100] 6. Background Image Slider

BbickBbick_Develop·2022년 7월 5일

JavaScript toy project

JS Project 100

목록 보기

6/8

문제 주소

Description

Hosted Project
Github Source Files

JavaScript 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 code

Lines 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.js file.
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.

<!-- <head>는 생략. -->
 
<body>

 <div class="container">
  <div class="row max-height align-items-center">
   <div class="col-9 col-md-10 mx-auto img-container">
    <a class="btn btn-left"><i class="fas fa-caret-left"></i></a>
    <a class="btn btn-right"><i class="fas fa-caret-right"></i></a>
   </div>
  </div>
 </div>

 <script>
  // 사진 자료를 준비.
  const pictures = ["img-1", "img-2", "img-3"];

  // imageDIV라는 곳에 이미지를 띄울 것.
  const buttons = document.querySelectorAll('.btn')
  const imageDIV = document.querySelector('.img-container')
  let counter = 0

  buttons.forEach(function(button){
    button.addEventListener('click', function(e){
      // 왼쪽 버튼을 클릭하면
      if (button.classList.contains('btn-left')){
        // 카운터 감소
        counter--
        // 카운터가 0보다 작으면
        if(counter < 0){
          // pictures의 끝으로 돌아감
          counter = pictures.length -1
        }
        // imageDIV의 background이미지를 pictures 이미지로 바꿈.
        imageDIV.style.backgroundImage = `url('./img/${pictures[counter]}.jpeg')`
      }
      if (button.classList.contains('btn-right')){
        counter++
        // 카운터가 최대 크기보다 커지면, 0으로 다시 되돌아옴.
        if(counter > pictures.length -1){
          counter = 0
        }
        imageDIV.style.backgroundImage = `url('./img/${pictures[counter]}.jpeg')`
      }
    })
  })

 </script>
</body>