Tạo Slider trình chiếu ảnh dạng cuộn camera cho blog

chào các bạn dã đến với blog cnit bài viết hôm nay mình xin chia sẻ cho các bạn tạo một silder trình chiếu ảnh tuyệt đẹp cho blogger , đối với silder này bạn có thể trình chiếu giới thiệu sản phẩm , trình chiếu xem hình ảnh cho sản phẩm mà bạn đăng bán sẽ tăng thêm tính chuyên nghiệp cho trang web của bạn và giúp trải nghiệm khách hàng vô cùng mới mẻ và bắt mắt vậy làm sao để được như vậy thì mình mời các bạn tham khảo bài viết sau đây để làm như thế nào cho mình một silder tuyệt vời này nhé.

hình minh họa

HƯỚNG DẪN

các bạn copy đoạn code bên dưới chèn vào nơi mà bạn muốn chúng hiển thị trên blog của bạn nhé .

<!--  Camera_Slideshow Styles  -->
<link href="http://project.dimpost.com/camera-slideshow/css/camera.css" id="camera-css" media="all" rel="stylesheet" type="text/css"></link>
<!-- Camera Slideshow Scripts -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/camera-slideshow/scripts/camera.min.js" type="text/javascript"></script>

<style type="text/css">
.fluid_container {
    margin: 0 auto;
    /* aling centered */
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}


/* Blogger CSS Conflict Fix */

.camera_pag_ul {
    border: none !important;
    background: none !important;
}

.camera_pag_ul li {
    float: inherit !important;
    padding: inherit !important;
}

.camera_pag_ul {
    margin: 0 !important;
    border: 0 !important;
}


/* jika slider lebih dari 1 maka display:none aja, jika tidak effect loading atas kanan akan error */
.camera_pie{display:none;}
</style>


<!-- camera_slideshow camera_wrap-->
<div class="fluid_container">
<script type="text/javascript">
jQuery(function() {
    jQuery('#camera_wrap_1').camera({
        time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one
        transPeriod: 1200, // length of the sliding effect in milliseconds
        thumbnails: true, // thumnails & tooltip is controlled by it
        pagination: false, // only when "pagination" is set to "false" thumbnails will be visible
        fx: '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', // transition effects
        hover: false, // Pause on hover
        height: '50%' // slideshow height (50% is default)
    });
});
</script>
<div class="camera_wrap" id="camera_wrap_1">
<div data-link="https://www.blogcnit.info/p/blog-page.html" data-src="http://project.dimpost.com/camera-slideshow/images/slides/1.jpg" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg">
<div class="camera_caption fadeFromBottom">
Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em></div>
</div>
<div data-link="https://www.blogcnit.info/p/blog-page.html" data-src="http://project.dimpost.com/camera-slideshow/images/slides/2.jpg" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg">
<div class="camera_caption fadeFromBottom">
It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em></div>
</div>
<div data-link="https://www.blogcnit.info/p/blog-page.html" data-src="http://project.dimpost.com/camera-slideshow/images/slides/3.jpg" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg">
<div class="camera_caption fadeFromBottom">
<em>It's completely free</em> (even though a donation is appreciated)</div>
</div>
<div data-link="https://www.blogcnit.info/p/blog-page.html" data-src="http://project.dimpost.com/camera-slideshow/images/slides/4.jpg" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg">
<div class="camera_caption fadeFromBottom">
Camera slideshow provides many options <em>to customize your project</em> as more as possible</div>
</div>
<div data-link="https://www.blogcnit.info/p/blog-page.html" data-src="http://project.dimpost.com/camera-slideshow/images/slides/5.jpg" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg">
<div class="camera_caption fadeFromBottom">
It supports captions, HTML elements and videos.</div>
</div>
</div>

</div>
<!-- .fluid_container -->

tùy chỉnh

các bạn thay url : https://www.blogcnit.info/p/blog-page.html thành link đến cho mỗi hình ảnh.
các bạn thay ảnh thu nhỏ side ( 100*50 ) và ảnh trình chiếu ( 900*450 )và thưởng thức thôi

Xem Trước

lời kết

chúc các bạn thành công nhé , nếu thấy hay đừng quên chia sẻ ủng hộ blog cnit ngày càng phát triển thêm nhé , thank you soucre code : http://project.dimpost.com

DESIGN 5S