Make your carousels start seamlessly at a random slide

Posted Aug 30, 2010 // 1 comments

If you’ve implemented a carousel using viewscarousel, you may have wondered how to make the carousel start at a random element. There are several ways to accomplish this.

When you edit the viewscarousel settings on your view display, the interface only allows you to enter a numeric value for the start position. If you don’t enter a value, it defaults to the first position. In order to make the carousel start at a random position, you’ll need to override the setting in a template.

In your views-view—viewname.tpl.php template, you can use drupal_add_js to override or add settings to viewscarousel ( which in turn get passed to the implementation of jcarousel ). In this particular case, you’ll want to add a “start” value to the settings array. You can also use this array to change other values or to add callback functions.

Note: “viewscarousel-viewname-block” is the id of the <ul> element holding the carousel items

1
2

  $start = rand(1,count($view->result)); 
  drupal_add_js(array('viewscarousel' => array('viewscarousel-viewname-block' => array("start" => $start))), 'setting');

After you’ve added this value, you may notice that when the page loads, the carousel shows the first item and then switches to the random start element. If you want the carousel to start at the random element and not display the first item, you’ll need to reorder the items instead.

There are two options here:

• Use a random sort order
• Keep the same slide order, but start at a random element

If you don’t care what order your slides display in, you can add a Global: Random sort to your views display. This will randomize the slides.

If the order of the items does matter, then you’ll need to reorder the items using hook_views_query_alter to start at a random element, and keep the order of the items the same. This is especially useful for carousels that use the “circular” rotation.

In this example, we’ll assume that we have a nodequeue that contains all the elements in the carousel. We first want to find the number of nodes in our queue, and then reorder them.

As an example, we have nodes with nid’s of 10,11,12,13,14,15 in that order in the nodequeue.

When we reorder the nodes, our reordering will result in orders such as 13,14,15,10,11,12 or 15,10,11,12,13,14.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function module_views_query_alter(&$view,&$query) {
  if($view->name == 'VIEW_NAME') {
    $items = db_result(db_query('select count(n.nid) from drupal_node n inner join drupal_nodequeue_nodes nn ON n.nid = nn.nid where nn.sqid = %d',variable_get("carousel_nodequeue_id",0)));
    $start = rand(1,$items);
    
    $orderby = 'case nodequeue_nodes_node_position ';
    for($i=1;$i<$items+1;$i++) {
      $val = $i – $start;
      if($val < 0) { $val = $val + $items + 1; }
      $orderby .= " when ".$i." then ".$val." "; 
    }
    $orderby .= "end";
 
    $query->orderby [0] = $orderby;
  }
}

If you’re not using a nodequeue to determine your carousel items, you can still use this method. You’ll have to adjust the query that finds the number of items to suit your particular needs.