제이쿼리 이름좀 문의하겠습니다.
본문
안녕하세요 질문좀 드리겠습니다
제이쿼리를 찾고있는데 암만봐도 안나와서요
스크롤바를 이동시 위에 항목들도 같이 움직입니다.
그리고 스크롤바가 가로로 계속 천천이 움직은데 저 제이쿼리를 찾고싶은데 아시는분들 계씬다면 답변좀 부탁드립니다 ㅠㅠ
https://www.compuzone.co.kr/product/compuzone_premium_pc.htm?rtq=
위주소 아래부분에 사진과같이 있습니다.
비슷하게 구현은 해봤는데 위에 움직이는데 스크롤바를 작게 도 안되고 스크롤바가 움직이지 않습니다.
<div class="slider-container">
<div class="slider-track">
<div class="slider-item"><img src="http://www.online24.co.kr/data/banner/80" alt="Image 1"></div>
<div class="slider-item"><img src="http://www.online24.co.kr/data/banner/78" alt="Image 1"></div>
<div class="slider-item"><img src="http://www.online24.co.kr/data/banner/80" alt="Image 1"></div>
<div class="slider-item"><img src="http://www.online24.co.kr/data/banner/78" alt="Image 1"></div>
<div class="slider-item"><img src="http://www.online24.co.kr/data/banner/80" alt="Image 1"></div>
<div class="slider-item"><img src="http://www.online24.co.kr/data/banner/78" alt="Image 1"></div>
<div class="slider-item"><img src="http://www.online24.co.kr/data/banner/80" alt="Image 1"></div>
<div class="slider-item"><img src="http://www.online24.co.kr/data/banner/78" alt="Image 1"></div>
<div class="slider-item"><img src="http://www.online24.co.kr/data/banner/80" alt="Image 1"></div>
<div class="slider-item"><img src="http://www.online24.co.kr/data/banner/78" alt="Image 1"></div>
<div class="slider-item"><img src="http://www.online24.co.kr/data/banner/80" alt="Image 1"></div>
<div class="slider-item"><img src="http://www.online24.co.kr/data/banner/78" alt="Image 1"></div>
</div>
</div>
<style>
.slider-container {
width: 100%;
height: 300px;
overflow-x: scroll;
}
.slider-track {
display: flex;
width: 100%;
height: 100%;
animation: scroll 10s linear infinite;
}
.slider-container::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.slider-container::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
.slider-container::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 5px;
}
.slider-container:hover::-webkit-scrollbar-thumb {
background: #aaa;
}
.slider-container:hover::-webkit-scrollbar-track {
background: #f0f0f0;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>
답변을 작성하시기 전에 로그인 해주세요.
