marinarasauce67 marinarasauce67 - 6 months ago 3x
Javascript Question

Way to display list of users in a horizontal container, rather than vertically and uncontained?

I'm using this WordPress code

function wpb_random_users() {

global $wpdb;

$randomusers = '<ul class="random-users">';

// Query database for users
$usernames = $wpdb->get_results("SELECT user_nicename, user_url, user_email FROM $wpdb->users ORDER BY RAND() LIMIT 5");

// Display users in a list
foreach ($usernames as $username) {

if (!$username->user_url) :

$randomusers .= '<li>' .get_avatar($username->user_email, 45) .$username->user_nicename."</li>";

else :

$randomusers .= '<li>' .get_avatar($username->user_email, 45).'<a href="'.$username->user_url.'">'.$username->user_nicename."</a></li>";

$randomusers .= '</ul>';

return $randomusers;


which works to list users vertically. But I'm wondering how to make the users list horizontally instead, preferably contained in a moving carousel.

How might I change the code to at least partially achieve this, like placing the users horizontally in a box?

Thank you.


Add to the css file

ul.random-users li {
    display: inline;