<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 슬라이더</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css"
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<!-- <link rel="stylesheet" type="text/css" href="./css/test.css"> -->
<!-- swiper cdn -->
<style>
:root {
--swiper-theme-color:rgb(228, 107, 181);
}
.swiper {
width: 100%;
height: 300px;
}
</style>
<!-- jquery cdn -->
<!-- javascript 작성 공간 -->
<script>
$(function () {
var swiper = new Swiper('.swiper', {
//direction: 'vertical',//슬라이드 방향
//loop: true,//슬라이드의 순환 설정
pagination: {
el: '.swiper-pagination',//적용할 요소
type: 'bullets',//페이지네이션 유형 (progressbar/bullets/fraction)
clickable: true,//페이지네이션 클릭가능여부
loop: true,
},
// 이동 화살표
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
hideOnClick: true,//클릭 시 숨김 처리 여부
},
// 스크롤바
// scrollbar: {
// el: '.swiper-scrollbar',
// },
//자동재생
autoplay: {
delay: 1000, //재생간격(ms)
pauseOnMouseEnter: true,//마우스 진입시 멈춤 여부
},
//이펙트(전환효과) 설정
effect:
'cards',
});
});
</script>
</head>
<body>
<div class="container w-600">
<div class="row">
<h1>이미지 슬라이더</h1>
</div>
<div class="row">
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 파일 업로드 (0) | 2023.11.10 |
|---|---|
| 써머노트(Summernote) (0) | 2023.11.09 |
| 차트2 (ajax) (0) | 2023.11.07 |
| 차트 (0) | 2023.11.06 |
| ajax 템플릿 (0) | 2023.11.03 |