"carousel"
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/Eyjjafjallajokull/pen/KddvMe?depth=everything&order=popularity&page=34&q=thumbnail&show_forks=false" /> <link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.min.css'><link rel='stylesheet prefetch' href='//fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,300italic,300'> <style class="cp-pen-styles">.flickity-prev-next-button.previous { left: -30px; } .flickity-prev-next-button.next { right: -30px; } .flickity-prev-next-button .arrow { fill: #F5F7FA; } .flickity-prev-next-button { background-color: #434A54; width: 38px; height: 38px; } .flickity-prev-next-button:hover { background-color: #656D78; }</style></head><body> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Infinite Flickity Slider Test</title> </head> <style> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .cf:before, .cf:after { display: table; content: ' '; } .cf:after { clear: both; } .cf { *zoom: 1; } body { font-family: 'Roboto', Arial, sans-serif; margin: 0; color: #555555; background-color: #f5f7fa; text-align: center; } img { max-width: 100%; height: auto; } figure { margin: 0; padding: 10px; } figure a { display: block; } mark { padding: 0 5px; background-color: #dddddd; } ::backdrop { background-color: rgba(0, 0, 0, 0.5); } .site-content { text-align: left; width: 100%; margin-left: auto; margin-right: auto; margin-top: 30px; padding-right: 5%; padding-left: 5%; margin-bottom: 90px; } .card { width: 100%; background-color: #fff; text-align: left; position: relative; height: 100%; box-shadow: 0px 2px 6px 0px rgba(204,209,217,.5); border: 1px solid #E6E9ED; } .courses { margin-top: 30px; margin-bottom: 60px; } .course-item { width: 33%; padding-right: 2%; padding-left: 2%; margin-bottom: 30px; /* ensuring proper layout*/ float: left; } .course-heading { font-weight: 500; font-size: 12px; color: #AAB2BD; text-transform: uppercase; text-align: center; } .course-info { padding: 7%; min-height: 140px; } .course-topic { font-weight: 500; color: #AAB2BD; font-size: 12px; margin-bottom: 5px; } .course-topic.photo { color: #673AB7; } .course-topic.webdesign { color: #009688; } .course-topic.computer { color: #2196F3; } .course-topic.code { color: #4CAF50; } .course-topic.design { color: #F44336; } .course-title { font-weight: 500; font-size: 14px; margin: 0 0 30%; } .course-meta { color: #AAB2BD; font-weight: 300; font-size: 11px; position: absolute; left: 7%; bottom: 7%; } .course-duration:before { display: inline-block; content: "•"; padding-right: 5px; padding-left: 5px; } .course-caption { position: absolute; right: 5%; bottom: 5%; font-size: 18px; color: #AAB2BD; } </style> <body> <div class="site-content cf"> <h2 class="course-heading">Toolkit</h2> <div class="courses cf" id="showcase"> <div class="course-item slide"> <div class="course-summary card"> <div class="course-thumbnail"> <img src="https://cms-assets.tutsplus.com/legacy-courses/CRS-96680.png" height="277" width="400" alt="image"> </div> <div class="course-info"> <div class="course-topic webdesign">Programming</div> <h3 class="course-title">Ruby on Rails</h3> <div class="course-meta"> <time class="course-date">Version</time> <span class="course-duration">2.2</span> </div> </div> </div> </div> <div class="course-item slide"> <div class="course-summary card"> <div class="course-thumbnail"> <img src="https://s-media-cache-ak0.pinimg.com/736x/80/51/ba/8051ba29d8450492b819ae2aace51b99.jpg" height="277" width="400" alt=""> </div> <div class="course-info"> <div class="course-topic webdesign">Web</div> <h3 class="course-title">HTML5 & CSS3</h3> <div class="course-meta"> <time class="course-date">Version</time> <span class="course-duration">3</span> </div> </div> <span class="course-caption ion ion-closed-captioning"></span> </div> </div> <div class="course-item slide"> <div class="course-summary card"> <div class="course-thumbnail"> <img src="https://cms-assets.tutsplus.com/uploads/users/48/posts/22337/preview_image/Linux-setup-for-developers.png" height="277" width="400" alt="Linux Image"> </div> <div class="course-info"> <div class="course-topic computer">OS</div> <h3 class="course-title">Linux</h3> <div class="course-meta"> <time class="course-date">Version</time> <span class="course-duration">14.10</span> </div> </div> </div> </div> <div class="course-item slide"> <div class="course-summary card"> <div class="course-thumbnail"> <img src="http://a3ab771892fd198a96736e50.javacodegeeks.netdna-cdn.com/wp-content/uploads/2014/03/Atom-Text-Editor-By-GitHub.png" height="277" width="400" alt="TextEdit Image"> </div> <div class="course-info"> <div class="course-topic code">Text Editor</div> <h3 class="course-title">Atom</h3> <div class="course-meta"> <time class="course-date">Version</time> <span class="course-duration">1.0.11</span> </div> </div> <span class="course-caption ion ion-closed-captioning"></span> </div> </div> </div> </div> </body> </html> <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 src='//cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.min.js'></script> <script >$("#showcase").flickity({ wrapAround: true, //pageDots: false }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Awesome Landing Page
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: