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

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

Мысли:

Считаю целесообразным выполнение задачи на базе 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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

<html>

<head>

<title>My Now Amazing Webpage</title>

</head>

<body>

</div>

</div>

info 1

</div>

info 2

</div>

info 3

</div>

info 4

</div>

info 5

</div>

info 6

</div>

info 7

</div>

info 8

</div>

info 9

</div>

info 10

</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>

$(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

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