"Item Slider - Responsive"
Bootstrap 3.3.0 Snippet by SOJITRA

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="spe-cor"> <div class="container"> <h4 class="title">Special Correspondent</h4> <div id="spe-cor" class="carousel carousel-correspondence slide"> <div class="carousel-inner"> <div class="item active"> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> <div class="thumbnail row"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Himanshu Daudia"> <div class="caption"> <h3><a href="https://www.facebook.com/himanshu.daudia" target="_blank">Himanshu Daudia</a></h3> <p class="cate-para"> <a href="#" class="cate">Front End</a> <a href="#" class="cate">HTML</a> <a href="#" class="cate">CSS</a> </p> </div> </div> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> <div class="thumbnail row"> <img src="https://images.unsplash.com/photo-1548372290-8d01b6c8e78c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Hiren Sojitra"> <div class="caption"> <h3><a href="https://www.facebook.com/SOJITRAHIREN/" target="_blank">Hiren Sojitra</a></h3> <p class="cate-para"> <a href="#" class="cate">Photoshop</a> <a href="#" class="cate">Bootstrap</a> <a href="#" class="cate">jQuery</a> </p> </div> </div> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> <div class="thumbnail row"> <img src="https://images.unsplash.com/photo-1464746133101-a2c3f88e0dd9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Navghan Modhvadiya"> <div class="caption"> <h3><a href="https://www.facebook.com/nav.modhwadiya" target="_blank">Navghan Modhvadiya</a></h3> <p class="cate-para"> <a href="#" class="cate">Photoshop</a> <a href="#" class="cate">HTML</a> <a href="#" class="cate">CSS</a> </p> </div> </div> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> <div class="thumbnail row"> <img src="https://images.unsplash.com/photo-1552080084-f86b99bd1d29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Ravi Patel"> <div class="caption"> <h3><a href="https://www.facebook.com/profile.php?id=100001769743803" target="_blank">Ravi Patel</a></h3> <p class="cate-para"> <a href="#" class="cate">PHP</a> <a href="#" class="cate">Wordpress</a> <a href="#" class="cate">Drupal</a> </p> </div> </div> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> <div class="thumbnail row"> <img src="https://images.unsplash.com/photo-1557862921-37829c790f19?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Hitesh Mandali"> <div class="caption"> <h3><a href="https://www.facebook.com/hitesh.mandli" target="_blank">Hitesh Mandli</a></h3> <p class="cate-para"> <a href="#" class="cate">PHP</a> <a href="#" class="cate">Wordpress</a> </p> </div> </div> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> <div class="thumbnail row"> <img src="https://images.unsplash.com/photo-1522529599102-193c0d76b5b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Deepak Kumar"> <div class="caption"> <h3><a href="https://www.facebook.com/kumardeepakg123" target="_blank">Deepak Kumar</a></h3> <p class="cate-para"> <a href="#" class="cate">SEO</a> <a href="#" class="cate">Ctrl+C</a> <a href="#" class="cate">Ctrl+V</a> </p> </div> </div> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> <div class="thumbnail row"> <img src="https://images.unsplash.com/photo-1465321897912-c692b37a09a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Mehul Nishad"> <div class="caption"> <h3><a href="https://www.facebook.com/mehul.nishad.007" traget="_blank">Mehul Nishad</a></h3> <p class="cate-para"> <a href="#" class="cate">PHP</a> <a href="#" class="cate">Wordpress</a> <a href="#" class="cate">Drupal</a> </p> </div> </div> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> <div class="thumbnail row"> <img src="https://images.unsplash.com/photo-1440317539597-ad354a025165?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Brijesh Parmar"> <div class="caption"> <h3><a href="https://www.facebook.com/brijesh.parmar.369" target="_blank">Brijesh Parmar</a></h3> <p class="cate-para"> <a href="#" class="cate">PHP</a> <a href="#" class="cate">Drupal</a> </p> </div> </div> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> <div class="thumbnail row"> <img src="https://images.unsplash.com/photo-1481437642641-2f0ae875f836?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Sunil Kabra"> <div class="caption"> <h3><a href="https://www.facebook.com/sunil.kabra.127" target="_blank">Sunil Kabra</a></h3> <p class="cate-para"> <a href="#" class="cate">Admin</a> </p> </div> </div> </div> </div> </div> <div class="controls"> <a class="left carousel-control" href="#spe-cor" data-slide="prev"><i class="fa fa-chevron-left"></i></a> <a class="right carousel-control" href="#spe-cor" data-slide="next"><i class="fa fa-chevron-right"></i></a> </div> </div> <!-- End Carousel --> </div> </div>
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /*================================================*/ @import url('https://fonts.googleapis.com/css?family=Roboto'); /*Special Corresponds*/ .spe-cor { position: relative; background: #FFF; } .spe-cor .carousel-correspondence [class*="cloneditem-"] { display: none; } .spe-cor .carousel-inner { margin-bottom: 20px; } .spe-cor h4.title { padding-top: 25px; padding-bottom: 10px; } .spe-cor .thumbnail img { border: 1px solid #DDD; } .spe-cor .thumbnail { margin-bottom: 0; border-radius: 0; padding: 10px; height: auto; position: relative; border: none; overflow: hidden; } .spe-cor .thumbnail:hover, .spe-cor .thumbnail:active, .spe-cor .thumbnail:focus { background: #FFF; } .spe-cor .thumbnail:after { content: ''; background: #005fb1; position: absolute; height: 5px; width: 100%; left: calc(100% + 10px); bottom: 0; -webkit-transition: 0.5s; /* Safari */ transition: 0.5s; -moz-transition: 0.5s; } .spe-cor .thumbnail:hover:after, .spe-cor .thumbnail:active:after, .spe-cor .thumbnail:focus:after { left: 0%; -webkit-transition: 1s; /* Safari */ transition: 1s; -moz-transition: 1s; } .spe-cor .thumbnail .caption { padding: 0; } .spe-cor .thumbnail .caption h3 { text-align: center; margin-top: 5px; margin-bottom: 5px; line-height: 0.8; } .spe-cor .thumbnail .caption h3 > a { font-size: 16px; font-family: 'Roboto', sans-serif; color: #555; line-height: 0.8; text-transform: uppercase; } .spe-cor .thumbnail .caption h3 > a:hover, .spe-cor .thumbnail .caption h3 > a:active, .spe-cor .thumbnail .caption h3 > a:focus { color: #005fb1; text-decoration: none; } .spe-cor .thumbnail .caption p.cate-para { margin-bottom: 0px; text-align: center; } .spe-cor .thumbnail .caption p.cate-para > a, .spe-cor .thumbnail .caption p.cate-para > a { font-size: 14px; font-family: 'Roboto', sans-serif; color: rgb(102, 102, 102); line-height: 1.2; text-align: left; } .spe-cor .thumbnail .caption p.cate-para > a:hover, .spe-cor .thumbnail .caption p.cate-para > a:focus, .spe-cor .thumbnail .caption p.cate-para > a:active { color: #cc0000; text-decoration: none; } .spe-cor .thumbnail .caption span.date, .spe-cor .thumbnail .caption span.comment { margin-bottom: 0; } .carousel-correspondence .carousel-control.left, .carousel-correspondence .carousel-control.right, .carousel-video-thumb .carousel-control.left, .carousel-video-thumb .carousel-control.right { background-image: none !important; color: #c0c0c0; height: 35px; width: 35px; border-style: solid; border-width: 1px; border-color: rgb(224, 224, 224); background-color: rgb(245, 245, 245); margin: 0; } .carousel-correspondence .carousel-control.left:hover, .carousel-correspondence .carousel-control.right:hover, .carousel-video-thumb .carousel-control.left:hover, .carousel-video-thumb .carousel-control.right:hover { color: #FFF; background: #C00; } .carousel-correspondence .controls, .carousel-video-thumb .controls { padding: 0; margin: 0; position: absolute; width: 75px; padding-right: 15px; padding-left: 15px; background: none; top: 0; right: 0; margin-top: -40px; height: 35px; } .carousel-correspondence .carousel-control, .carousel-video-thumb .carousel-control { color: #fff; padding: 0px; padding-top: 3px; color: #428BCA; bottom: auto; width: 35px; height: 35px; text-shadow: none; opacity: 1; top: 0; } .carousel-correspondence .carousel-control:hover, .carousel-video-thumb .carousel-control:hover { color: #d9534f; } .carousel-correspondence .carousel-control.left, .carousel-correspondence .carousel-control.right, .carousel-video-thumb .carousel-control.left, .carousel-video-thumb .carousel-control.right { background-image: none !important; } .carousel-correspondence .carousel-control.right, .carousel-video-thumb .carousel-control.right { left: auto; } .carousel-correspondence .carousel-control.left, .carousel-video-thumb .carousel-control.left { right: auto; } .carousel-correspondence .carousel-indicators, .carousel-video-thumb .carousel-indicators { bottom: -30px; } .carousel-correspondence .carousel-indicators li, .carousel-video-thumb .carousel-indicators li { border-radius: 0; width: 10px; height: 10px; background: #ccc; border: 1px solid #ccc; } .carousel-correspondence .carousel-indicators .active, .carousel-video-thumb .carousel-indicators .active { width: 12px; height: 12px; background: #3276b1; border-color: #3276b1; } /*================================================*/ /*Correspondece Slider*/ @media all and (min-width:768px) { .carousel-correspondence .carousel-inner > .active.left, .carousel-correspondence .carousel-inner > .prev { left: -50%; } .carousel-correspondence .carousel-inner > .active.right, .carousel-correspondence .carousel-inner > .next { left: 50%; } .carousel-correspondence .carousel-inner > .left, .carousel-correspondence .carousel-inner > .prev.right, .carousel-correspondence .carousel-inner > .active { left: 0; } .carousel-correspondence .carousel-inner .cloneditem-1, .carousel-correspondence .carousel-inner .cloneditem-2 { display: block; } } @media all and (min-width:768px) and (transform-3d), all and (min-width:768px) and (-webkit-transform-3d) { .carousel-correspondence .carousel-inner > .item.active.right, .carousel-correspondence .carousel-inner > .item.next { -webkit-transform: translate3d(33.333%, 0, 0); transform: translate3d(33.33%, 0, 0); left: 0; } .carousel-correspondence .carousel-inner > .item.active.left, .carousel-correspondence .carousel-inner > .item.prev { -webkit-transform: translate3d(-33.333%, 0, 0); transform: translate3d(-33.333%, 0, 0); left: 0; } .carousel-correspondence .carousel-inner > .item.left, .carousel-correspondence .carousel-inner > .item.prev.right, .carousel-correspondence .carousel-inner > .item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0; } } @media all and (min-width:992px) and (max-width:1200px) { .carousel-correspondence .carousel-inner > .active.left, .carousel-correspondence .carousel-inner > .prev { left: -25%; } .carousel-correspondence .carousel-inner > .active.right, .carousel-correspondence .carousel-inner > .next { left: 25%; } .carousel-correspondence .carousel-inner > .left, .carousel-correspondence .carousel-inner > .prev.right, .carousel-correspondence .carousel-inner > .active { left: 0; } .carousel-correspondence .carousel-inner .cloneditem-2, .carousel-correspondence .carousel-inner .cloneditem-3 { display: block; } } @media all and (min-width:992px) and (transform-3d), all and (min-width:992px) and (-webkit-transform-3d) { .carousel-correspondence .carousel-inner > .item.active.right, .carousel-correspondence .carousel-inner > .item.next { -webkit-transform: translate3d(16.666%, 0, 0); transform: translate3d(25%, 0, 0); left: 0; } .carousel-correspondence .carousel-inner > .item.active.left, .carousel-correspondence .carousel-inner > .item.prev { -webkit-transform: translate3d(-16.666%, 0, 0); transform: translate3d(-25%, 0, 0); left: 0; } .carousel-correspondence .carousel-inner > .item.left, .carousel-correspondence .carousel-inner > .item.prev.right, .carousel-correspondence .carousel-inner > .item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0; } } @media all and (min-width:1200px) { .carousel-correspondence .carousel-inner > .active.left, .carousel-correspondence .carousel-inner > .prev { left: -16.666667%; } .carousel-correspondence .carousel-inner > .active.right, .carousel-correspondence .carousel-inner > .next { left: 16.666667%; } .carousel-correspondence .carousel-inner > .left, .carousel-correspondence .carousel-inner > .prev.right, .carousel-correspondence .carousel-inner > .active { left: 0; } .carousel-correspondence .carousel-inner .cloneditem-2, .carousel-correspondence .carousel-inner .cloneditem-3, .carousel-correspondence .carousel-inner .cloneditem-4, .carousel-correspondence .carousel-inner .cloneditem-5, .carousel-correspondence .carousel-inner .cloneditem-6 { display: block; } } @media all and (min-width:1200px) and (transform-3d), all and (min-width:1200px) and (-webkit-transform-3d) { .carousel-correspondence .carousel-inner > .item.active.right, .carousel-correspondence .carousel-inner > .item.next { -webkit-transform: translate3d(16.666667%, 0, 0); transform: translate3d(16.666667%, 0, 0); left: 0; } .carousel-correspondence .carousel-inner > .item.active.left, .carousel-correspondence .carousel-inner > .item.prev { -webkit-transform: translate3d(-16.666667%, 0, 0); transform: translate3d(-16.666667%, 0, 0); left: 0; } .carousel-correspondence .carousel-inner > .item.left, .carousel-correspondence .carousel-inner > .item.prev.right, .carousel-correspondence .carousel-inner > .item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0; } } /*Correspondece Slider Ends*/
$(document).ready(function() { /*Correspondence Slider*/ $('.carousel-correspondence .item').each(function() { var itemToClone = $(this); for (var i = 1; i < 6; i++) { itemToClone = itemToClone.next(); if (!itemToClone.length) { itemToClone = $(this).siblings(':first'); } itemToClone.children(':first-child').clone() .addClass("cloneditem-" + (i)) .appendTo($(this)); } }); /*Correspondence Slider*/ });

Related: See More


Questions / Comments: