안녕하세요.
디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.
이번 포스팅에서는
리뷰 슬라이드 만드는 방법에 대해 공유하겠습니다.
먼저 완성된 화면을 보여드리겠습니다.
prev, next 버튼을 누르면 그에 따라 이미지, 텍스트가 교체돼요.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- main css -->
<link rel="stylesheet" href="css/main.css">
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<!-- font awesome -->
<script src="js/all.js"></script>
<title>슬라이드를 통한 이미지 및 텍스트 교체</title>
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row max-height align-items-center">
<!-- col -->
<div class="col-10 mx-auto col-md-6">
<div class="row">
<div class="col text-center my-5">
<h4 class="title-heading text-uppercase">design & dev</h4>
<h1 class="title-subheading text-uppercase">TOOKTAK</h1>
</div>
</div>
<div class="card my-5 text-center customer-card">
<img src="img/customer-0.jpg" width="150" id="customer-img" class="img-card mx-auto" alt="">
<h4 id="customer-name" class="text-uppercase">디발자 뚝딱</h4>
<div class="review-icons my-2">
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star-half"></i>
</span>
</div>
<p id="customer-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam sit voluptatum illo? Quae fugiat
aspernatur harum aperiam, quis eos officia.</p>
<span class="quote-icon">
<i class="fas fa-quote-left"></i>
</span>
<a href="#" class="btn prevBtn"><i class="fas fa-chevron-left"></i></a>
<a href="#" class="btn nextBtn"><i class="fas fa-chevron-right"></i></a>
</div>
</div>
<!-- end of col -->
</div>
</div>
<!-- jquery -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- bootstrap js -->
<script src="js/bootstrap.bundle.min.js"></script>
<!-- script js -->
<script src="js/app.js"></script>
</body>
</html>
js
(function(){
const customerImage = document.querySelector('#customer-img')
const customerName = document.querySelector('#customer-name')
const customerText = document.querySelector('#customer-text')
const buttons = document.querySelectorAll('.btn')
let index = 0
const customers = []
// _________ Customer 생성자를 사용하여 새로운 Customer 생성
// Customer 생성자
function Customer(img, name, text) {
this.img = img
this.name = name
this.text = text
}
// 새로운 Customer 생성
function createCustomer(img, name, text) {
let fullImg = `./img/customer-${img}.jpg`
let customer = new Customer(fullImg, name, text)
customers.push(customer)
}
// 새로운 Customer 내용
createCustomer(0, 'Do or Die', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?')
createCustomer(1, 'Doggaebi', 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock')
createCustomer(2, 'Doit', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable.')
createCustomer(3, 'Try', 'If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text.')
createCustomer(4, 'GoTooktak', 'Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.')
// forEach문을 통해 배열을 반복하여 prev, next 버튼 활성화
// forEach : 배열의 반복 작업이 필요할 때 사용한다.
buttons.forEach(function(button){
button.addEventListener('click', function(e){
if (e.target.parentElement.classList.contains('prevBtn')){
index--
// 맨 처음 인덱스라면 마지막으로 돌아갈 것
if(index === 0){
index = customers.length
}
customerImage.src = customers[index].img
customerName.textContent = customers[index].name
customerText.textContent = customers[index].text
}
if (e.target.parentElement.classList.contains('nextBtn')){
index++
// 맨 마지막 인덱스라면 처음으로 돌아갈 것
if(index === customers.length){
index = 0
}
customerImage.src = customers[index].img
customerName.textContent = customers[index].name
customerText.textContent = customers[index].text
}
})
})
})()
css
.max-height{
min-height: 100vh;
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) ,url('../img/back.png')center/cover no-repeat fixed;
}
.title-heading{
color:#ff8b8b;
}
.title-subheading{
color: white;
}
.customer-card{
background: transparent!important;
color:white;
border:0.05rem solid white;
padding-bottom: 1rem;
padding-left: 1rem;
padding-right: 1rem;
position: relative;
}
.img-card{
border-radius: 50%;
width: 130px;
height: 130px;
margin-bottom: 1rem;
margin-top: -3rem;
}
.star-icon{
color: #ffffff;
font-size: 1.4rem;
}
.quote-icon{
font-size: 2rem;
color: #ff8b8b;
}
.prevBtn,.nextBtn{
font-size: 1.5rem;
color:#fff;
border:0.1rem solid #fff;
display: inline-block;
position: absolute;
padding: 2rem;
border-radius: 50px;
transition: all 1s ease-in-out;
}
.prevBtn:hover{
background: #ff8b8b;
color: white;
}
.nextBtn:hover{
background: #ff8b8b;
color: white;
}
.prevBtn{
top: 50%;
left: 0;
transform: translate(-120%,-50%);
}
.nextBtn{
top: 50%;
right: 0;
transform: translate(120%,-50%);
}
위 코드는 아래 링크에 있는 자바스크립트 프로젝트를 활용 및 참고하여 작업하였습니다.
https://jsbeginners.com/javascript-projects-for-beginners/#below-list
100+ JavaScript Projects for Beginners! [ Solutions Provided! ]
Looking for JavaScript projects to get more JavaScript practice? Here's a list of over 100 javascript projects for beginners!
jsbeginners.com
728x90
'코딩도 합니다 > JS' 카테고리의 다른 글
| [자바스크립트 js / 프로젝트 6] 계산기 만들기 / eval() (0) | 2021.07.13 |
|---|---|
| [자바스크립트js / 프로젝트5] 이미지 스크롤 / hover 시 dom 이동 / 필터 기능 / dataset / toLowerCase() / trim() (0) | 2021.07.13 |
| [자바스크립트 js / 실무 기록] 서브페이지 안의 서브페이지 메뉴 활성화 (0) | 2021.07.11 |
| [자바스크립트 js / 실무 기록] 부트스트랩 popover 응용 / popover 이미지 추가 / popover html 내용 보여지기 / popover 줄바꿈 (0) | 2021.07.11 |
| [자바스크립트 js / 실무 기록] 셀렉트 옵션을 버튼으로 '이전', '다음', '현재' 컨트롤 하기 (0) | 2021.07.11 |
