add slug of child(ren) to li using wp_list_pages

Question

For a page template I am trying to include the 3 children of each page. That works fine.

However as I want to include a different image for each of the children, I would like to add the slug of each child to the li on the parent page.

I found something that places the slug of the parent page in the li's:

<?php 
$slug = basename(get_permalink());
wp_list_pages('title_li=&sort_column=menu_order&link_before=<div class="'.$slug.'">&link_after=</div>&child_of='.$post->ID.'');
?>

Obviously not what I want, but at least nice to see that it is possible somehow to add something to the li in order to be able to identify it further with CSS.

I would like the result to be something like:

<ul>
<li class=child1-slug>...</li>
<li class=child2-slug>...</li>
<ul>

OR (as the example above shows)

<ul>
<li><a><div class="child1-slug">...</div></a></li>
<li><a><div class="child2-slug">...</div></a></li>
</ul>

Can anyone push me in the right direction?

Answer 1

OK, I almost got it now... I extended the Walker_Page Class:

class Walker_Child_Classes extends Walker_page {
function start_el(&$output, $page, $depth, $args, $current_page) {
if ( $depth )
$indent = str_repeat("\t", $depth);
else
$indent = '';

extract($args, EXTR_SKIP);

$output .= $indent . '<li class="' . apply_filters( 'the_title', $page->post_name, $page->ID ) . '"><a href="' . get_page_link($page->ID) . '" title="' . esc_attr( wp_strip_all_tags( apply_filters( 'the_title', $page->post_title, $page->ID ) ) ) . '">' . $link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a>';
}
}

And added the following to my Page Template:

$sWalker = new Walker_Child_Classes();
wp_list_pages( array( 'title_li' => null, 'walker' => $sWalker, 'sort_column' => 'menu_order', 'child_of' => $post->ID ) );

Which results in:

<ul class="timeline">
<li class="Future">
<li class="Current">
<li class="Past">
</ul>

I am not happy about the Capitals (it takes the Page name after all), but if this is what it is, then I can live with that...

If anyone has a suggestion on how to get the real slug that would be highly appreciated!

Edited the code with the suggestion of @mike23