반응형
이 블로그에서는 간단한 회전목마 이미지 슬라이더 앱을 구축하여 swiper.js에 대해 알아보겠습니다.
비디오 튜토리얼
나는 이것에 대한 동영상을 내 유튜브 채널에 만들었어.
제 채널 많이 봐주시고 구독 많이 해주세요. 이렇게 더 많은 콘텐츠를 만들 수 있는 동기부여가 됩니다.
세우다
<head>
<link
rel="stylesheet"
href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
</head>
<body>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
</body>HTML 레이아웃
<div class="container">
<!-- main swiper container -->
<div class="swiper">
<!-- wrapper for slide -->
<div class="swiper-wrapper">
<!-- single slide -->
<div class="swiper-slide">
<div class="image__wrapper">
<img src="images/1.jpg" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="image__wrapper">
<img src="images/2.jpg" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="image__wrapper">
<img src="images/3.jpg" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="image__wrapper">
<img src="images/4.jpg" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="image__wrapper">
<img src="images/5.jpg" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="image__wrapper">
<img src="images/6.jpg" alt="" />
</div>
</div>
</div>
<!-- pagination -->
<div class="swiper-pagination"></div>
<!-- navigation buttton -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
max-width: 100vw;
overflow-x: hidden;
}
.container {
background-color: #292929;
display: grid;
place-items: center;
min-height: 100vh;
}
.swiper {
width: 80%;
}
.image__wrapper {
width: 100%;
position: relative;
padding-top: 56.25%;
}
.image__wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}설명:
- 메인 스위퍼 컨테이너가 있습니다. 그리고 모든 슬라이드를 위한 포장지.
- 모든 이미지는 특정한 가로 세로 비율을 유지하여 반응합니다. 만약 당신이 그것을 배우고 싶다면, 다음 비디오를 보세요.
const swiper = new Swiper('.swiper', {
loop: true, // creates a infinite loop of slides
navigation: { // activate navigation with navigation buttons
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {// activate paginations
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
// keyboard and mousewheel navigation
keyboard: true,
mousewheel: true,
// for other than sliding effect
// effect: 'creative',
// creativeEffect: {
// prev: {
// // will set `translateZ(-400px)` on previous slides
// translate: [0, 0, -400],
// },
// next: {
// // will set `translateX(100%)` on next slides
// translate: ['100%', 0, 0],
// },
// },
// effect: 'coverflow',
})설명:
- 우리는 스위퍼의 새로운 인스턴스를 만들어야 합니다. 우리는 또한 커스터마이징할 수 있는 옵션을 전달할 수 있습니다. 문서를 자세히 읽어 주십시오.
뻔뻔한 플러그
저는 바닐라 HTML, CSS, 자바스크립트로 몇 개의 프로젝트 기반 동영상을 만들었습니다.
다음 사항에 대해 알아봅니다.
- Javascript 교차 관찰기로 시원한 효과 추가
- DOM 조작
- 요소를 CSS 위치에 정렬합니다.
- 반응성이 좋은 웹사이트를 만드는 방법.
프런트 엔드 스킬을 다시 익힐 수 있는 좋은 프로젝트가 될 것입니다.
관심이 있으시다면 영상을 확인하실 수 있습니다.
Cules Coding 많이 좋아해주시고 구독해 주세요. 이렇게 더 많은 콘텐츠를 만들 수 있는 동기부여가 됩니다.
이 블로그는 여기까지입니다. 저는 간단하게 설명하려고 노력했습니다. 막히면 나한테 질문해도 돼.
그나저나, 저는 제 능력으로 큰 가치를 제공할 수 있는 회사에서 새로운 기회를 찾고 있습니다. 만약 당신이 풀 스택 웹 개발에 능숙하고 세상을 혁신하는 데 열정을 가진 사람을 찾고 있다면 언제든지 저에게 연락하세요. 또한, 저는 프리랜서 프로젝트에 대해 이야기 할 수 있습니다.
여기서 내 작업 보기
연락처
- 이메일: thatanjan@gmail.com
- 링크드인: @thatanjan
- 포트폴리오: anjan
- 깃허브: @thatanjan
- 인스타그램(개인): @타탄잔
- 인스타그램(유튜브 채널): @타탄잔
- 트위터: @thatanjan
시청할 수 있는 비디오:
읽고 싶은 블로그:
- Eslint, TypeScript를 사용하여 더 예쁜 설정 및 대응
- 클라이언트 측 렌더링이란?
- 서버 측 렌더링이란?
- 트리 데이터 구조에 대해 알아야 할 모든 사항
- Nextjs를 사용해야 하는 13가지 이유
- 초보자의 양자 컴퓨터 가이드
'css' 카테고리의 다른 글
| CSS 텍스트 호버 효과 (0) | 2022.02.14 |
|---|---|
| 편지 날리기... (0) | 2022.02.14 |
| 4 HTML (0) | 2022.02.05 |
| DAY-16 : 랴즈 훈련 (0) | 2022.02.05 |
| css- part 1에서 속성을 변환합니다. (0) | 2022.02.05 |
댓글