단순하고 미니멀한 제품 이미지 슬라이더

14192 단어 tutorialcssjavascripthtml
오늘 내 제품 페이지(전자상거래 mern 앱)에 간단하고 반응이 빠른 이미지 슬라이더를 구현하는 방법을 찾기 위해 고군분투한 후 이 게시물을 작성하고 있습니다.

HTML




<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <link rel="stylesheet" href="style.css" type="text/css" media="all" />
        <title>product page</title>
    </head>
    <body>
        <div class="product">
            <div class="product__images">
                <img
                    src="https://res.cloudinary.com/dard8s66g/image/upload/v1647993803/ecommerce/smartphone/623a63c9251afc7d338faab5/vzjovup3izma7q2skzcf.jpg"
                    alt="google pixel 6"
                    class="product__main-image"
                    id="main-image"
                />

                <div class="product__slider-wrap">
                    <div class="product__slider">
                        <img
                            src="https://res.cloudinary.com/dard8s66g/image/upload/v1647993803/ecommerce/smartphone/623a63c9251afc7d338faab5/vzjovup3izma7q2skzcf.jpg"
                            alt="google pixel 6"
                            class="product__image product__image--active"
                        />
                        <img
                            src="https://res.cloudinary.com/dard8s66g/image/upload/v1647993806/ecommerce/smartphone/623a63c9251afc7d338faab5/xtfslzmfpwg3bwoyylve.jpg"
                            alt="google pixel 6"
                            class="product__image"
                        />
                        <img
                            src="https://res.cloudinary.com/dard8s66g/image/upload/v1647993811/ecommerce/smartphone/623a63c9251afc7d338faab5/kqp1ffmcfs2q6ctck36i.jpg"
                            alt="google pixel 6"
                            class="product__image"
                        />
                        <img
                            src="https://res.cloudinary.com/dard8s66g/image/upload/v1647993808/ecommerce/smartphone/623a63c9251afc7d338faab5/fkco14duxzv8rnkyctbr.jpg"
                            alt="google pixel 6"
                            class="product__image"
                        />
                    </div>
                </div>
            </div>
        </div>
        <script src="main.js"></script>
    </body>
</html>


CSS




* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.product {
  width: 100%;
  height: 100vh;
}

.product__images {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.product__main-image {
  max-width: 500px;
  max-height: 600px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid #070707;
}

.product__slider-wrap {
  max-width: 500px;
  min-height: 100px;
  display: flex;
  align-items: center;
}

.product__slider {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.product__image {
  max-width: 180px;
  max-height: 100px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.5;
  margin: 0.25rem;
  border: 1px solid #070707;
}

.product__image:first-child {
  margin-left: 0;
}

.product__image:last-child {
  margin-right: 0;
}

.product__image:hover {
  opacity: 1;
}

.product__image--active {
  opacity: 1;
}

.product__slider::-webkit-scrollbar {
  height: 10px;
}

.product__slider::-webkit-scrollbar-thumb {
  background-color: #f9564f;
  border-radius: 50px;
}


자바스크립트




const mainImage = document.getElementById("main-image");
const images = document.querySelectorAll(".product__image");

images.forEach((image) => {
    image.addEventListener("click", (event) => {
        mainImage.src = event.target.src;

        document
            .querySelector(".product__image--active")
            .classList.remove("product__image--active");

        event.target.classList.add("product__image--active");
    });
});


결과





결론



그리고 거기 당신은 그것을 가지고 있습니다. 멋진 슬라이더를 만들기 위해 타사 코드를 사용하거나 긴 자습서를 따르기를 원하지 않는 적어도 한 사람에게 이 게시물이 유용했기를 바랍니다.

이것은 내 첫 번째 게시물이며 아직 웹 개발에 익숙하지 않으므로 건설적인 비판을 환영합니다.

좋은 하루 되세요(또는 저와 같은 밤 올빼미인 경우 밤).
ReactJS에서 이벤트를 수신하는 방법
【검정론】편측 검정 문제의 균일 최강력 검정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage