기본 콘텐츠로 건너뛰기

슬라이드 구현 (HTML,CSS,Javascript,jQuery)

HTML


<div class="slide">
<div class="wrapper slide-wrapper">
<ul class="slide-item slide-slides">
<li class="slide-slide slide-slide-container background-image" style="background-image: url('/images/slide/bridge-2805540.jpg');background-position: 50% 50%;">
<div class="item content background-content-black">
<div class="subhead" style="color:white;">[로고]</div>
<div class="subhead" style="color:white;">청와대 대한민국 ESG 협약한 기술로 인정받은 ESG 경영 문구</div>
<div class="subhead" style="color:white;">42번째 정부기관과 협약한 회사</div>
<div class="subhead" style="color:white;">(태양광 가로등 사진 전후면)</div>
</div>
<div class="slide-item-item-item item content background-content-black">
<div class="headline" style="color:white;">빛 그 이상의 가치를 전하는 스마트조명 기술 기업</div>
<div class="subhead" style="color:white;">해충방지LED 항균살균LED 악취제거LED 뷰티LED 동물성장LED 식물성장LED 이끼&탄소감축LED</div>
<a href="" class="link" style="color:white;font-size:17px;">자세히 알아보기 > </a>
</div>
</li>
<li class="slide-slide slide-slide-container background-image" style="background-image: url('/images/slide/KakaoTalk_Image_2023-06-12-10-53-11.jpeg');background-position: 50% 50%;">
<div class="item content background-content-black">
<div class="subhead" style="color:white;">모기 등 해충은 본능적으로 자외선 청색광(블루라이트)으로 모여듭니다.</div>
<div class="subhead" style="color:white;">MTC 해충방지 LED조명은 블루라이트 영역(300~500nm)을 100%제거하여 해충유입이 사라집니다</div>
<div class="subhead" style="color:white;">건물외부등 전원주택 공원 캠핑 카페 레스토랑 축사 양계장 등에 추천합니다</div>
<div class="headline" style="color:white;">해충방지 SolarLED조명</div>
<div class="subhead" style="color:white;">가로등, 투광등, 전구, 다운라이트</div>
<a href="" class="link" style="color:white;font-size:17px;">자세히 알아보기 > </a>
</div>
</li>
<li class="slide-slide slide-slide-container background-image" style="background-image: url('/images/slide/KakaoTalk_Image_2023-06-12-10-53-16.jpeg');background-position: 50% 50%;">
<div class="item content background-content-black">
<div class="headline" style="color:white;">New Nomal 시대에 박테리아로부터 고객과 가족을 보호합니다.</div>
<div class="subhead" style="color:white;">MTC 해충방지 LED조명은 높이2m-15w-24hr 항균살균테스트에서 박테리아균 99.9%를 제거합니다</div>
<div class="subhead" style="color:white;">욕실화장실 식탁 주방 반려동물하우스 요양병원 호텔 숙박시설 다중이용시설 등에 추천합니다</div>
<div class="subhead" style="color:white;">항균살균 LED조명</div>
<a href="" class="link" style="color:white;font-size:17px;">자세히 알아보기 > </a>
</div>
</li>
</ul>
<div class="slide-item slide-button-container">
<button class="slide-button slide-left-button" onclick="slidePrev(1000);">〈</button>
<button class="slide-button slide-right-button" onclick="slideNext(1000);">〉</button>
</div>
<ul class="slide-item slide-pagination">
</ul>
</div>
</div>

CSS


.slide-wrapper {
padding: 0px;
overflow: hidden;
height: calc(1000px + 50px);
position: relative;
}
@media (max-width: 500px) {
.slide-wrapper {
height: calc(500px + 50px);
}
}

.slide-slides {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
}

/* 슬라이드 아이템 */
.slide-slide {
height: 1000px;
position: relative;
left: 0px;
}
@media (max-width: 500px) {
.slide-slide {
display: 500px; ?뭐지;
}
}

.slide-button-container {
position: absolute;
top:0;
width: 100%;
height: calc(100% - 50px);
}
.slide-button-container {
display: none;
}

/* 슬라이드 버튼 */
.slide-button {
width: 50px;
height: 50px;
border-radius: 25px;
border-width: 0px;
line-height: 50px;
font-weight: bold;
background-color: rgba(210,210,210,0.64);
color: rgba(0,0,0,0.5);
font-size: 25px;
cursor: pointer;
font-family: SF Pro Icons,AOS Icons;
}

/* 왼쪽 슬라이드 버튼 */
.slide-left-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 22px;
}

/* 오른쪽 슬라이드 버튼 */
.slide-right-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 22px;
}

/* 슬라이드 페이지네이션 */
.slide-pagination {
position: absolute;
display: flex;
width: fit-content;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
}

.slide-pagination-item {
/*
선택된 아이템 색상 : #000000cc
선택되지 않은 아이템 색상 : #0000006b
*/
background-color: #0000006b;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 11px;
cursor: pointer;
border: 0px;
}

.curr-slide-pagination-item {
background-color: #000000cc;
}

Javascript(jQuery)


let slide_curr = 1;
let slide = document.querySelector(".slide-slides");
let slide_items = slide.children;
let slide_min = 1;
let slide_max = slide_items.length;
let slide_pagination = document.querySelector(".slide-pagination");

/* 슬라이드 페이지네이션 생성 */
for (let i = 0; i < slide_max; i++) {
if (i == 0) {
slide_pagination.innerHTML += "<li class='slide-pagination-item curr-slide-pagination-item'></li>";
} else {
slide_pagination.innerHTML += "<li class='slide-pagination-item'></li>";
}
}

function slideSlide(slideSpeed, targetPage) {
console.log("slideSlide");
$(".slide-slide").css("transition", "left " + slideSpeed + "ms");
$(".slide-slide").css("left", "-" + ((targetPage - 1) * 100) + "%");
document.querySelector(".curr-slide-pagination-item").className = "slide-pagination-item";
$(".slide-pagination-item")[targetPage - 1].className = "slide-pagination-item curr-slide-pagination-item";
slide_curr = targetPage;
}

function slideNext(slideSpeed) {
if (slide_curr < slide_max) {
slideSlide(slideSpeed, slide_curr + 1);
} else {
slideSlide(slideSpeed, slide_min);
}
}

function slidePrev(slideSpeed) {
if (slide_curr > slide_min) {
slideSlide(slideSpeed, slide_curr - 1);
} else {
slideSlide(slideSpeed, slide_max);
}
}

$(".slide-pagination-item").on("click", function () {
let slide_target = $(this).index() + 1;
slideSlide(1000, slide_target);
});

/* 이벤트 */
let slideWrap = document.querySelector(".slide-wrapper");
let startPoin = 0;
let endPoint = 0;

// PC 클릭 이벤트 (드래그)
slideWrap.addEventListener("mousedown", (e) => {
startPoint = e.pageX; // 마우스 드래그 시작 위치 저장
});

slideWrap.addEventListener("mouseup", (e) => {
endPoint = e.pageX; // 마우스 드래그 끝 위치 저장
if (startPoint < endPoint) {
// 마우스가 오른쪽으로 드래그 된 경우
slidePrev(1000);
} else if (startPoint > endPoint) {
// 마우스가 왼쪽으로 드래그 된 경우
slideNext(1000);
}
});

/* 터치 이벤트 */
slideWrap.addEventListener("touchstart", (e) => {
startPoint = e.touches[0].pageX; // 터치가 시작되는 위치 저장
});
slideWrap.addEventListener("touchend", (e) => {
endPoint = e.changedTouches[0].pageX; // 터치가 끝나는 위치 저장
if (startPoint < endPoint) {
// 오른쪽으로 스와이프 된 경우
slidePrev(1000);
} else if (startPoint > endPoint) {
// 왼쪽으로 스와이프 된 경우
slideNext(1000);
}
});

// 기본적으로 슬라이드 루프 시작하기
let loopInterval = setInterval(() => {
slideNext(1000);
}, 5000);

// 슬라이드에 마우스가 올라간 경우 루프 멈추기
slideWrap.addEventListener("mouseover", () => {
clearInterval(loopInterval);
});

// 슬라이드에서 마우스가 나온 경우 루프 재시작하기
slideWrap.addEventListener("mouseout", () => {
loopInterval = setInterval(() => {
slideNext(1000);
}, 5000);
});

참고 사이트 : https://devinus.tistory.com/48

라벨:

이 블로그의 인기 게시물

Blogger

코드 하이라이트 사이트 http://hilite.me/ 코드 <!-- 나만의 공간 --> <style id='daru_css' type='text/css'> .code {      overflow: auto;      height: 200px;      background-color: rgb(239,239,239);      border-radius: 10px;      padding: 5px 10px; } .code::-webkit-scrollbar-thumb {      background-color: grey;      border: 1px solid transparent;      border-radius: 10px;      background-clip: padding-box;   } .code::-webkit-scrollbar {      width: 15px; } </style> <!-- 나만의 공간 -->
더보기

Python Sklearn make_blobs

from sklearn.datasets import make_blobs 예제 X, y = make_blobs(n_samples=500, centers=3, n_features=2, random_state=0) # 500개의 점을 3개로 모이게 한다, 변수는 2개, 무작위 상태는 0 X.shape, y.shape # ((500, 2), (500,)) plt.scatter(X[:,0],X[:,1],c=y,s=5) plt.show() # 학습 데이터 나누기 from sklearn.model_selection import train_test_split x_train, x_test, y_train, y_test = train_test_split(X, y, test_size=.25, random_state=0) x_train.shape, x_test.shape, y_train.shape, y_test.shape # ((375, 2), (125, 2), (375,), (125,)) # 지도 학습 하기 from sklearn.linear_model import LogisticRegression logisticReg = LogisticRegression(max_iter=5000) # 기본 반복 100 logisticReg.fit(x_train, y_train) # 추정하기 pred = logisticReg.predict(X) # 결정계수 logisticReg.score(x_test, y_test) # 0.92 # 한글 깨짐 없이 나오게 설정 from matplotlib import rcParams # 인코딩 폰트 설정 rcParams['font.family'] = 'New Gulim' rcParams['font.size'] = 10 # 산점도 plt.figure(figsize=(10,4)) plt.subplot(1,2, 1) plt.scatter(X[:,0],X[:,1],c=y) plt.title('정답') plt.su...
더보기

Python 문법

제곱 c = c**2; 주석 # 주석 함수 # 함수 형식 def hello(): # 함수 선언     print("여기는 함수") # 함수 실행문 hello() # 함수 호출 #결과: 여기는 함수 def add(a,b): # 매개변수에 자료형이 필요없다     c = a+b     print(f"{a} + {b} = {c}") add(3,5) #결과 : 3 + 5 = 8 if문 if a > b:     print("a가 큽니다") 객체의 정보 dir(객체) 객체의 주소 id(객체) 생략 if 'a' == 'a':     pass # 생략 else:     pass # 생략 enumerate for i,v in enumerate(range(20, 26)):     print(i,v) display display(df)
더보기