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
댓글작성칸으로