"Product Carousal Responsive (Single Product View For Mobile)"
Bootstrap 3.3.0 Snippet by hadi887

<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 ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"> <script type="text/javascript" src="http://yourjavascript.com/21051171187/jquery-touchswipe-min.js"></script> <script type="text/javascript" src="http://yourjavascript.com/11873115711/jquery-1-12-4-min.js"></script> <script type="text/javascript" src="http://yourjavascript.com/71712155041/responsive-bootstrap-carousel.js"></script> <div class="container"> <div class="row"> <div id="adv_team_4_columns_carousel" class="carousel slide four_shows_one_move team_columns_carousel_wrapper" data-ride="carousel" data-interval="2000" data-pause="hover"> <!--========= Wrapper for slides =========--> <div class="carousel-inner" role="listbox"> <!--========= 1st slide =========--> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image"> <img src="http://placehold.it/150x150" alt="slider 01"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Karachi</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> </div> <!--========= 2nd slide =========--> <div class="item active"> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Karachi</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Karachi</h4> <hr> <h5>PAKISTAN</h5> </div> </div> </div> <!--========= 3rd slide =========--> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Karachi</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Karachi</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> </div> <!--========= 4th slide =========--> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Karachi</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Karachi</h4> <hr> <h5>PAKISTAN</h5> </div> </div> </div> <!--========= 5th Slide =========--> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Karachi</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Karachi</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> </div> <!--========= 6th Slide =========--> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Karachi</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3"> <img src="http://placehold.it/150x150" alt="slider 01"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> </div> <!--========= 7th Slide =========--> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Karachi</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2"> <img src="http://placehold.it/150x150" alt="slider 01"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> </div> <!--========= 8th Slide =========--> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-1"> <img src="http://placehold.it/150x150" alt="slider 01"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-2"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Lahore</h4> <hr> <h5>PAKISTAN</h5> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3 team_columns_item_image cloneditem-3"> <img src="http://placehold.it/150x150" alt="slider 02"> <div class="team_columns_item_caption"> <h4>Karachi</h4> <hr> <h5>PAKISTAN</h5> </div> </div> </div> </div> <!--======= Navigation Buttons =========--> <!--======= Left Button =========--> <a class="left carousel-control team_columns_carousel_control_left adv_left" href="#adv_team_4_columns_carousel" role="button" data-slide="prev"> <span class="fa fa-angle-left team_columns_carousel_control_icons" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <!--======= Right Button =========--> <a class="right carousel-control team_columns_carousel_control_right adv_right" href="#adv_team_4_columns_carousel" role="button" data-slide="next"> <span class="fa fa-angle-right team_columns_carousel_control_icons" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div>
.team_columns_carousel_wrapper { padding: 25px; overflow: hidden } .team_columns_carousel_control_left, .team_columns_carousel_control_right { top: 26px; z-index: 2; opacity: 1; width: 35px; height: 35px; border: 0; text-shadow: none; text-align: center; -webkit-transition: all ease-in-out .3s; transition: all ease-in-out .3s } .team_columns_carousel_control_icons { line-height: 35px; font-size: 20px!important; font-weight: normal!important; margin-top:8px; } .team_columns_carousel_control_left { left: 26px!important } .team_columns_carousel_control_right { left: 63px!important } .adv_left { left: 41px!important } .adv_right { left: 78px!important } .team_columns_item_image { padding-top: 60px; padding-bottom: 25px } .team_columns_item_image img { width: 100%; -webkit-filter: grayscale(70%); -moz-filter: grayscale(70%); -ms-filter: grayscale(70%); -o-filter: grayscale(70%); filter: grayscale(70%); -webkit-transition: all ease-in-out .3s; -moz-transition: all ease-in-out .3s; -ms-transition: all ease-in-out .3s; -o-transition: all ease-in-out .3s; transition: all ease-in-out .3s } .team_columns_item_image:hover img { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%) } .team_columns_item_caption { padding: 10px; text-align: center; padding-bottom: 30px } .team_columns_item_caption>hr { width: 15% } .team_columns_item_caption h4 { font-weight: 800; text-transform: uppercase; font-family: 'Open Sans', sans-serif } .team_columns_item_caption h5 { font-weight: 600; text-transform: uppercase; font-family: 'Open Sans', sans-serif } .team_columns_item_caption p { font-weight: 400; margin-top: 20px; font-family: 'Open Sans', sans-serif } .team_columns_item_caption p a, .team_columns_item_caption p a:visited { text-decoration: none; -webkit-transition: all ease-in-out .3s; transition: all ease-in-out .3s } .team_columns_item_social a, .team_columns_item_social a:visited { width: 25px; float: left; height: 25px; display: block; line-height: 25px; margin-right: 2px; text-decoration: none; -webkit-transition: background ease-in-out .3s; transition: background ease-in-out .3s } @media(min-width:768px) and (max-width:789px) { .adv_team_columns_item_social a, .adv_team_columns_item_social a:visited { margin-right: 0 } } .team_columns_carousel_wrapper { background: #fff } .team_columns_carousel_control_left, .team_columns_carousel_control_left:hover, .team_columns_carousel_control_left:active, .team_columns_carousel_control_left:focus, .team_columns_carousel_control_right, .team_columns_carousel_control_right:hover, .team_columns_carousel_control_right:active, .team_columns_carousel_control_right:focus { color: #fff; background: #feb600!important } .team_columns_item_caption { color: #fff; background: #171717 } .team_columns_item_caption>hr { border-top: 2px solid #feb600 } .team_columns_item_caption p a, .team_columns_item_caption p a:visited { color: #feb600 } .team_columns_item_caption p a:hover, .team_columns_item_caption p a:active { color: #cb9200 } .team_columns_item_social a, .team_columns_item_social a:visited { color: #171717; background: #feb600 } .team_columns_item_social a:hover, .team_columns_item_social a:active { background: #cb9200 } .four_shows_one_move .cloneditem-1, .four_shows_one_move .cloneditem-2, .four_shows_one_move .cloneditem-3 { display: none } @media all and (min-width: 768px) { .four_shows_one_move .carousel-inner>.active.left, .four_shows_one_move .carousel-inner>.prev { left: -50% } .four_shows_one_move .carousel-inner>.active.right, .four_shows_one_move .carousel-inner>.next { left: 50% } .four_shows_one_move .carousel-inner>.left, .four_shows_one_move .carousel-inner>.prev.right, .four_shows_one_move .carousel-inner>.active { left: 0 } .four_shows_one_move .carousel-inner .cloneditem-1 { display: block } } @media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) { .four_shows_one_move .carousel-inner>.item.active.right, .four_shows_one_move .carousel-inner>.item.next { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); left: 0 } .four_shows_one_move .carousel-inner>.item.active.left, .four_shows_one_move .carousel-inner>.item.prev { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); left: 0 } .four_shows_one_move .carousel-inner>.item.left, .four_shows_one_move .carousel-inner>.item.prev.right, .four_shows_one_move .carousel-inner>.item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0 } } @media all and (min-width: 992px) { .four_shows_one_move .carousel-inner>.active.left, .four_shows_one_move .carousel-inner>.prev { left: -25% } .four_shows_one_move .carousel-inner>.active.right, .four_shows_one_move .carousel-inner>.next { left: 25% } .four_shows_one_move .carousel-inner>.left, .four_shows_one_move .carousel-inner>.prev.right, .four_shows_one_move .carousel-inner>.active { left: 0 } .four_shows_one_move .carousel-inner .cloneditem-2, .four_shows_one_move .carousel-inner .cloneditem-3 { display: block } } @media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) { .four_shows_one_move .carousel-inner>.item.active.right, .four_shows_one_move .carousel-inner>.item.next { -webkit-transform: translate3d(25%, 0, 0); transform: translate3d(25%, 0, 0); left: 0 } .four_shows_one_move .carousel-inner>.item.active.left, .four_shows_one_move .carousel-inner>.item.prev { -webkit-transform: translate3d(-25%, 0, 0); transform: translate3d(-25%, 0, 0); left: 0 } .four_shows_one_move .carousel-inner>.item.left, .four_shows_one_move .carousel-inner>.item.prev.right, .four_shows_one_move .carousel-inner>.item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0 } }

Related: See More


Questions / Comments: