Auto Rotating Image Viewer Plugin - jQuery SliderBox - Silder với hiệu ứng trượt khung

Thảo luận trong 'Jquery' bắt đầu bởi matamune, Thg 10 11, 2017.

  1. matamune

    matamune Gà của Snowbox Staff Member Administrator

    Bài viết:
    1,362
    Đã được thích:
    223
    Nơi ở:
    tp hcm
    [​IMG]

    Cách dùng :
    B1
    Upload SliderBox.css và SliderBox.js lên Host

    B2
    Cấu hình ở <head></head>​
    PHP:
    <link rel="stylesheet" href="SliderBox.css">
    <
    script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="SliderBox.js"></script>
    Phần <script src="SliderBox.js"></script> cần chỉnh lại đường dẫn mà bạn đã upload 2 file ở Bước 1
    B3
    Chép đoạn dưới vào nơi bạn muốn hiện​
    PHP:
    <div id="sliderbox" class="sliderBox">
      <
    div data-image="1.jpg"
           
    data-url="//www.animesb.com"
           
    data-bg-color="#1D459D"
           
    data-title="Title 1"></div>
      <
    div data-image="2.jpg"
           
    data-url="//www.animesb.com"
           
    data-bg-color="#1D459D"
           
    data-title="Title 2"></div>
      <
    div data-image="3.jpg"
           
    data-url="//www.animesb.com"
           
    data-bg-color="#1D459D"
           
    data-title="Title 3"></div>
      ...
    </
    div>
    B4
    Chép script phía dưới code của bước 3 . Done
    PHP:
    <script>$('#sliderbox').SliderBox();</script>
    Ngoài ra còn các chức năng theo script như :
    PHP:
    $('#sliderbox').SliderBox({
      
    lBoxWidth310,
      
    lBoxHeigth310,
      
    BoxWidth150,
      
    BoxHeigth150,
      
    divider10,
      
    time5000,
    });
    Hỗ trợ mobile :
    PHP:
    $('#sliderbox').SliderBox({
      
    onlyDestoptrue
    });

    Demo : Vui lòng đăng nhập hoặc đăng ký để xem đầy đủ nội dung
    Download :
    Vui lòng đăng nhập hoặc đăng ký để xem đầy đủ nội dung
     

Chia sẻ trang này