index.html

<main class="main"> <input class="control" type="radio" name="img" checked="checked" /> <input class="control" type="radio" name="img" /> <input class="control" type="radio" name="img" /> <input class="control" type="radio" name="img" /> <input class="control" type="radio" name="img" /> <div class="gallery"> <div class="north"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> <div class="west"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> <div class="east"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> <div class="south"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> <div class="west"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> <div class="north"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> <div class="south"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> <div class="north"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> <div class="east"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> <div class="north"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> <div class="west"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> <div class="east"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> <div class="north"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> <div class="east"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> <div class="west"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> <div class="south"> <div style="background-image: url('https://i.imgur.com/QhMap7L.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/GPP7kjs.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/3HieVoS.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/fu0htTr.jpeg')"></div> <div style="background-image: url('https://i.imgur.com/Hgbbl67.jpeg')"></div> </div> </div> </main>
Multi Direction Slider Gallery (Pure CSS)

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.