How to Build Simple Jquery Image Slider With Sliding or Opacity Effect

How to build simple jQuery image slider with sliding or opacity effect?

Before inspecting examples, you should know two jQuery functions which i used most.

index() returns value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

eq() selects of an element based on its position (index value).

Basicly i take selected trigger element's index value and match this value on images with eq method.

- FadeIn / FadeOut effect.

- Sliding effect.

- alternate Mousewheel response.

---

​html sample:

<ul class="images">
   <li>
      <img src="images/1.jpg" alt="1" />
   </li>
   <li>
      <img src="images/2.jpg" alt="2" />
   </li>
   ...
</ul>

<ul class="triggers">
   <li>1</li>
   <li>2</li>
   ...
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>

---

OPACITY EFFECT: jsFiddle.

css trick: overlapping images with position:absolute

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');
}

---

SLIDING EFFECT: jsFiddle.

css trick: with double wrapper and use child as mask

.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden;  }
    ul.images { position:relative; top:0px;left:0px; }
    /* this width must be total of the images, it comes from jquery */
        ul.images li { float:left; }

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');
}

---

Common jQuery response for both slider:

( triggers + next/prev click and timing )

triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}

---

create image slider like youtube channel

Yes, it's called an image slider.
Where do you want to use it? If you want to create your own, this question might help you: How to build simple jQuery image slider with sliding or opacity effect?

Have a look at this page for a multi-image-at-once slider implementation: http://bxslider.com/examples/carousel-demystified

Have a look at this website for a showcase of the different types of sliders available: http://www.jssor.com/

Changing img opacity with the use of css class in slider

It is a problem of specifity. img_selected has lower specifity than .slider-photos img so the opacity of the later is the "winner".

You can solve that adding important in the selected property:

.img_selected {
    z-index:+11;
    opacity: 1 !important;

This is a non-popular way of solving it, I know, but it is the faster and easy one.
The more accepted way would be to set a more specific selector, as

.slider-photos img.img_selected {
    opacity: 1;

updated fiddle

---

Related Topics