Question

Can someone recommend me some jQuery plugin, for the rotating this HTML structure.

<div id="event_rotator">
 <div class="event">
 <h2>Title</h2>
 <p>Text</p>
 </div>
 <div class="event">
 <h2>Title</h2>
 <p>Text</p>
 </div>
 <div class="event">
 <h2>Title</h2>
 <p>Text</p>
 </div>
</div>

I would like, that it would rotate the automatically in the certain time period, when the user is on the page, and also that user can rotate it left and right with a click on an arrow.

I tried to use this http://jquery.malsup.com/cycle/pager11.html , but I cannot get it to work.

The problem is, that I get this HTML dynamically, out of a PHP code.. I don’t know, how to assign the needed css (I can assign that which is the same for all, but I cannot assign different Z-index.

Answer 1

I created this in 10 min, so it’s not a designer’s gallery, but this one has all you need to use and LEARN how to create your self a slide gallery with left/right buttons, auto-rotate and hover/pause.

The HTML,CSS,JS code is really simple so take a look:

http://jsbin.com/ofukaq/8/edit

HTML:

<div id="event_rotator">

  <button id="left">left</button>
  <button id="right">right</button>  

  <div id="slider">
   
     <div class="event">
     <h2>Title1</h2>
     <p>Text1</p>
     </div>
     <div class="event">
     <h2>Title2</h2>
     <p>Text2</p>
     </div>
     <div class="event">
     <h2>Title3</h2>
     <p>Text3</p>
     </div>
   
  </div>
  
</div>

CSS:

#event_rotator{
  width:300px;
  height:150px;
  position:relative;
  overflow:hidden;
}
#slider{
  position:absolute;
  height:150px;
  left:0; 
  width:99999px;
}
.event{
  float:left;
  width:300px;
  height:150px;
  background:#eee;
}

and finally jQuery:

$(function(){

var W = $('#event_rotator').width();      // Gallery Width
var N = $('#slider .event').length;    // Number of elements
var C = 0;                          // Counter
var intv;                         // Auto anim. Interval


if(N<=1){ 
  $('#left, #right').hide();  // hide buttons only 1 element
}  


$('#slider').width( W*N );          // Set slider width

$('#left, #right').click(function(){
  // Animation logic
  if(this.id=='right'){
    
    C++;
    C = C % N;     // reset to '0' if end reached
    
  }else{ // left was clicked
    
    C--;
    if(C===-1){   // IF C turns -1 scroll to last one (N-1)
      C = N-1; 
    }
    
  }
  // Animation
  $('#slider').stop().animate({left: -C*W }, 1000 );
});


// auto rotate

function autoRotate(){
  intv = setInterval(function(){
      $('#right').click();
  },2000); // pause time
}
autoRotate(); // start auto rotate

// pause hover

$('#event_rotator').on('mouseenter mouseleave', function( e ){
   var mEnt = e.type=='mouseenter';
  if(mEnt){
     clearInterval(intv);
  }else{
     autoRotate();
  }
});

}); // * end document ready.

Hope I opened your eyes that sometimes you don’t need a 3000 lines plugin to build a nice gallery with all the functionality you need.

---

Here is with a bit compressed jQuery script using Ternary operators:

jsBin demo

var W = $('#event_rotator').width(),
    N = $('#slider .event').length,
    C = 0,
    intv;

if(N<=1)$('#left, #right').hide(); 
$('#slider').width( W*N );

$('#left, #right').click(function(){
     C = (this.id=='right'? ++C : --C) < 0 ? N-1 : C%N ;
     $('#slider').stop().animate({left: -C*W }, 700 );
});

function auto(){
  intv = setInterval(function(){
      $('#right').click();
  }, 3000 );
}
auto();

$('#event_rotator').hover(function( e ){
  return e.type=='mouseenter' ? clearInterval(intv) : auto();
});