CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

프리랜서 커뮤니티

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' 


추천한 사람

 
댓글은 로그인 사용자만 작성 가능합니다. 로그인하기