Вот дизайн блока:
Мысли:
Ниже приведу код, который поможет разобраться в идее. Если найду время — доделаю его полностью. Сейчас приведенный код работает, в нем не все параметры заполнены, но для изучения идеи он подходит. На его основе я сделал отлично работающие слайдеры в проекте.
<html> <head> <title>My Now Amazing Webpage</title> <link rel="stylesheet" type="text/css" href="bxslider/jquery.bxslider.css"/> </head> <body> <div class="users_icons"> <div class="users_icons_slider"> <div class="users_icons_slide"> <div class="single_slide_group"> <div class="unit users_icons_slider_prev_slide"> < </div> <div class="unit"> 1 </div> <div class="unit"> 2 </div> <div class="unit"> 3 </div> <div class="unit"> 4 </div> <div class="unit"> 5 </div> <div class="unit" onclick="userslider.goToPrevSlide(); return false;"> 6 </div> <div class="unit"> 7 </div> <div class="unit"> 8 </div> <div class="unit"> 9 </div> <div class="unit"> 10 </div> <div class="unit"> 11 </div> <div class="unit"> 12 </div> <div class="unit"> 13 </div> <div class="unit users_icons_slider_next_slide"> > </div> </div> </div> <div class="users_icons_slide"> <div class="single_slide_group"> <div class="unit users_icons_slider_prev_slide"> < </div> <div class="unit" style="background: url(http://eurocoast-group.site.portfolio.mels.industries/wp-content/themes/EC/lp_about_us/images/pic-1.jpg) center center no-repeat; background-size: cover; "> 1</div> <div class="unit"> 3 </div> <div class="unit"> 4 </div> <div class="unit"> 5 </div> <div class="unit"> 6 </div> <div class="unit sliderlink" link_to_slide="0"> 7 </div> <div class="unit"> 8 </div> <div class="unit"> 9 </div> <div class="unit"> 10 </div> <div class="unit"> 11 </div> <div class="unit"> 12 </div> <div class="unit"> 13 </div> <div class="unit"> 14 </div> <div class="unit users_icons_slider_next_slide"> > </div> </div> </div> </div> </div> <div class="users_details"> <div class="users_details_slider"> <div class="users_details_slide"> <div class="single_user"> info 1 </div> </div> <div class="users_details_slide"> <div class="single_user"> info 2 </div> </div> <div class="users_details_slide"> <div class="single_user"> info 3 </div> </div> <div class="users_details_slide"> <div class="single_user"> info 4 </div> </div> <div class="users_details_slide"> <div class="single_user"> info 5 </div> </div> <div class="users_details_slide"> <div class="single_user"> info 6 </div> </div> <div class="users_details_slide"> <div class="single_user"> info 7 </div> </div> <div class="users_details_slide"> <div class="single_user"> info 8 </div> </div> <div class="users_details_slide"> <div class="single_user"> info 9 </div> </div> <div class="users_details_slide"> <div class="single_user"> info 10 </div> </div> </div> </div> <style> .users_icons { width: 630px; height: 380px; } .users_icons .users_icons_slide { width: 630px; height: 380px; } .users_icons .single_slide_group { width: 630px; height: 380px; } .users_icons .single_slide_group:after { clear: both; display: block; content: ''; } .users_icons .sliderlink { cursor: pointer; } .users_icons .unit { height: 100px; width: 100px; border-radius: 50%; float: left; line-height: 100px; text-align: center; margin: 5px 10px 10px 5px; } .users_icons .users_icons_slider_prev_slide, .users_icons .users_icons_slider_next_slide { background: white; -moz-box-shadow: 0 0 10px #b5b5b5; -webkit-box-shadow: 0 0 10px #b5b5b5; box-shadow: 0 0 10px #b5b5b5; } </style> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="/bxslider/jquery.bxslider.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ /* user images slider */ var users_icons_slider = $('.users_icons_slider').bxSlider({ pager: false, controls: false, mode: 'fade' }); /* user details slider */ var users_details_slider = $('.users_details_slider').bxSlider({ pager: false, controls: false, mode: 'fade', startSlide: 6 }); /* user images slider settings */ $('.users_icons_slider_prev_slide').click(function(){ users_icons_slider.goToPrevSlide(); users_details_slider.goToPrevSlide(); return false; }); $('.users_icons_slider_next_slide').click(function(){ users_icons_slider.goToNextSlide(); users_details_slider.goToNextSlide(); return false; }); $('.sliderlink').click(function(){ var nav_to_slide = $(this).attr('link_to_slide'); users_icons_slider.goToSlide(nav_to_slide); }); }); </script> </body> </html>
Вы должны войти на сайт.