ALOHA CLASS
/
Front-End
/
Javascript
Search
Duplicate
Share
์ด๋ฏธ์ง ์ฌ๋ผ์ด๋
slick
jQuery ๊ธฐ๋ฐ ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
1.
slick ํ๋ฌ๊ทธ์ธ ๊ฐ์ ธ์ค๊ธฐ
a.
CDN ์ผ๋ก ๊ฐ์ ธ์ค๊ธฐ
<!-- slick css CDN -->
<
link
rel
=
"
stylesheet
"
type
=
"
text/css
"
href
=
"
//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css
"
/>
<!-- slick js CDN -->
<
script
type
=
"
text/javascript
"
src
=
"
//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js
"
>
</
script
>
HTML
๋ณต์ฌ
b.
FILE ๋ก ๊ฐ์ ธ์ค๊ธฐ
github.com
<!-- slick css FILE -->
<
link
rel
=
"
stylesheet
"
href
=
"
css/slick.css
"
>
<
link
rel
=
"
stylesheet
"
href
=
"
css/slick-theme.css
"
>
<!-- slick js FILE -->
<
script
src
=
"
js/slick.min.js
"
>
</
script
>
HTML
๋ณต์ฌ
2.
jQuery ๊ฐ์ ธ์ค๊ธฐ
<!-- jQuery CDN ๋ฐฉ์์ผ๋ก ํฌํจํ๊ธฐ -->
<
script
src
=
"
https://code.jquery.com/jquery-3.7.1.min.js
"
>
</
script
>
HTML
๋ณต์ฌ
jQuery ํฌํจํ๋ ์ฝ๋๊ฐ ํ๋ฌ๊ทธ์ธ ํฌํจ์ฝ๋๋ณด๋ค ์์ ์์ด์ผํ๋ค.
slick
swiper ๋ผ์ด๋ธ๋ฌ๋ฆฌ
Swiper - The Most Modern Mobile Touch Slider
The Most Modern Mobile Touch Slider
swiper
1. bx-slider ํ๋ฌ๊ทธ์ธ ๊ฐ์ ธ์ค๊ธฐ
2. bxslider HTML ๋ ์ด์์ ์ฝ๋
bx-slider
