如何使用中继器在第一张幻灯片上仅显示三列

Question

如何一次滑动至少三列？我必须尝试这样

中继器

<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height: 800px;overflow:hidden;">


           <asp:Repeater ID="rptDoctorHead" runat="server" 
                    onitemdatabound="rptDoctorHead_ItemDataBound" >
                <ItemTemplate>
                 <div style="background-color:black;">
                <div class="plan col-lg-4 col-md-4 col-sm-8 col-xs-12"> 
                    <h3 style="background:#3571fd;color:#fff;"><asp:Literal ID="ltDoctorName" runat="server" Text='<% #Eval("DrName") %>'></asp:Literal> 
                        <br> 
                    </br>
                        <br>
                    </br> 
                        <br> 
                    </br>                        
                    <asp:Label ID="lblDoctorCode" runat="server" Text='<% #Eval("DrCode") %>'></asp:Label></h3>

                    <asp:Repeater ID="rptDoctor1" runat="server">
                    <ItemTemplate>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 TokanFormat">
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 no-paddingLeft">
                                <asp:Image ID="imgPatient1" runat="server" CssClass="img-responsive img-circle" 
                                    ImageUrl='<%# Eval("PatientImage") == System.DBNull.Value?"images/default_large.jpg": "data:image/jpg;base64," + Convert.ToBase64String((byte[])Eval("PatientImage")) %>'/>
                            </div>
                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 no-padding">
                                <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12 no-paddingLeft">
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-left no-padding">
                                        <asp:Label ID="lblPatientName" runat="server" CssClass="patient-detail" Text='<% #Eval("PatientName") %>'></asp:Label>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-left no-padding">
                                       <span style="color:Red;">Reg No.</span> &nbsp;<asp:Label ID="lblRegNo" runat="server" CssClass="patient-detail" Text='<% #Eval("RegNo") %>'></asp:Label>
                                    </div>
                                </div>                                    
                                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-right no-paddingLeft" style="padding-top:15px; padding-bottom:15px;">
                                    <asp:Label ID="lblTokenNo" runat="server" CssClass="icon-" Text='<% #Eval("QueueNo")%>'></asp:Label>
                                </div>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
                </div>
                </div>
                </ItemTemplate>
            </asp:Repeater>

    </div>

CSS

<style>
    /* jssor slider loading skin spin css */
    .jssorl-009-spin img {
        animation-name: jssorl-009-spin;
        animation-duration: 1.6s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    @keyframes jssorl-009-spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    .jssorb052 .i {position:absolute;cursor:pointer;}
    .jssorb052 .i .b {fill:#000;fill-opacity:0.3;}
    .jssorb052 .i:hover .b {fill-opacity:.7;}
    .jssorb052 .iav .b {fill-opacity: 1;}
    .jssorb052 .i.idn {opacity:.3;}

    .jssora053 {display:block;position:absolute;cursor:pointer;}
    .jssora053 .a {fill:none;stroke:#fff;stroke-width:640;stroke-miterlimit:10;}
    .jssora053:hover {opacity:.8;}
    .jssora053.jssora053dn {opacity:.5;}
    .jssora053.jssora053ds {opacity:.3;pointer-events:none;}
</style>

脚本

<script type="text/javascript">
    jssor_1_slider_init = function () {

        var jssor_1_options = {
            $AutoPlay: 1,
            $Idle: 2000,
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
            },
            $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$
            }
        };

        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

        /*#region responsive code begin*/

        var MAX_WIDTH = 980;

        function ScaleSlider() {
            var containerElement = jssor_1_slider.$Elmt.parentNode;
            var containerWidth = containerElement.clientWidth;

            if (containerWidth) {

                var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

                jssor_1_slider.$ScaleWidth(expectedWidth);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }
        }

        ScaleSlider();

        $Jssor$.$AddEvent(window, "load", ScaleSlider);
        $Jssor$.$AddEvent(window, "resize", ScaleSlider);
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
        /*#endregion responsive code end*/
    };
</script>

现在这一次显示一个列，我想在3个幻灯片中逐个显示此详细信息，每个幻灯片有3个详细信息。我的代码每张幻灯片显示一个细节。每张幻灯片：1 2 3然后第二个4 5 6在同一行带滑块，