blog.web68.vn

OUR SPONSORS

Nex - một jQuery slider toàn màn hình hoàn hảo


GIỚI THIỆU

Mình đã giới thiệu rất nhiều các slider hay và miễn phí cho các bạn ở các bài viết trước. Trong bài viết này, mình giới thiệu các bạn một slider mới được trình làng, đó là Nex Slider, mình chắc chắn các bạn sẽ rất ấn tượng với slider toàn màn hình này từ cái nhìn đầu tiên.

Nex slider hoạt động rất nhanh nhờ được tối ưu hóa và tương thích với hầu hết các trình duyệt hiện nay.

nex - free fullscreen slider

TÍNH NĂNG

  • Tùy biến hiển thị slide
  • Tối ưu hóa tốc độ hiển thị
  • Hỗ trợ thao tác chạm
  • Hỗ trợ bàn phím
  • Hỗ trợ pattern
  • Thân thiện với SEO
  • 10 hiệu ứng: Fade, Slide [left,right,top,bottom], Zoom, Skew, Rotate, Random, None
  • 5 gam màu được định nghĩa sẵn: tím thạch anh, đỏ san hô, vàng, ngọc lam, và màu mặc định
  • Hỗ trợ bộ lọc hình ảnh: brightness,contrast,grayscale,hue-rotate,saturate,sepia.
  • Hỗ trợ nhiều loại nội dung: hình ảnh, video, bản đồ
  • Tùy biến kiểu bản đồ: ROADMAP, SATELLITE, HYBRID, TERRAIN
  • Tủy biến bản đồ: kích cỡ zoom, cửa sổ hiển thị thông tin 
  • Hỗ trợ video từ vimeo và youtube
  • 2 kiểu thumbnail: hình tròn và hình vuông
  • Tương thích nhiều trình duyệt: Firefox, Chrome, Safari, IE9-IE11

HƯỚNG DẪN SỬ DỤNG

1. Thêm CSS,JS

<link rel='stylesheet' href='https://cdn.rawgit.com/RiseLedger/Nex/master/css/nex.min.css'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/RiseLedger/Nex/master/js/Animo.min.js'></script>
<script src='https://cdn.rawgit.com/RiseLedger/Nex/master/js/nex.min.js'></script>

2. Tạo slides trong javascript, với "link" là đường dẫn đến file ảnh gốc, và "thumb" là đường dẫn đến file ảnh nhỏ để tạo thumbnail

<script type="text/javascript">
    var slides = [
        {
            link        : "http://path/to/fullscreen/image/1.png",
            thumb       : "http://path/to/thumb/image/1.png"
        },

        {
            link        : "http://path/to/fullscreen/image/2.png",
            thumb       : "http://path/to/thumb/image/2.png"
        },

        {
            link        : "http://path/to/fullscreen/image/3.png",
            thumb       : "http://path/to/thumb/image/3.png"
        }
    ];
</script>

3. Chạy slide

<script type="text/javascript">
    new Nex({data: slides});
</script>

DEMO

 

See the Pen nex - fullscreen slider by Thanh Nguyen (@genievn) on CodePen.

TÙY BIẾN

Thuộc tính Giá trị mặc định Mô tả
transition random Hiệu ứng chuyển động: 
none
 
fade
 
slideLeft
 
slideRight
 
slideTop
 
slideBottom
 
zoom
 
rotate
 
skew
 
random
transition_speed 600 Tốc độ chuyển ảnh (mili giây)
delay 7000 Thời gian dừng mỗi slide
autoplay true Tự động chạy hay không
thumbnails true Hiển thị thumbnail hay không
bullets true Có hiển thị dấu chấm dưới slider hay không.
bar true Có hiển thị thanh thumbnail không
load_bar true Có hiển thị thanh load không
style object Kiểu hiển thị, là một đối tượng bao gồm các thuộc tính sau
 
type circle Tùy biến thumbnail và dấu chấm dưới slider.  
circle (hình tròn)
  hoặc
square (hình vuông)
filter none Bộ lọc hình ảnh, tùy trình duyệt hỗ trợ hay không: 
none
 
grayscale
 
sepia
 
hue-rotate
 
brightness
 
contrast
 
saturate
pattern none Đường dẫn đến pattern.
background #ede8d2 Màu nền
hover #aac83f Màu khi chuột di qua
color #000 Màu chữ
data object Lưu dữ liệu ảnh của slider: 
 
display image Kiểu slide: 
image (ảnh)
 
map (bản đồ)
 
video (video)
title none Tiêu đề slide
description none Mô tả slide
thumb none Đường dẫn đến ảnh thumbnail
link none Đường dẫn đến ảnh gốc
alt none Thông tin thay thế (alt) ảnh
url none Đường dẫn video
marker none Hiển thị đánh dấu trên bản đồ hay không
infowindow none Nội dung HTML khi click lên bản đồ
zoom 12 Độ phóng của bản đồ
type ROADMAP Kiểu bản đồ: 
HYBRID
 
ROADMAP
 
SATELLITE
 
TERRAIN
lat none Vĩ độ
lng none Kinh độ

Tags
slider  slideshow  jquery  toàn-màn-hình  bản-đồ  video  
comments powered by Disqus