Nivo Slider jQuery

Download: http://dev7studios.com/plugins/nivo-slider
استفاده از تم:
برای این کار باید css مورد نظر لینک کنید و کلاس رو به شکل زیر تغییر بدید

[sourcecode language=’php’]

[/sourcecode]

اضافه کردن thumbnail:
controlNavThumbs برابر true قرار بدید
data-thumb مقدار دهی کنید

[sourcecode language=’php’]

[/sourcecode]

دادن افکت خاص به یک اسلایدر:
data-transition مقدار دهی کنید

[sourcecode language=’php’]

[/sourcecode]

تنظیمات اسلایدر:

[sourcecode language=’php’]
$(‘#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
});
[/sourcecode]

انواع افکت ها

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

RELATED POST

jqury back to top

jQuery(".backtotop").addClass("hidden-top"); jQuery(window).scroll(function () { if (jQuery(this).scrollTop() === 0) { jQuery(".backtotop").addClass("hidden-top") } else { jQuery(".backtotop").removeClass("hidden-top") } }); --------------------------------------------------- .csn_block_user_avatar:hover { transform:…

نمایش محتوای object جاوا اسکریپت در alert

Print content of JavaScript object

ساخت گوگل plusone

اضافه کردن به قالب برای حمایت از ما امتیاز دهید

نمایش متن پیشفرض (راهنما) درون فیلد فرم html