[JS + jquery] bxSlider ํ๋ฌ๊ทธ์ธ ์ด์ฉํด์ ๊ฐ๋จํ ๊ฐค๋ฌ๋ฆฌ ๋ง๋ค๊ธฐ
2021. 11. 3. 11:10ใHTML + CSS + JS/JS ์๋ฐ์คํฌ๋ฆฝํธ
728x90
< > ํ์ดํ๋ฅผ ํด๋ฆญํ๋ฉด ์์ผ๋ก ์ด๋ํ ์ ์๊ณ , ์๋์ผ๋ก ์ฌ์ง์ด ์ ํ๋๊ณ ,
๋ฐ์ ์ด๋ฏธ์ง๋ฅผ ํด๋ฆญํ๋ฉด ๊ทธ ์ด๋ฏธ์ง๋ก ์ด๋ํ ์ ์๋๋ก ํ๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Plugin </title>
<script src="js/jquery.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="css/jquery.bxslider.min.css">
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
#gallery_wrap{ margin: 0 auto; width: 450px;}
#gallery_wrap .bx-wrapper{margin-bottom: 20px;}
.slider-pager{text-align: center;}
.slider-pager li{display: inline;}
</style>
<script>
$(function() {
$(".slide_gallery").bxSlider({
auto : true,
autoControls : false,
pagerCustom : '.slider-pager'
});
});
</script>
</head>
<body>
<div id="gallery_wrap">
<ul class="slide_gallery">
<li><img src="images/pic_1.jpg" alt="์ฌ์ง1"></li>
<li><img src="images/pic_2.jpg" alt="์ฌ์ง2"></li>
<li><img src="images/pic_3.jpg" alt="์ฌ์ง3"></li>
<li><img src="images/pic_4.jpg" alt="์ฌ์ง4"></li>
<li><img src="images/pic_5.jpg" alt="์ฌ์ง8"></li>
</ul>
<ul class="slider-pager">
<li><a href="#" data-slide-index="0">
<img src="images/pic_t1.jpg" alt="์ฌ์ง1"></a>
</li>
<li><a href="#" data-slide-index="1">
<img src="images/pic_t2.jpg" alt="์ฌ์ง2"></a>
</li>
<li><a href="#" data-slide-index="2">
<img src="images/pic_t3.jpg" alt="์ฌ์ง3"></a>
</li>
<li><a href="#" data-slide-index="3">
<img src="images/pic_t4.jpg" alt="์ฌ์ง4"></a>
</li>
<li><a href="#" data-slide-index="4">
<img src="images/pic_t5.jpg" alt="์ฌ์ง5"></a>
</li>
</ul>
</div>
</body>
</html>
1๏ธโฃ auto ๋ ์ฌ๋ผ์ด๋ ์๋ ์ ํ ์ฌ๋ถ๋ฅผ ์ค์ ํ๋ ๊ฒ์ผ๋ก true๋ก ์ค์ ํ๋ฉด ์๋ ์ ํ ๋๋ค.
2๏ธโฃ autoControls ๋ ์๋ ์ ํ ์ฌ๋ถ์ ๋ํด ๋ฉ์ถค๊ณผ ์ฌ์ ๋ฒํผ์ ์ ๊ณตํ๋ ๊ฒ์ผ๋ก false๋ฅผ ํ๋ฉด ์ ๊ณต๋์ง ์๋๋ค.
3๏ธโฃ pagerCustom ์ ๋ฐ์ ์ฌ์ง์ ํด๋ฆญํ๋ฉด ๊ทธ์ ๋ํ ์ด๋ฏธ์ง๋ก ์ด๋ํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค.
728x90
'HTML + CSS + JS > JS ์๋ฐ์คํฌ๋ฆฝํธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JSP] ์ธ์ Session ์์ฑ,์ญ์ , session์ผ๋ก ๋ก๊ทธ์ธํ๊ธฐ (0) | 2021.11.03 |
|---|---|
| [JS + jquery] ์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ ๋ง๋ค์ด๋ณด๊ธฐ (0) | 2021.11.03 |
| [JS + jquery] jquery-cookie ํ๋ฌ๊ทธ์ธ (0) | 2021.11.03 |
| [JS + jquery] bxSlider ํ๋ฌ๊ทธ์ธ (0) | 2021.11.03 |
| [JS + jquery] ์ ์ด์ฟผ๋ฆฌ UI ํ๋ฌ๊ทธ์ธ draggable(), Datepicker() (0) | 2021.11.03 |