"Cards Carousel Responsive"
Bootstrap 3.3.0 Snippet by webdesignAxialys

<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="5000" data-pause="hover"> <!--========= Wrapper for slides =========--> <div class="carousel-inner" role="listbox"> <!--========= 1st slide =========--> <div class="item active"> <div class="col-xs-12 col-sm-4 team_columns_item_image"> <a href="#" data-toggle="modal" data-target="#lunchVideoModal_00"> <img class="img-responsive" src="https://img.youtube.com/vi/8HCJvpXXZZg/maxresdefault.jpg" alt="slider 01"> </a> <div class="team_columns_item_caption"> <h4>La téléphonie professionnelle<br/>pour le manager</h4> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="text-center"><a class="btn btn-default" href="telephonie-professionnelle/centrex-pour-le-manager.php"> En savoir plus</a></p> </div> </div> <div class="col-xs-12 col-sm-4 team_columns_item_image cloneditem-1"> <a href="#" data-toggle="modal" data-target="#lunchVideoModal_01"> <img class="img-responsive" src="https://img.youtube.com/vi/KG4FnsCYFa8/maxresdefault.jpg" alt="slider 02"> </a> <div class="team_columns_item_caption"> <h4>La téléphonie professionnelle<br/>pour les assistant(e)s</h4> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="text-center"><a class="btn btn-default" href="telephonie-professionnelle/centrex-pour-le-manager.php"> En savoir plus</a></p> </div> </div> <div class="col-xs-12 col-sm-4 team_columns_item_image cloneditem-2"> <a href="#" data-toggle="modal" data-target="#lunchVideoModal_02"> <img class="img-responsive" src="https://img.youtube.com/vi/AwCMmyhlaEk/maxresdefault.jpg" alt="slider 03"> </a> <div class="team_columns_item_caption"> <h4>La Téléphonie professionnelle<br/>pour le service commercial</h4> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="text-center"><a class="btn btn-default" href="telephonie-professionnelle/centrex-pour-le-manager.php"> En savoir plus</a></p> </div> </div> </div> <!--========= 2nd slide =========--> <div class="item"> <div class="col-xs-12 col-sm-4 team_columns_item_image"> <a href="#" data-toggle="modal" data-target="#lunchVideoModal_03"> <img class="img-responsive" src="https://img.youtube.com/vi/FH-k4Fc3TMo/maxresdefault.jpg" alt="slider 04"> </a> <div class="team_columns_item_caption"> <h4>Le Voice Management<br/>pour l'agent</h4> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="text-center"><a class="btn btn-default" href="telephonie-professionnelle/centrex-pour-le-manager.php"> En savoir plus</a></p> </div> </div> <div class="col-xs-12 col-sm-4 team_columns_item_image cloneditem-1"> <a href="#" data-toggle="modal" data-target="#lunchVideoModal_04"> <img class="img-responsive" src="https://img.youtube.com/vi/qfiCDJ7QijA/maxresdefault.jpg" alt="slider 05"> </a> <div class="team_columns_item_caption"> <h4>Le Voice Management<br/>intégré à Zendesk</h4> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="text-center"><a class="btn btn-default" href="telephonie-professionnelle/centrex-pour-le-manager.php"> En savoir plus</a></p> </div> </div> </div> </div> <!--======= Navigation Buttons =========--> <!--======= Left Button =========--> <!-- Modal Video 00 --> <div class="modal fade" id="lunchVideoModal_00" tabindex="-1" role="dialog" aria-labelledby="lunchVideoModal_00Label"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="lunchVideoModal_01Label">La téléphonie professionnelle pour le manager</h4> </div> <div class="modal-body padding-none"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/8HCJvpXXZZg"></iframe> </div> </div> </div> </div> </div> <!-- Modal Video 01 --> <div class="modal fade" id="lunchVideoModal_01" tabindex="-1" role="dialog" aria-labelledby="lunchVideoModal_01Label"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="lunchVideoModal_01Label">La téléphonie professionnelle pour les assistant(e)s</h4> </div> <div class="modal-body padding-none"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/KG4FnsCYFa8"></iframe> </div> </div> </div> </div> </div> <!-- Modal Video 02 --> <div class="modal fade" id="lunchVideoModal_02" tabindex="-1" role="dialog" aria-labelledby="lunchVideoModal_02Label"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="lunchVideoModal_01Label">La Téléphonie professionnelle pour le service commercial</h4> </div> <div class="modal-body padding-none"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/AwCMmyhlaEk"></iframe> </div> </div> </div> </div> </div> <!-- Modal Video 03 --> <div class="modal fade" id="lunchVideoModal_03" tabindex="-1" role="dialog" aria-labelledby="lunchVideoModal_03Label"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="lunchVideoModal_01Label">Le Voice Management pour l'agent</h4> </div> <div class="modal-body padding-none"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/FH-k4Fc3TMo"></iframe> </div> </div> </div> </div> </div> <!-- Modal Video 04 --> <div class="modal fade" id="lunchVideoModal_04" tabindex="-1" role="dialog" aria-labelledby="lunchVideoModal_04Label"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="lunchVideoModal_01Label">Le Voice Management intégré à Zendesk</h4> </div> <div class="modal-body padding-none"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/qfiCDJ7QijA"></iframe> </div> </div> </div> </div> </div> <div class="pull-right padding-top"> <a class="left btn carousel-control team_columns_carousel_control_left adv_left" href="#adv_team_4_columns_carousel" role="button" data-slide="prev"> <i class="fa fa-chevron-left"></i> <span class="sr-only">Previous</span> </a> <!--======= Right Button =========--> <a class="right btn carousel-control team_columns_carousel_control_right adv_right" href="#adv_team_4_columns_carousel" role="button" data-slide="next"> <i class="fa fa-chevron-right"></i> <span class="sr-only">Next</span> </a> <div class="clearfit"></div> </div> </div> </div> </div>
/* Carousel Video Fonction */ .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_item_image{padding-top:60px;padding-bottom:25px} .team_columns_item_image img{width:100%; -webkit-filter:grayscale(90%); -moz-filter:grayscale(90%); -ms-filter:grayscale(90%); -o-filter:grayscale(90%); filter:grayscale(90%); -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:left} .team_columns_item_caption>hr{width:15%} .team_columns_item_caption h4{text-align:center} .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:f.team_columns_carousel_wrapper{padding:25px;overflow:hidden} .team_columns_carousel_control_left, .team_columns_carousel_control_right{position:relative;top:auto;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_item_image{padding-top:25px;padding-bottom:25px} .team_columns_item_image img{width:100%; -webkit-filter:grayscale(90%); -moz-filter:grayscale(90%); -ms-filter:grayscale(90%); -o-filter:grayscale(90%); filter:grayscale(90%); -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:left} .team_columns_item_caption>hr{width:15%} .team_columns_item_caption h4{text-align:center} .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:#aab2bd!important;font-size:14px} .team_columns_item_caption{color:171717;box-shadow:0px 3px 10px 3px rgba(0,0,0,0.2)}} .team_columns_item_caption>hr{border-top:2px solid #5d9cec} .team_columns_item_image img{box-shadow:0px -3px 10px 3px rgba(0,0,0,0.2)}

Related: See More


Questions / Comments: