In this tutorial, you will how to create a vertical slider with navigation buttons using pure CSS. Watch the video below for a detailed tutorial.
HTML
<divclass="container"><inputtype="radio"name="carousel-control"id="button1"hiddenchecked><inputtype="radio"name="carousel-control"id="button2"hidden><inputtype="radio"name="carousel-control"id="button3"hidden><divclass="carousel"><divclass="wrapper"><divclass="page"><h2>Page 1</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laboriosam dolorum illo soluta dolore earum quos, reprehenderit quo nobis explicabo dolores, nesciunt impedit officia ipsam distinctio totam voluptate et expedita?</p></div><divclass="page"><h2>Page 2</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit odit, hic, ea similique maxime nisi minus enim harum dolore error, necessitatibus inventore mollitia dolores minima reprehenderit sequi nemo quas quae.</p></div><divclass="page"><h2>Page 3</h2><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure, voluptates, pariatur adipisci vero minus dolorem, blanditiis similique rem velit quae ullam ab soluta laborum eligendi corporis ipsam temporibus asperiores ratione.</p></div></div></div><divid="navigation"><labelfor="button1"class="label1">1</label><labelfor="button2"class="label2">2</label><labelfor="button3"class="label3">3</label></div></div>