"slide"
Bootstrap 4.1.1 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>CodePen - Minimal image gallery with thumbnails</title> <style> .simple-gallery { width: 408px; display: block; margin: auto; margin-top: 50px; box-shadow: 5px 20px 60px 10px Gray; } img { border-top: 1px solid Gainsboro; border-left: 1px solid Gainsboro; } .mini img { width: 98px; height: 98px; float: left; margin: 4px 4px 0px 0px; cursor: pointer; } .mini img:nth-of-type(4) { margin-right: 0px; } .maxi { width: 407px; height: 400px; display: block; } </style> <script> window.console = window.console || function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <div class="simple-gallery"> <img class="maxi" src="https://source.unsplash.com/uAgLGG1WBd4/400x400"> <div class="mini"> <img src="https://source.unsplash.com/uAgLGG1WBd4/100x100"> <img src="https://source.unsplash.com/Ixp4YhCKZkI/100x100"> <img src="https://source.unsplash.com/7BjmDICVloE/100x100"> <img src="https://source.unsplash.com/j4PaE7E2_Ws/100x100"> </div> </div> <script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script id="rendered-js"> $(".mini img").click(function () { $(".maxi").attr("src", $(this).attr("src").replace("100x100", "400x400")); }); //# sourceURL=pen.js </script> </body> </html>

Related: See More

Hipster As F*** Cards
Mega menu slide down on hover with carousel
Slide dropdown navigation
Shoji Layout: Slide-in Side Panels for XS Viewports

Questions / Comments: