Javascript 在flexslider中插入分割

我定制了这个flexslider： JSFIDDLE：

更新：这是我到目前为止所能做的，但我无法操纵宽度，因此我有两条平行的水平线，每行有5个图像-->JSFIDDLE:

现在我试着用一个分割器替换滑块中3个图像中的每个图像。要获得此形状，请执行以下操作：

然而，在显示分隔器的两条水平线（每5幅图像）时，我一直面临问题

除法器代码： HTML:

---

嗨，伙计，这是小提琴：

行号可以是可变的

在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++;
                })
            }
        });

---

嗨，伙计，这是小提琴：

行号可以是可变的

在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++;
                })
            }
        });

---

你想要的效果中的图像不是他们说的350x150，还是你想要的？我不明白为什么question@MCMastery不，我不喜欢占位符，我试图让它们在图像中具有相同的高度和宽度above@JamesKing我有一个有3个图像的滑块，我试图用3个分区来替换它（上面的代码）以上面图像的形式。你想要的效果中的图像不是他们说的350x150，还是你想要的？我不明白question@MCMastery不，我不喜欢占位符，我试图让它们在图像中具有相同的高度和宽度above@JamesKing我有一个滑块，有3个图像，我正试图用3个分区（上面的代码）来替换，以采用上面图像的形式。颤栗但分区现在与下面的幻灯片连接，无法分离？我不明白你想做什么，你想要一个以2x5格式显示所有图像的图库，当单击时，包含10个图像（每个幻灯片一个）的滑块将启动，或者你想要一个有3张幻灯片的滑块，每张幻灯片有10张图像2X5？当你在一张幻灯片和另一张幻灯片之间切换时，震动幻灯片看起来就像一张幻灯片。你所做的正是我想要的，但问题是JSFIDLE中的3张幻灯片看起来是连接的。颤栗但分隔器现在与下面的幻灯片连接，无法分离？我不明白你想做什么，你想要一个以2x5格式显示所有图像的图库，当单击时，包含10张图像的滑块（每张幻灯片一张）启动，或者你想要一个有3张幻灯片的滑块，每张幻灯片有10张图像2X5？当你在一张幻灯片和另一张幻灯片之间切换时，震动幻灯片看起来就像一张幻灯片。您所做的正是我想要的，但问题是JSFIDLE中的3个幻灯片看起来是相互连接的。