0

I have made a slideshow by addClass and removeClass, but there are no effects for slider. So I want to add some effects on the method addClass and removeClass.

$('#button-next').on('click', function () {
    $('#big img').css({
        'display': 'none'
    });

    var currentActiveImage = $('.image-shown');
    var nextActiveImage = currentActiveImage.next();

    if (nextActiveImage.length == 0) {
        nextActiveImage = $('.carousel-inner img').first();
    }

    currentActiveImage.removeClass('image-shown').addClass('image-hidden').css({
        'z-index': '-10'
    });
    nextActiveImage.addClass('image-shown').removeClass('image-hidden').css({
        'z-index': '2000'
    });
    $('.carousel-inner img').not([currentActiveImage, nextActiveImage]).css('z-index', 1);
    e.preventDefault()
});

$('#button-prev').on('click', function () {
    var currentActiveImage = $('.image-shown');
    var nextActiveImage = currentActiveImage.prev();
    if (nextActiveImage.length == 0) {
        nextActiveImage = $('.carousel-inner img').last();
    }
    currentActiveImage.removeClass('image-shown').addClass('image-hidden').css({
        'z-index': '-10'
    });
    nextActiveImage.addClass('image-shown').removeClass('image-hidden').css({
        'z-index': '2000'
    });
    $('.carousel-inner img').not([currentActiveImage, nextActiveImage]).css('z-index', 1);
    e.preventDefault()
});
2
  • Can you give a JSFiddle link?
    – Onovar
    Commented Aug 5, 2014 at 12:00
  • Are you trying to add effects using addClass and removeClass of jQueryUI? Did you import it? Commented Aug 5, 2014 at 12:10

3 Answers 3

0

You can use CSS3 animation features.

CSS3 animations

1
  • If you post an answer, please explain thoroughly, ideally with some code and an example. Do NOT just post a link.
    – soktinpk
    Commented Aug 5, 2014 at 12:30
0

I recommend you to use CSS transitions.

Add opacity: 0; CSS property to .image-hidden class and make sure that .image-hidden don't have display: none;.

Do similiar to .image-shown.

Then add transitions to .image-shown and .image-hidden

.image-shown { 
    /* ... */
    opacity: 1;
}

.image-hidden {
    /* ... */
    opacity: 0;
}

.image-shown, .image-hidden {
    -webkit-transition: opacity .5s linear 0s; /* For Safari 3.1 to 6.0 */
    transition: opacity .5s linear 0s;
}

JSfiddle

0

Perhaps you are looking for css animation features. For example, add/change your css to:

.carousel-inner {
    /* We keep it position relative */
    position: relative;
    /* Change or remove these if you want */
    height: 30px;
    padding: 20px;
    width: 100px;
    border: 1px dashed;
}
.carousel-inner img {
    /* So that they go on top of each other */
    position: absolute;
    /* Transitions; we animate the opacity, but you can animate whatever you want */
    -webkit-transition: opacity 5s ease; /* 5 seconds */
    -moz-transition: opacity 5s ease;
    -ms-transition: opacity 5s ease;
    -o-transition: opacity 5s ease;
    transition: opacity 5s ease;
}
/* This is just for you, to tell the difference between the images (not necessary) */
img:nth-child(1) {
    background-color: white;
}
img:nth-child(3) {
    background-color: green;
}
.image-shown {
    /* Change this from
    display: block;
    to: */
    opacity: 1;
}
.image-hidden {
    /* Change this from
    display: none;
    to: */
    opacity: 0;
}

http://jsfiddle.net/mb9b6/

Notice how the image fades in to the next one. No changes are needed to the script, but if you make it position: relative for carousel-inner and position: absolute for the images, then you can remove the stuff with z-index as it would no longer be necessary. Only one image will be shown at a time anyway.

Note that this will only work in modern browsers. If you need to support older browsers, use jQuery's fade methods like so:

$('#button-next').on('click', function(){
  $('#big').css({'display':'none'});

  var currentActiveImage = $('.image-shown');
  var nextActiveImage = currentActiveImage.next();

  if (nextActiveImage.length == 0) {
    nextActiveImage = $('.carousel-inner img').first();
  }

  currentActiveImage.removeClass('image-shown').addClass('image-hidden').fadeOut();
  nextActiveImage.addClass('image-shown').removeClass('image-hidden').fadeIn();
  e.preventDefault()    
});

If you do that, then remove all css for image-shown and image-hidden; they become simple marker classes. Do similarly for the prev button.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.