在flexslider中插入分区

Question

我有这个我定制的flexslider： JSFIDDLE：http://jsfiddle.net/t3sgbq5w/

更新：这是我迄今为止所能做到的，但我无法操纵宽度，因此我有两条平行的水平线，每条线上有5张图像 - ＆gt;的jsfiddle：http://jsfiddle.net/wyebbuLj/

现在我试图用分隔符替换滑块中3个图像的每个图像。得到这个形状：

然而，我在显示分隔线的两条水平线时遇到问题（每5张图像）。

分隔码： HTML：

<div id="item11" class="item"> <a name="item11"></a>
       <div class="content">
                <img id="image1" src="http://placehold.it/350x150" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>

Answer 1

嗨，这里的男人是小提琴：http://jsfiddle.net/u5qropc0/

行号可以变化。

在你的li元素中添加了这个wrraper：

.mosaic {
    height: 300px !important;
    width: 700px !important;
}

脚本：

var row_Number = 2;
var wSpaceing = 4; //10% precentX space
var hSpace = 2 //10% percent Y space

 $(".slides li .mosaic").each(function () {
            var img_kiddos = $(this).children("img");

            if (img_kiddos.length > 1 && img_kiddos.length >= row_Number) {

                kiddoW = $(this).width();

                kiddoWSpace = 0;
                kiddoH = $(this).height();

                kiddwHSpace = 0;
                if (img_kiddos.length >= row_Number) {
                    kiddoWSpace = $(this).width() * wSpaceing / 100 / (Math.ceil(img_kiddos.length / row_Number) - 1);

                    kiddoW = ($(this).width() - kiddoWSpace * (Math.ceil(img_kiddos.length / row_Number) - 1)) / Math.ceil(img_kiddos.length / row_Number);
                }
                if (row_Number > 1) {
                    kiddwHSpace = $(this).height() * hSpace / 100 / (row_Number - 1);

                    kiddoH = ($(this).height() - kiddwHSpace * (row_Number - 1)) / row_Number;
                }

                var idx = 0;

                img_kiddos.each(function () {

                    $(this).width(kiddoW);
                    $(this).css("float", "left");

                    if (idx != 0 && idx % Math.ceil(img_kiddos.length /row_Number) !=  0)
                    {
                        $(this).css("margin-left", kiddoWSpace + "px");    
                    }
                    $(this).height(kiddoH);
                    if (idx  >= Math.ceil(img_kiddos.length /row_Number))
                    {
                         $(this).css("margin-top", kiddwHSpace + "px"); 
                    }
                idx++;
                })
            }
        });