티스토리 뷰
참고 : https://starlmh.tistory.com/entry/lightslide-%EC%98%88%EC%A0%9C
lightslide 예제
참고 : https://doolyit.tistory.com/147 jQuery Slider 제이쿼리 슬라이더/갤러리 - 다양한 기능의 lightslider jQuery Slider (제이쿼리 슬라이더) 중에서 swiper slider 를 많이들 쓰고 있는데요, 다소 무거운..
starlmh.tistory.com
참고 : https://doolyit.tistory.com/147
jQuery Slider 제이쿼리 슬라이더/갤러리 - 다양한 기능의 lightslider
jQuery Slider (제이쿼리 슬라이더) 중에서 swiper slider 를 많이들 쓰고 있는데요, 다소 무거운 감이 있긴 했습니다. 또한, 슬라이더를 여러개 사용할 경우에는 자원의 사용이 많아지는듯 해서, 다른 슬라이더를..
doolyit.tistory.com
참고 : https://sseung-fire.tistory.com/18
[Code] 이미지 슬라이드 - LightSlider
이미지 슬라이드 - LightSlider 1. HTML 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37..
sseung-fire.tistory.com
<!DOCTYPE html>
<html lang="en">
<head>
<title>lightSlider Demo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<style>
ul{
list-style: none outside none;
padding-left: 0;
margin: 0;
}
.demo .item{
margin-bottom: 60px;
}
.content-slider li{
background-color: #ed3020;
text-align: center;
color: #FFF;
}
.content-slider h3 {
margin: 0;
padding: 70px 0;
}
.demo{
width: 800px;
}
</style>
<link rel="stylesheet" href="https://han3283.cafe24.com/js/lightslider/css/lightslider.css"/>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://han3283.cafe24.com/js/lightslider/js/lightslider.js"></script>
<script>
$(document).ready(function() {
$("#content-slider").lightSlider({
loop:true,
auto:true,
keyPress:true
});
$('#image-gallery').lightSlider({
gallery:true,
item:1,
thumbItem:9,
slideMargin: 0,
speed:500,
auto:true,
loop:true,
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}
});
});
</script>
</head>
<body>
<div class="demo">
<div class="item">
<div class="clearfix" style="max-width:474px;">
<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
<li data-thumb="http://www.blueb.co.kr/SRC2/lightslider/image/cS-4.jpg">
<img src="http://www.blueb.co.kr/SRC2/lightslider/image/cS-4.jpg" />
</li>
<li data-thumb="http://www.blueb.co.kr/SRC2/lightslider/image/cS-3.jpg">
<img src="http://www.blueb.co.kr/SRC2/lightslider/image/cS-3.jpg" />
</li>
<li data-thumb="http://www.blueb.co.kr/SRC2/lightslider/image/cS-1.jpg">
<img src="http://www.blueb.co.kr/SRC2/lightslider/image/cS-1.jpg" />
</li>
</ul>
</div>
</div>
<div class="item">
<ul id="content-slider" class="content-slider">
<li>
<h3>1</h3>
</li>
<li>
<h3>2</h3>
</li>
<li>
<h3>3</h3>
</li>
<li>
<h3>4</h3>
</li>
<li>
<h3>5</h3>
</li>
<li>
<h3>6</h3>
</li>
</ul>
</div>
</div>
</body>
'JavaScript' 카테고리의 다른 글
| 메뉴 선택한 페이지 이동 시 에도 선택한 메뉴 하이라이트 적용하기. (0) | 2021.02.03 |
|---|---|
| 한글/영어 글자수 체크하기 (0) | 2020.05.27 |
| Jquery 슬라이드 예제 01 (2) | 2019.08.20 |
| Bootstrap Input 태그의 Clear 버튼 구현 (0) | 2019.06.03 |
| textarea 저장 줄바꿈 없이 출력 표시 (0) | 2019.05.09 |