HIỆU ỨNG
COVERFLOW 3D

Main Slider

TUỲ BIẾN
THAM SỐ HIỆU ỨNG

Hiệu ứng có các options khác nhau, có thể tuỳ biến để thay đổi kiểu dáng.

{
  "fx": "coverflow3D",
  "coverflow3D": {
    "widthSlide": "70%",
    "zDeep": 600,
    "rotate": 30,
    "opacity": 0.7
  }
}
{
  "fx": "coverflow3D",
  "coverflow3D": {
    "widthSlide": "70%",
    "zDeep": 0,
    "rotate": 0,
    "opacity": 0.25
  }
}
{
  "fx": "coverflow3D",
  "coverflow3D": {
    "widthSlide": "70%",
    "zDeep": 700,
    "rotate": 0,
    "opacity": 0.25
  }
}
{
  "fx": "coverflow3D",
  "coverflow3D": {
    "widthSlide": "70%",
    "zDeep": 400,
    "rotate": -30,
    "opacity": 0.25
  }
}

❖ Giới thiệu

Hiệu ứng Math sẽ tính toán kích thước của hình ảnh để phân chia thành nhiều phần khác nhau theo hình chữ nhật (rectangle) hoặc hình vuông (square).

  • Hiệu ứng hỗ trợ thời gian thực khi bạn đang kéo rê trên slider.
  • RubySlider hiện tại hỗ trợ 8 hiệu ứng Math khác nhau.
  • Bạn có thể chọn chế độ "randomMath" để slider có thể chạy 8 hiệu ứng một cách ngẫu nhiên.
  • Bạn có thể cập nhật hiệu ứng ở phần danh sách sang Slider Main để xem hiệu ứng Math dễ dàng hơn.

❖ Thiết lập slider

Các bạn có thể được hướng dẫn thiết lập slider chi tiết ở trang hướng dẫn này.
Dưới đây là options hiện tại của slider phía trên:

{
  "fx": "coverflow3D",
  "coverflow3D": {
    "widthSlide": [
      940,
      "80%"
    ],
    "opacity": 0.7
  },
  "speed": 800,
  "width": 1140,
  "margin": 10,
  "imageback": {
    "position": "fit"
  }
}