Slide có thể chuyển ảnh qua lại bằng chuột ver 1

Ngày hôm qua có một anh bạn nhờ mình làm slide cho website và mình đã tìm hiểu và biết được một số mẫu khá đẹp. Vì thế mình sẽ dần chia sẻ với độc giả của Troll VL. Tuy rằng có nhiều JS chắc chắn sẽ phần nào ảnh hưởng đến tốc độ load của trang web nhưng mình nghĩ rằng với internet hiện nay chắc cũng không thành vấn đề đâu. Các bạn xem demo ngay bên dưới bài viết này

Sa mạc đỏ :D

Sa mạc vàng =))

Thêm đoạn JS sau vào template

<script src='https://googledrive.com/host/0Bz_65BAr9KCZcWxsOGlLMXU3RU0' type='text/javascript'></script>
<script src='https://googledrive.com/host/0Bz_65BAr9KCZajZHY1ZnYzhrTFk/' type='text/javascript'></script>
<script src='https://googledrive.com/host/0Bz_65BAr9KCZZDNsZlFfNHYwa0E/' type='text/javascript'></script>
    <script>
        jssor_slider1_starter = function (containerId) {
            var _CaptionTransitions = [];
            //Left to Right
            _CaptionTransitions["L"] = { $Duration: 800, $FlyDirection: 1 };
            //Right to Left
            _CaptionTransitions["R"] = { $Duration: 800, $FlyDirection: 2 };
            //Top to Bottom
            _CaptionTransitions["T"] = { $Duration: 800, $FlyDirection: 4 };
            //Bottom to Top
            _CaptionTransitions["B"] = { $Duration: 800, $FlyDirection: 8 };
            //Reference http://www.jssor.com/development/caption-transition-viewer.html
            var options = {
                $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
                $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
                $CaptionSliderOptions: {                            //[Optional] Options which specifies how to animate caption
                    $Class: $JssorCaptionSlider$,                   //[Required] Class to create instance to animate caption
                    $CaptionTransitions: _CaptionTransitions,       //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
                    $PlayInMode: 1,                                 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
                    $PlayOutMode: 3                                 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
                }
            };
            var jssor_slider1 = new $JssorSlider$(containerId, options);
        }
    </script>

Thêm đoạn code chứa slide vào vị trí bạn muốn hiển thị trên website

<div id="slider1_container" style="position: relative; width: 600px; height: 300px;">
   
        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
            <div style="position: absolute; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6InEo8xxZrstPnFZXYayacwOqWyj03w0dv-VsDASJaehSjmoM3YjiEA8OtDCVNMalC_LQSO7SQW2ifRmwPD2AbSf-0UPkx6qB_iFf1pG6q4MNdUxD8AnVr_8YN_D84G5ovNwmQ_eJnlAu/s1600/loading.gif) no-repeat center center;
                top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
        </div>

        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width:600px; height:300px; overflow: hidden;">
            <div><img u="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaBLyfaaL-xe8M_IF2BFg1KcxgQeWwkj4OtU_qW0JAisTDWCpJduMRgSFF1UyUIBqK-i9y3TS0dJmJHBsQoLgCkcwsbjq6XSnpYK6yvHrhY4UO6v8cIxrdvRy3-so8MzgSEWtX-hJpisk_/s1600/01.jpg" /></div>
            <div><a u=image href="
http://www.trollvl.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jc339pwTVDJvZmMukKTrZ9FaBd3EeCDBazYtpY03UKYH21knTefwMY4IU4DUNBwpUNmU__lZ2V9qmBM4GsYndnvlBZVnzbcSxCWghZcTEBHsgYZOFJnax4MijSagYcesiLv8f05k5QxA/s1600/02.jpg"/></a></div>
            <div><img u="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicBZHO88xE4cHtuevAQjbI3BG6jb7inIDRqrvEHKndD0-2-cn64WABpjaPdLv1BEJALwc479Cu90rNl9ny1reKmhD1p3q4ppg8QmLggrMb2HwSj5lN5wG7dd9roWhedMRKBIEpfNWWEqTP/s1600/03.jpg"/>
               <div style="position: absolute; top: 125px; left: 125px; width: 350px; height: 50px;text-align:center;line-height:50px;background:#fff;">
                            This is static content, can be any html
                </div>
            </div>
            <div><img u="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwe9MWa17TuYmet7RyUNRP0z_7blBEonezxJxYUws9L8V02rcPIC5K8mBJ1ZMEDnsVHqr7zFAMCB2dfcW4Lp0n_sTCzhYqg6N-Mw5a6VWLZqh2PRg6JgNwtWFRFxtamqhWgIK-Vm4gLZ5A/s1600/04.jpg"/>
                <div u="caption" t="T" style="position: absolute; top: 125px; left: 125px; width: 350px;height: 50px;text-align:center;line-height:50px;background:#fff;">
                            This is caption, can be any html
                </div>
            </div>
        </div>
        <!-- Trigger -->
        <script>
            jssor_slider1_starter('slider1_container');
        </script>
    </div>

Nguồn http://www.jssor.com