How to Build Simple jQuery Image Sliders with Fade or Slide Effects?

How to Create Simple jQuery Image Sliders with Sliding or Opacity Effects

Many developers prefer to avoid using pre-built plugins due to concerns about size or potential conflicts with existing JavaScript. For those who prefer to create their own sliders, here's a simplified approach using jQuery:

Key jQuery Functions:

• index(): Returns the position of an element within its sibling elements.
• eq(): Selects an element based on its position.

Approach:

• Retrieve the index of the selected trigger element.
• Match this index with the corresponding image using the eq() method.

1. FadeIn / FadeOut Effect

HTML:

...

...

CSS:

ul.images { position:relative; }
ul.images li { position:absolute; }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(300).eq(target).fadeIn(300);
    triggers.removeClass('active').eq(target).addClass('active');
}

2. Sliding Effect

HTML:

Same as for the FadeIn/FadeOut effect.

CSS:

.mask { ... }
ul.images { ... }
ul.images li { ... }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var mask = $('.mask ul.images');
var imgWidth = images.width();

triggers.first().addClass('active');
mask.css('width', imgWidth*(lastElem+1) +'px');

function sliderResponse(target) {
    mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);
    triggers.removeClass('active').eq(target).addClass('active');
}

Shared jQuery Response for Both Sliders:

triggers.click(function() { ... });
$('.next').click(function() { ... });
$('.prev').click(function() { ... });
function sliderTiming() { ... }
function resetTiming() { ... }

The above is the detailed content of How to Build Simple jQuery Image Sliders with Fade or Slide Effects?. For more information, please follow other related articles on the PHP Chinese website!