"slider"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/pouretrebelle/pen/wBPpjp?depth=everything&order=popularity&page=8&q=thumbnail&show_forks=false" /> <style class="cp-pen-styles">.photoset__images { position: relative; width: 100%; height: 0; } .photoset__images > * { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } body { margin: 0; font-size: 15px; background: #e6e6e0; } .photoset { max-width: 500px; position: relative; margin: 2em auto; } .photoset__image { -o-object-fit: cover; object-fit: cover; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; opacity: 0; } .photoset__image.on, .photoset__image.change { opacity: 1; } .photoset__image.on { z-index: 2; } .photoset__thumbnails { margin: -2px 0 2px -2px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .photoset__thumbnail { margin: 2px; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; opacity: 0.5; } .photoset__thumbnail:last-child { margin-right: 0; } .photoset__thumbnail:hover { opacity: 0.8; } .photoset__thumbnail img { width: 100%; vertical-align: bottom; } .photoset[data-number="0"] .photoset__thumbnail:nth-child(1) { opacity: 1; } .photoset[data-number="1"] .photoset__thumbnail:nth-child(2) { opacity: 1; } .photoset[data-number="2"] .photoset__thumbnail:nth-child(3) { opacity: 1; } .photoset[data-number="3"] .photoset__thumbnail:nth-child(4) { opacity: 1; } .photoset[data-number="4"] .photoset__thumbnail:nth-child(5) { opacity: 1; } .photoset[data-number="5"] .photoset__thumbnail:nth-child(6) { opacity: 1; } </style></head><body> <div class="photoset" data-id="smth"><img src="https://41.media.tumblr.com/d2286f01d20c0edec1723536a0b0a7ba/tumblr_nf8y2sNOfK1txq9wco3_1280.png"/><img src="https://36.media.tumblr.com/5837fe767b810b0ebe978ab08e5eddbe/tumblr_nf8y2sNOfK1txq9wco2_1280.png"/><img src="https://36.media.tumblr.com/64c5bc55f252250195ef364e4f71a791/tumblr_nf8y2sNOfK1txq9wco1_1280.png"/><img src="https://40.media.tumblr.com/8465265f7fbaff34edf16b34fbb3f5d7/tumblr_nf8y2sNOfK1txq9wco4_1280.png"/></div> <div class="photoset" data-id="123"><img src="https://40.media.tumblr.com/tumblr_luxk0eZpHa1qzy92yo1_500.jpg"/><img src="https://40.media.tumblr.com/tumblr_luxk0eZpHa1qzy92yo2_500.jpg"/><img src="https://41.media.tumblr.com/tumblr_luxk0eZpHa1qzy92yo3_500.jpg"/><img src="https://36.media.tumblr.com/tumblr_luxk0eZpHa1qzy92yo4_500.jpg"/><img src="https://40.media.tumblr.com/tumblr_luxk0eZpHa1qzy92yo5_500.jpg"/></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script > $(document).ready(function(){ var photoset = []; $('.photoset').each(function() { var $photoset = $(this), id = $photoset.data('id'), $imgs = $photoset.find('img'), thumbs = ''; $imgs.addClass('photoset__image').each(function(i) { var $img = $(this), ratio = parseInt($img.height())/parseInt($img.width()); console.log(ratio); $img.data('ratio', ratio); thumbs += '<a href="#" class="photoset__thumbnail js-thumbnail" data-index="'+i+'" style="flex: '+(1/ratio)+' 0 0px;"><img src="'+$img.attr('src')+'"></a>'; }); $photoset.wrapInner('<div class="photoset__images">').prepend('<div class="photoset__thumbnails">'+thumbs+'</div>'); changeImg($photoset, 0); }); function changeImg($photoset, i) { var $imgs = $photoset.find('.photoset__images'), $old = $imgs.find('.photoset__image.on'), $new = $imgs.find('.photoset__image:eq('+i+')'); $old.addClass('change').removeClass('on'); $new.addClass('on'); setTimeout(function() { $old.removeClass('change'); }, 200); $imgs.animate({'padding-bottom': $new.data('ratio')*100+'%'}, 200); $photoset.data('number', i).attr('data-number', i); }; $('.photoset').on('click', '.js-thumbnail', function() { changeImg($(this).closest('.photoset'), $(this).data('index')); return false; }); }); //# sourceURL=pen.js </script> </body></html>

Questions / Comments: