Camera Slider jquery

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'