Связанный слайдер в котором данные двигаются в три строки

Вот дизайн блока:

Мысли:

Считаю целесообразным выполнение задачи на базе bx-слайдера.
Для решения будет создано 2 связанных bx-слайдера. Первый слайдер – для галереи лиц команды профессионалов, второй слайдер – с подробной информацией о них.
Каждый слайд галереи лиц будет состоять из 5х3 элементов. Я не стану включать одновременное отображение 13слайдов (+2 стрелочки), и заморачиваться с тем, чтобы слайды сдвигались по 1 шт змейкой. Это трудоемко и не рационально.
Итого, у меня в каждом слайдере будет количество слайдов соответствующее количеству лиц в галерее. Этот вывод можно сделать исходя из того, что мне надо вывести 1 раз данные о каждом человеке.

Ниже приведу код, который поможет разобраться в идее. Если найду время – доделаю его полностью. Сейчас приведенный код работает, в нем не все параметры заполнены, но для изучения идеи он подходит. На его основе я сделал отлично работающие слайдеры в проекте.

<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(https://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>

Комментарии к статье

Добавьте свой комментарий - оставьте след в блоге!

SAPID INFO

Связанный слайдер в котором данные двигаются в три строки