슬라이드 쇼 애니메이션 가장 쉽게 구현 가능한 플러그인
안녕하세요.
고코더 입니다.
슬라드 쇼를 하는 기능에 플러그인은 참 많습니다.
많은 개발자들이 저마다에 방식으로
만들어 놓았습니다.
● 1. 그런데 이번에 소개할 슬라이드 쇼 HTML은
가장 간단하게 구현 가능한 플러그인을 소개해드립니다.
바로 COIN SLIDER 입니다.
coin-slider.zip
● 2. 얼마나 간단한지
제가 예제를 한번 만들어 보았습니다.
아래 코드를 참조해주세요.
gocoder_coinslider.html1 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 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/coin-slider/1.0.0/coin-slider.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/coin-slider/1.0.0/coin-slider-styles.css" type="text/css" /> <script type="text/javascript"> $(document).ready(function() { coinslider({width:260,height:146,navigation:true,hoverPause:true,delay:1500,effect:'rain',sDelay:30}); }); </script> <Body> <div id='coin-slider' > <a href="이미지 링크" target="_blank"> <img src='이미지 주소' > <span> </span> </a> <a href="이미지링크" target="_blank"> <img src='이미지 주소' > <span> </span> </a> </div> </body> | cs |
● 3. 이렇게만 하면 퀄리티 높은 슬라이드 애니메이션
HTML이 완성 됩니다.
결과물은 제 블로그 오른쪽 아래에
파워블로거 활동이 슬라이드가 자동으로 되는데요
이 플러그인을 활용여 개발하였습니다.
● 4. 그리고 해당 플러그인 안에 넣을수 있는
옵션 사항으로는
아래를 참조해주세요.
$.fn.coinslider.defaults = {
width: 565, // width of slider panel
height: 290, // height of slider panel
spw: 7, // squares per width
sph: 5, // squares per height
delay: 3000, // delay between images in ms
sDelay: 30, // delay beetwen squares in ms
opacity: 0.7, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: '', // random, swirl, rain, straight
links : true, // show images as links
hoverPause: true, // pause on hover
prevText: 'prev',
nextText: 'next',
navigation: true, // show/hide prev, next and buttons
showNavigationPrevNext: true,
showNavigationButtons: true,
navigationPrevNextAlwaysShown: false
};
마무리
블로그에 쓰기 딱 좋은 슬라이드 html 플러그인
'IT_Developers > Javascript' 카테고리의 다른 글
| jQuery - prop()으로 select 상태 값 변경 (0) | 2019.10.17 |
|---|---|
| jQuery - trigger()로 select 박스 선택 값 변경하기 (0) | 2019.10.17 |
| 자바스크립트 - location.href 와 location.replace 차이점 (0) | 2019.07.15 |
| console.log - 콘솔 로그 스타일 입히기 (0) | 2019.07.11 |
| jQuery - Div등 요소의 크기 조절, 사이즈 가져오기 / width(), hegiht(); (1) | 2019.06.19 |
댓글