Easing Slider
Easing Slider is a jQuery plugin that allows create image slider with smooth animation and add description into each slider with a different effects and interactive features.
Additionally, Easing Slider also has fix & responsive design.
Easing Slider is a easy to customize with many options. Create Easing Slider with HTML, CSS And jQuery.
Please read this documentation carefully before start.
If you have any confucius in understand documentation then please Contact me.
Features
- Fix & responsive layout
- Add description for each slide with different effect.
- Compatible with all major browsers
- Animated text and image effect and adjustable animation speed
- Customizable image size &pPosition
- Easily customizable html & css
- Free support & Complete documentation
- Randomize animation
Customisation
This is jQuery Plugin Customize Code[Parameters]. Change this code as per requirement.
jQuery(document).ready(function() {
$('.tnslider').TNSlider({
'main_image_width' : 950,
'main_image_height' : 500,
'main_image_position' : 'left', /*-----Other Option : 'Right'-----*/
'animation_speed' : 500,
'responsive' : [false, '95'],
'texteffect' : 'Back', /*-----Other Option : 'Elastic', 'Bounce'-----*/
'randomize' : [true, 'fast'] /*-----Other Option : 'Slow', 'Medium'-----*/
});
});
main_image_width
- Set full-size image width of the slide
- Thumb image width & height is auto set as per main image size
- example: if slider width is '1000px' & main_image_width is '950px' then small image width auto set as '50px'.
- Default main_image_width value is 950. it means '950px'
- Note: This option work only for fix width slider. no need to set main_image_width for responsive slider. If you want to change responsive slider main image width then go to this option
{ 'responsive': [true, '95'] }
main_image_height
- Set full-size image height of the slide
- Default main_image_height value is 500. it means '500px'
main_image_position
- Set main images box position 'left' or 'right'.
- Default position is 'left'. you can change 'left' with 'right'.
- Example : If you set 'right' option then main image display in right side and thumb image display in left side.
animation_speed
- Set animation speed.
- Default value is 500. Increase this value for slow animation or decrease this value for fast animation.
responsive
- If responsive value is true then slider width set as '100%'
- If value is [true, '95'] then slider become responsive and value is [false, '95'] then slider become fix.
- Example: [true, '95'], true mens responsive slider and '95' means main image widge is '95%' and thub image width is '5%'.
texteffect
- Change text effect as per your choice.
- Default value is 'Back'
- Other value is 'Elastic' & 'Bounce'
randomize
- Control auto slide by using this parameter.
- Default value is [true, 'slow']
Note: You can replace 'slow' with 'fast' or 'medium'.
Instruction
- When mouse over on thumb images then you can show midium size image nearest current small image. if you want to change midium size image box position then you can edit CSS.
if you want to hide midium size image then add 'display:none' property.
- If this jQuery plugin code conflict with any other jQuery code then change below line.
$(document).ready(function()
Replace this line with
jQuery(document).ready(function()
jquery.animation.js
(function($) {
$.fn.TNSlider = function(options) {
Replace this line with
(function(jQuery) {
jQuery.fn.TNSlider = function(options) {
- I used google webfont api font family is 'Courgette'
You can change font style as per your choice if you dont want to use google webfont then delete related CSS from <head> section & edit CSS.
Source & Credits
Thank you so much to
