The HTML for each slideshow is just an unordered list of images. NO radio, checkboxes, labels, links or buttons.

Following on from the previous demonstration, this one uses a slightly different arrangement to have multiple images visible on screen.

90% of the stylesheet is shared by the two slideshow, with just 10% to resize the slideshows for the different aspect ratios of the images and a diffent number of visible images.

All the arrows, buttons and slide action are controlled using pseudo element. See Carousels with CSS

The slideshows are responsive, with the slides staying the same size, but reducing in the number visible as the screen size reduces.

The number of bullets changes automatically as the number on visible images decreases and the arrrows change to scroll the number of visible immages.