Hướng dẫn tạo Slider show jQuery

DIM GROUP 01/04/2014 Javascript 51 Views Comments

Slider show là hiệu ứng rất quạn trọng trongthiết kế website. Sau đây DIM xin hướng dẫn các bạn tạo Slider show sử dụng Jquery.  Việc thực hiện Nivo Slider jQuery plugin khá đơn giản. Bạn chỉ cần đoạn code sau vào tag trong website của bạn

Slider show là hiệu ứng rất quạn trọng trong thiết kế website. Sau đây DIM GROUP xin hướng dẫn các bạn tạo Slider show sử dụng Jquery. 
 browser-jquery
Việc thực hiện Nivo Slider jQuery plugin khá đơn giản. Bạn chỉ cần đoạn code sau vào trong website của bạn ở trong thẻ head
 

<link rel="stylesheet" href="https://api.dim.vn/css/nivo-slider.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript">
</script> <script src="https://api.dim.vn/ajax/jquery/jquery.nivo.slider.pack.js" type="text/javascript"></script>



Tạo slideshows
Mã HTML cho Nivo Slider cũng rất đơn giản. Ban chỉ cần tạo một DIV với id là #slider, sau đó thêm đường dẫn hình ảnh vào

 
<div id="slider" class="nivoSlider"> <img src="images/slide1.jpg" alt="" /> <a href="http://dim.vn">
<img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" /> </div> <div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

Phần cấu hình javascript, chèn trong thẻ body

$(window).load(function() { $('#slider').nivoSlider(); }); 

Đây là những thiết lập của NIvo Slider, bạn có thể tuỳ ý chỉnh sửa theo ý thích của mình

$('#slider').nivoSlider({ effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box
animations animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded });

jquery-slider

Chúc các bạn một ngày vui vẻ !

 
bg8

Bình luận

Hướng dẫn tạo Slider show jQuery
SEO là gì - Lợi ích của SEO

SEO là gì - Lợi ích của SEO

Khi người dùng internet gõ một từ khóa tìm kiếm trên công cụ tìm kiếm như Google, Bing, Yahoo…thì kết quả trả về sẽ là một bảng danh sách các trang web có chứa nội dung mà người dùng muốn tìm kiếm...

01/04/2014

Thiết kế website tại Bắc Ninh

Thiết kế website tại Bắc Ninh

Trong thời đại số hiện này, các doanh nghiệp tại Bắc Ninh đã và đang tận dụng rất tốt Internet để giới thiệu và quảng bá về doanh nghiệp của mình. Với sự phát triển mạnh mẽ của truyền thông mạng,...

01/04/2014

Nguyên tắc thiết kế Website

Nguyên tắc thiết kế Website

Ngày nay, quá trình thương mại điện tử đang phát triển một cách mạnh mẽ. Website đóng một vai trò quan trọng trong công cuộc phát triển đó.  Việc xây dựng một website là điều tất yếu song để phát...

01/04/2014

Xây dựng một website hoàn hảo như thế nào?

Xây dựng một website hoàn hảo như thế nào?

Website của doanh nghiệp bạn được xây dựng với chất lượng tốt, được nhiều người biết đến và truy cập, nhưng làm thế nào để biến những khách hàng này thành những người mua hàng tiềm năng

01/04/2014

Hướng dẫn tạo thư viện trình chiếu ảnh tuyệt đẹp bằng Jquery

Hướng dẫn tạo thư viện trình chiếu ảnh tuyệt đẹp bằng Jquery

Với ứng dụng công nghệ Js hiện nay, chúng ta có thể làm được nhiều thứ từ nó, để thay thế công nghệ dùng flash như trước kia, mà tối ưu website đạt hiệu quả cao, tốc độ nhanh.DIM Group sẽ hướng...

01/04/2014

Thiết kế website đồ điện tử, điện lạnh

Thiết kế website đồ điện tử, điện lạnh

Thiết kế website đồ điện tử âm thanh không chỉ đem đến một cửa hàng ảo với chi phí hợp lý mà còn mở ra cơ hội tiếp cận đến với nhiều khách hàng tiềm năng.

11/02/2017

Thiết kế website kinh doanh thực phẩm sạch - tạo niềm tin người dùng

Thiết kế website kinh doanh thực phẩm sạch - tạo niềm tin người dùng

Thực phẩm sạch hiện đang là mặt hàng bán đắt như “Tôm tươi” tại thị trường Việt Nam, khi mà các loại nông sản, thực phẩm bẩn, nhiễm chất độc hại ảnh hưởng đến sức khỏe người tiêu dùng đang dần bị...

09/02/2017

Thiết kế website thủ công mỹ nghệ - con đường xây dựng thương hiệu

Thiết kế website thủ công mỹ nghệ - con đường xây dựng thương hiệu

Sản phẩm thủ công mỹ nghệ là mặt hàng có truyền thống lâu đời ở Việt Nam, gắn với nền văn hóa lúa nước dân tộc. Sự phát triển của ngành thủ công mỹ nghệ đã đóng góp đáng kể vào sự phát triển chung...

07/02/2017

Thiết kế website kinh doanh đồ handmade

Thiết kế website kinh doanh đồ handmade

Với sự phát triển của công nghệ và mạng internet trên toàn cầu thì bên cạnh cửa hàng truyền thống, hoạt động kinh doanh đồ handmade online thông qua website, các trang rao vặt, mạng xã hội,… đã...

07/02/2017

Thiết kế website giáo dục, đào tạo, trường học - nơi tiếp nhận nhiều học viên tiềm năng

Thiết kế website giáo dục, đào tạo, trường học - nơi tiếp nhận nhiều học viên tiềm năng

Thiết kế website giáo dục không chỉ mở ra chân trời mới, năng động hơn, hiện đại hơn cho các cơ sở đào tạo, dạy nghề,..mà còn tăng khả năng tiếp cận và lan tỏa thương hiệu đến học viên.

07/02/2017

Thuật ngữ Seo thông dụng

Thuật ngữ Seo thông dụng

Dim Group xin tổng hợp và gửi đến bạn đọc một số thuật ngữ SEO thông dụng và được  các Seoer nhắc đến nhiều nhất.

01/04/2014

Thiết kế website tại Thạch thất - Hà Nội

Thiết kế website tại Thạch thất - Hà Nội

Thiết kế một website chuyên nghiệp giúp nâng cao hình ảnh thương hiệu của doanh nghiệp Hà Nội trong mắt đối tác và khách hàng.

01/04/2014

Thiết kế website tại Sơn tây - Hà Nội

Thiết kế website tại Sơn tây - Hà Nội

Để có thể tham gia vào thi trường thương mại điện tử, doanh nghiệp cần đến dịch vụ thiêt kế websitechuyên nghiệp. Với kinh nghiệm nhiều năm trong lĩnh vực thiết kế website, dịch vụ SEO, DIM Group...

01/04/2014

Thiết kế Website tại Sơn Động - Bắc Giang

Thiết kế Website tại Sơn Động - Bắc Giang

Để bắt kịp với xu thế thời đại, bất kỳ doanh nghiệp hay tổ chức nào cũng đều cần phải có 1 Website đại diện, thâm chí nhiều doanh nghiệp còn đầu tư thêm các hình thức quảng bá Website để tìm kiếm...

01/04/2014

Thiết kế website tại Thanh Miện - Hải Dương

Thiết kế website tại Thanh Miện - Hải Dương

Công nghệ thông tin đang phát triển, nền kinh tế của Việt Nam cũng đang rất phát triển, hiện tại có rất nhiều doanh nghiệp đang phát triển mạnh mẽ

01/04/2014

MÃ GIẢM GIÁ

Facebook