Camera Slider jquery
첨부파일 https://eond.com/jquery/364961

Camera Slider jQuery

https://www.pixedelic.com/plugins/camera/

Camera Slider jQuery - Github

https://github.com/pixedelic/Camera


sample

<script type='text/javascript' src='{$tpl_path}/assets/js/camera/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='{$tpl_path}/assets/js/camera/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='{$tpl_path}/assets/js/camera/camera.min.js'></script>

<script>
jQuery(function(){
    jQuery('#camera_wrap_2').camera({
        alignment: 'center',
        height: '450px',
        loader: 'bar',
        loaderColor: '#3dc1ff',
        loaderBgColor: '#fff',
        loaderOpacity: 1,
        barPosition: 'top',
        loaderPadding : 0,  // 로더와 배경 사이에 표시 할 빈 픽셀 수
        loaderStroke : 4,   // 파이 로더와 바 로더의 두께
        pagination: false,
       hover:false,
        thumbnails: false,
      fx: 'simpleFade'
    });
});
</script>
<style>
   .camera_caption{bottom:inherit;top:180px;font-size:40px;color:#000;text-align:center;}
   .camera_caption > div{background:inherit !important;}
</style>


fx (넘어가는 효과)

'random','simpleFade', 'curtainTopLeft', 'curtainTopRight', 'curtainBottomLeft', 'curtainBottomRight', 'curtainSliceLeft', 'curtainSliceRight', 'blindCurtainTopLeft', 'blindCurtainTopRight', 'blindCurtainBottomLeft', 'blindCurtainBottomRight', 'blindCurtainSliceBottom', 'blindCurtainSliceTop', 'stampede', 'mosaic', 'mosaicReverse', 'mosaicRandom', 'mosaicSpiral', 'mosaicSpiralReverse', 'topLeftBottomRight', 'bottomRightTopLeft', 'bottomLeftTopRight', 'bottomLeftTopRight', 'scrollLeft', 'scrollRight', 'scrollHorz', 'scrollBottom', 'scrollTop' 

N.B.: you can also use more than one effect, just separate them with commas: 'simpleFade, scrollRight, scrollBottom'

하나의 이펙트 이상을 사용할 수 있습니다. 예) 'simpleFade,scrollRight,scrollBottom' 


코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 142 articles in 2 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
121 [슬라이더 플러그인] slick slider 사용방법 2018/08/15 0
120 [기초활용] [jQuery] each, loop, setInterval 활용 파일 2018/05/28 0
119 [팁] 자바스크립트 키코드, 키 이벤트 2018/05/27 0
118 [기초활용] 모달창 만들기 2017/12/21 0
117 [기초활용] Modal (모달창) 2018/05/27 0
116 [팁] [jQuery] 페이징 만들기 2015/08/31 0
115 [슬라이더 플러그인] 병풍 스크립트 2018/04/19 0
114 [슬라이더 플러그인] carousel slider 2018/04/17 0
113 [화면전환 스크롤] Delighters : CSS Animations on Page Scroll 2018/04/13 0
112 [기초활용] Add smooth scrolling to page anchors 2018/04/13 0
111 [기타 플러그인] macy.js (masonry 벽돌 레이아웃) 파일 2018/01/15 0
현재글 [슬라이더 플러그인] Camera Slider jquery 2015/11/15 0
109 [기초활용] jquery popup layer 2017/12/21 0
108 [기초활용] jquery 가나다 정렬 2017/12/20 0
107 [기초활용] [jquery] 폰트 사이즈 조절 버튼 페이지 이동시에 변수 초기화 문제 2017/12/20 0
106 [기초활용] 스크롤 내려오면 멈추는 스크립트 2017/11/16 0
105 $.browser.msie undefined 오류 2017/08/23 0
104 [화면전환 스크롤] 패럴렉스 스크롤링 플러그인 2017/03/31 0
103 [기초활용] 비밀글 jQuery style 찾기 2017/03/31 0

해시태그 디렉터리