<javascript forEach문>
- forEach문은 Array에 대해서만 사용 가능
// 1. 화살표 함수
arr.forEach(item => {
// item은 배열 각각의 요소들을 순환
console.log(item);
});
// 2. forEach 함수의 원형 그대로 사용하기
arr.forEach(function(item, index, arr2) {
// item : 배열 각각의 요소
// index : 배열 인덱스
// arr2 : 배열 자체 ( arr 배열을 통째로 참조해야할 경우 사용 )
});
https://dydals5678.tistory.com/66
javascript - foreach 문 , for in 문 , for of문
◎ foreach 문 ▼ 내용 foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다. (ES6부터는 Map,Set 지원) 배열의 요소들을 반복하여 작업을 수행할수 있습니다. foreach구문의 인자로 callback함
dydals5678.tistory.com
<슬라이드 구현- swiper>
- MIT License로 무료로(상업적 사용O) 가능
- option이 매우 다양
- swiper-container > swiper-wrapper > swiper-slide 구조
1) demo에 있는 원하는 sourcecode 찾기
- autoplay: 자동으로 넘어가는
2) html <head>에 삽입
- style의 경우, <style>로 <head>내에 바로 넣어도 되지만 관리를 편하게 하기 위하여 css 폴더 내 swiper.css 파일을 생성하여 style 코드를 삽입함
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>2) html <body>에 script 삽입
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="js/swiper.js"></script>
3) swiper.css
- swiper의 style 지정(기본 코드에서 원하는 style로 수정가능)
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
/*w,h 수정*/
width: 100vw;
height: 90%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}4) swiper.js
- spaceBetween
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
// 3.5s마다 자동 넘김
autoplay: {
delay: 3500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
[참고]
- swiper demo 확인 및 코드
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
- swiper 사용법
[JavaScript] Swiper 사용법 - 슬라이드 구현
swiper는 슬라이드 라이브러리로 다양한 메소드와 설정을 지원해서 사용하기 매우 편한 점이 있습니다. 무엇보다 하위 브라우저(ie9)에서도 문제없이 사용 가능하기 때문에 크로스 브라우징 측면
velog.io
- swiper css 수정하기
http://sbkyun.blogspot.com/2019/09/bxslider-css-style.html
이미지 슬라이드 bxslider css 수정 (style 오버라이드)
신봉균
sbkyun.blogspot.com
'주간 학습 > 주간 학습' 카테고리의 다른 글
| 4주차_210720 (0) | 2021.07.22 |
|---|---|
| html 유용한 단축키 (0) | 2021.07.16 |
| 3주차_210716 (0) | 2021.07.16 |
| 3주차_210714 (0) | 2021.07.14 |
| 3주차_210712) GET&POST, 로그인 구현 방법(쿠키, 세션, JWT) (0) | 2021.07.12 |
