반응형
[Html & CSS] 슬라이드쇼 구현하는 방법 !! (Slick 라이브러리를 활용)
지난 글에서 추천한 슬라이드 관련 라이브러리 중 Slick을 사용하여 슬라이드를 구현해보았습니다.
공식 홈페이지는 아래글 참조해주세요 :)
2023.07.02 - [여러가지/기타] - [JavaScript & jQuery] 슬라이드(Slide) 관련 라이브러리 추천 !!
[JavaScript & jQuery] 슬라이드(Slide) 관련 라이브러리 추천 !!
[JavaScript & jQuery] 슬라이드(Slide) 관련 라이브러리 추천 !! Swiper 순수 자바스크립트에서 작동이되고, 사용자가 많아 예시도 많아서 좋다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is
seill.tistory.com
예제코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slick Slide Show Example</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
<style>
body {
background: peachpuff;
}
.slider {
width: 600px;
margin: 0 auto;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
.slick-dots {
bottom: 10px;
}
.slick-dots li button:before {
font-size: 10px;
line-height: 10px;
color: #fff;
}
</style>
</head>
<body>
<div class="slider">
<img src="https://picsum.photos/id/18/367/267" alt="Image 1">
<img src="https://picsum.photos/id/19/367/267" alt="Image 2">
<img src="https://picsum.photos/id/20/367/267" alt="Image 3">
<img src="https://picsum.photos/id/21/367/267" alt="Image 4">
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$('.slider').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
adaptiveHeight: true
});
</script>결과값
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [Html & CSS] css를 활용하여 움직이는 효과 만드는 방법 !! (0) | 2023.07.24 |
|---|---|
| [Html & CSS] 사진 클릭하면서 넘기는 효과 주는 방법 !! (0) | 2023.07.22 |
| [Html & CSS] javascript를 활용하여 input 태그에 엔터키 이벤트 확인하는 방법 !! (0) | 2023.07.07 |
| [CSS] 에러 메세지 Font property font-family does not have generic default 해결 방법 !! (0) | 2023.07.01 |
| [Html & CSS] javascript를 활용하여 텍스트에 특수문자 제거하는 정규식 쓰는 방법 !! (0) | 2023.06.27 |
댓글