HTML, CSS , image slider js웹디자인 포트폴리오

 
사진 출저 - 쿠팡 사이트 

쿠팡 핫트렌드 카테고리별 추천 광고상품중 - 도서파트

 
연두색으로 칠한 부분 1번이 dt 태그이고 나머지 번호들은 dd 태그이다 모두 dl태그로묶어서 그룹을 지었다. 4번 부분은 grid를 쓰는 줄알았는데 float:left로 지정하고 overflow:hidden으로 되어있었다.(추후에 grid로 수정하였다.)  그리고 마진과 패딩은 0으로 지정했다.
 
 
 
 
쿠팡 사이트를 보고 크롬웹개발자 도구를사용해 html,css일일이 체크해서 제작하였다.

3번 이미지슬라이더, 4번 슬라이더를 javascript로 제작하였다.

 
 
3번부분 이미지 슬라이더는 7초동안 딜레이를 줘서 자동으로 넘기게 설정하였다.
 

// "promotion" 클래스를 가진 요소 안에 있는 모든 img 요소를 선택합니다.
const slides = document.querySelectorAll(".promotion img");

// 슬라이드 인덱스를 0으로 초기화합니다 (첫 번째 슬라이드).
let slideIndex = 0;

// 자동 슬라이드 전환을 위한 인터벌 ID를 저장할 변수.
let intervalId = null;

// DOM 콘텐츠가 완전히 로드되었을 때 initializeSlider를 실행하는 이벤트 리스너를 추가합니다.
document.addEventListener("DOMContentLoaded", initializeSlider);

// 슬라이더를 초기화하는 함수.
function initializeSlider() {
  // 슬라이드가 하나라도 있는지 확인합니다.
  if (slides.length > 0) {
    // 첫 번째 슬라이드를 보이도록 "displaySlide" 클래스를 추가합니다.
    slides[slideIndex].classList.add("displaySlide");

    // 7000밀리초(7초)마다 자동으로 다음 슬라이드로 전환하도록 인터벌을 설정합니다.
    intervalId = setInterval(nextSlide, 7000);

    // 인터벌 ID를 콘솔에 로그합니다.
    console.log(intervalId);
  }
}

// 주어진 인덱스의 슬라이드를 표시하는 함수.
function showSlide(index) {
  // 인덱스가 슬라이드 개수보다 크거나 같으면 슬라이드 인덱스를 0으로 설정합니다.
  if (index >= slides.length) {
    slideIndex = 0;
  }
  // 인덱스가 0보다 작으면 슬라이드 인덱스를 마지막 슬라이드로 설정합니다.
  else if (index < 0) {
    slideIndex = slides.length - 1;
  }

  // 모든 슬라이드에서 "displaySlide" 클래스를 제거합니다.
  slides.forEach(slide => {
    slide.classList.remove("displaySlide");
  });

  // 현재 슬라이드 인덱스에 해당하는 슬라이드에 "displaySlide" 클래스를 추가합니다.
  slides[slideIndex].classList.add("displaySlide");
}

// 이전 슬라이드로 이동하는 함수.
function prevSlide() {
  // 슬라이드 인덱스를 하나 감소시킵니다.
  slideIndex--;
  // 업데이트된 슬라이드 인덱스로 슬라이드를 표시합니다.
  showSlide(slideIndex);
}

// 다음 슬라이드로 이동하는 함수.
function nextSlide() {
  // 슬라이드 인덱스를 하나 증가시킵니다.
  slideIndex++;
  // 업데이트된 슬라이드 인덱스로 슬라이드를 표시합니다.
  showSlide(slideIndex);
}

 
 
 
버튼을 클릭할 때 마다 display: none | display:block으로 상태를 변경하였다.

.promotion img{
  width:325px;
  height:600px;
  padding-left: 10px;
  margin-top: -20px;
  display: none;
}

.promotion img.displaySlide{
  display: block;
}