Question

am using image slideshow in my site i wanna add transition to the slider anyone help me please…
The slider is same as shown here:
http://yellowandred.in/PGP%20Enterprise/index.php

Answer 1

you can use jquery http://jquery.com/

Your HTML codes :

<!-- styling the height and width is important for some transitions -->
<div id="slideshow" style="width: 400px; height: 200px">
  <img src="../img/one.jpg"> <!-- can use any element you want, not just images -->
  <img src="../img/two.jpg">
  <img src="../img/three.jpg">
  <img src="../img/four.jpg">
  <img src="../img/five.jpg">
</div>

Your Java Script:

var $el = $('#slideshow');
$el.slideshow({
  duration: 400,
  delay: 3000,
  selector: '> img',
  transition: 'push(up)',
  autoPlay: true,
  show: function (params){
    var nextIndex = params.next.index;
    if (nextIndex > 2) {
      // do something awesome when the slide is after the third slide.
    }
  },
  complete: function (params){
    // do something awesome when a transition finishes
  }
});

// get the slideshow object if you want it
var slideshow = $el.data('slideshow');

// show the third slide
$el.slideshow( 'show', 2 ); // Element API
slideshow.show(2); // object API

// show the next slide
slideshow.show('next');

// pause and play
slideshow.stop();
slideshow.play();

Custom Transitions:

jQuery.rf.slideshow.defineTransition('slide', function (params, dir, ease){
  var animation = {},
      prop = (dir == 'left' || dir == 'right') ? 'left' : 'top';
  animation[prop] = (dir == 'left' || dir == 'up') ? '-100%' : '100%';
  params.previous.animate(animation, params.duration, ease);
});

you can create your own transition too 😉