Only display previous and next items in video player playlist

My WordPress theme has the following PHP function that displays a video player with a playlist, and assigns the themotion-playlist-playing class to the currently selected item. To prevent long scrolling lists on mobile, I’m looking for a way to only display the previous and next item in the playlist.

My first thought was to assign separate classes to the items before and after the current one, and then hide the rest on mobile using a CSS media query. However, I’m not particularly gifted when it comes to PHP, and I couldn’t find a way to assign a CSS class to the previous and next items. Any help in doing so – or a better approach to achieve the same result – would be much appreciated!

This is the function that calls the playlist:

function themotion_carousel_playlist( $items ) {
$reverse = array_reverse( $items );
$first_item = array_pop( $reverse );
$first_item[‘playlist_class’] = ‘ themotion-playlist-playing’;

reset( $items );
$key = key( $items );
unset( $items[ $key ] );
?>
<div class=”themotion-playlist-tracks” id=”slider-thumbs”>
<?php
themotion_show_playlist_item( $first_item, $key );
foreach ( $items as $key => $item ) {
themotion_show_playlist_item( $item, $key );
}
?>
</div>
<?php
}

Thanks in advance,

Julian

Read more here:: Only display previous and next items in video player playlist

Leave a Reply

Your email address will not be published. Required fields are marked *