来自 MySQL 数据库的 js 幻灯片不循环图像

我有一个 js 幻灯片，显示来自 mysql 数据库的图像。我遇到的问题是当有多个图像具有相同的外键时，它只显示表中每个外键的第一个图像。

包含所有信息的属性表，PropertyID 是主键。propertyimage 表包含图像名称和路径以及作为外键的 PropertyID。https://imgur.com/gallery/Ipdfw

在此屏幕截图中，您可以看到幻灯片，但仅循环显示第一张图像。https://imgur.com/gallery/S1H2g

这是我使用我喜欢机器人 jquery 幻灯片的幻灯片。

C＃

protected void GetImages2()
{
    foreach (DataListItem item in DataList1.Items)
    {
        Repeater Repeater2 = ((Repeater)(item.FindControl("Repeater2")));
        Label Label8 = ((Label)(item.FindControl("Label8")));

        string constr = ConfigurationManager.ConnectionStrings["realestatedbAddConString"].ConnectionString;

        using (MySqlConnection con = new MySqlConnection(constr))
        {
            using (MySqlCommand cmd = new MySqlCommand("SELECT * FROM propertyimage WHERE PropertyID = '" + Label8.Text + "'", con))
            {
                using (MySqlDataAdapter sda = new MySqlDataAdapter(cmd))
                {
                    con.Open();

                    DataTable dt = new DataTable();

                    sda.Fill(dt);

                    Repeater2.DataSource = dt;

                    try {
                        Repeater2.DataBind();
                    }
                    catch (Exception e)
                    {
                        Console.WriteLine("An error occurred: '{0}'", e);
                    }

                    con.Close();

                }
            }

        }
    }
}

带有幻灯片的中继器位于数据列表中。

<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <br />
            <h2 class="text-center">PROPERTY ID</h2>
            <asp:Label Text='<%# Bind("PropertyID") %>' runat="server" ID="Label8" Style="margin-left: 50%; font-size: x-large; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: silver;" class="text-center" />
            <br />
            <br />
        </div>
    </div>
</div>

任何解决此问题的帮助将不胜感激，谢谢。

从浏览器中的检查元素编辑*幻灯片源

<div class="slideshow" data-transition="crossfade" data-loop="true" data-skip="false" data-pagination="true">
    <div style="position:relative;overflow:hidden;">
        <ul class="carousel">           
        <li class="slide" style="left: 0px; top: 0px; display: none;">
            <img src="ImagesUploaded/fire%20chape.jpg" style="height:526px;width:950px;">
        </li>   
        <li class="slide" style="left: 0px; top: 0px; display: none;">
            <img src="ImagesUploaded/ghost%20recon.png" style="height:526px;width:950px;">
        </li>   
        <li class="slide" style="left: 0px; top: 0px; display: none;">
            <img src="ImagesUploaded/Ghost-Rider-Wallpaper-photo.jpeg" style="height:526px;width:950px;">
        </li>   
        <li class="slide" style="">
            <img src="ImagesUploaded/goat-skull.jpg" style="height:526px;width:950px;">
        </li>               
        </ul>
    </div>
<ul class="slides-pagination"><li class=""><a href="#" data-slides="0">1</a></li><li class=""><a href="#" data-slides="1">2</a></li><li class=""><a href="#" data-slides="2">3</a></li><li class="selected"><a href="#" data-slides="3">4</a></li></ul></div>

幻灯片js：

! function (a, b) {
    "use strict";

    function c(b, c) {
        return this.target = b, this.$target = a(b), this.opts = a.extend({}, d, c, this.$target.data()), this.$carousel = this.$target.children(this.opts.carousel), this.$items = this.$carousel.children(this.opts.items), this.count = this.$items.length, this.scrollable = !0, this.count > 1 && this._init(), this
    }
    var d = {
        carousel: ".carousel",
        items: ".slide",
        slideWidth: !1,
        jumpQueue: !0,
        offset: 1,
        skip: !0,
        pagination: !0,
        auto: 6e3,
        autostop: !0,
        hoverPause: !1,
        loop: !1,
        nextText: "Next",
        previousText: "Previous",
        transition: "scroll",
        speed: 600,
        easing: "swing",
        visible: 1,
        onupdate: null,
        oncomplete: null
    };
    c.prototype._init = function () {
        var b = this;
        if (this.$wrapper = this.$carousel.wrap('<div style="position:relative;overflow:hidden;">').parent(), this.opts.pagination) {
            this.$pagination = a('<ul class="slides-pagination">');
            for (var c = 0, d = this.count; d > c; c++) this.$pagination.append('<li><a href="#" data-slides="' + c + '">' + (c + 1) + "</a></li>");
            this.$target.append(this.$pagination)
        }
        this.opts.skip && (this.$prev = a('<a href="#" class="slides-prev" data-slides="previous">' + this.opts.previousText + "</a>"), this.$next = a('<a href="#" class="slides-next" data-slides="next">' + this.opts.nextText + "</a>"), this.$target.append(this.$next, this.$prev)), (this.opts.pagination || this.opts.skip) && this.$target.on("click.slides", "[data-slides]", function (c) {
            var d = a(this);
            c.preventDefault(), d.hasClass("disabled") || b.to(d.data("slides"), !0)
        }), this.redraw(), this.opts.auto && (this.opts.hoverPause && this.$target.hover(function () {
            b.stopped || b.pause()
        }, function () {
            b.paused && b.play()
        }), this.play())
    }, c.prototype._oncomplete = function () {
        var a = this.current;
        this.current = this.future, this.opts.pagination && this.$pagination.children().removeClass("selected").slice(this.current, this.current + this.opts.visible).addClass("selected"), this.opts.skip && (this.hasNext() || this.opts.loop ? this.$next.removeClass("disabled") : this.$next.addClass("disabled"), this.hasPrevious() || this.opts.loop ? this.$prev.removeClass("disabled") : this.$prev.addClass("disabled")), this.opts.oncomplete && this._handleCallback(this.opts.oncomplete, [this.current, a])
    }, c.prototype._handleCallback = function (a, b) {
        a = "string" == typeof a ? window[a] : a, a.call && a.apply(this, b)
    }, c.prototype.hasNext = function () {
        return this.scrollable && this.current < this.count - 1
    }, c.prototype.hasPrevious = function () {
        return this.current > 0
    }, c.prototype.next = function () {
        this.to(this.current + 1)
    }, c.prototype.previous = function () {
        this.to(this.current - 1)
    }, c.prototype.to = function (a, b) {
        if (this.opts.jumpQueue) this.$items.stop(!0, !0);
        else if (this.$items.queue("fx").length) return;
        "next" === a ? a = this.current + 1 : "previous" === a && (a = this.current - 1), "number" != typeof a && (a = parseInt(a, 10)), a >= this.count ? a = this.opts.loop ? 0 : this.count - 1 : 0 > a && (a = this.opts.loop ? this.count - 1 : 0), b && !this.stopped && (this.opts.autostop ? this.stop() : this.paused || this.play()), a !== this.current && (this.future = a, this.transition.execute.call(this), this.opts.onupdate && this._handleCallback(this.opts.onupdate, [a]))
    }, c.prototype.redraw = function (a) {
        this.transition && this.transition.teardown.call(this), a && (this.opts.transition = a), this.current = b, this.transition = this.transitions[this.opts.transition].call(this), this.to(this.opts.offset - 1)
    }, c.prototype.play = function () {
        var a = this;
        clearInterval(this.timeout), this.paused = this.stopped = !1, this.timeout = setInterval(function () {
            a.to("next")
        }, this.opts.auto)
    }, c.prototype.pause = function () {
        this.paused = !0, clearInterval(this.timeout)
    }, c.prototype.stop = function () {
        this.stopped = !0, this.paused = !1, clearInterval(this.timeout)
    }, c.prototype.transitions = {
        crossfade: function () {
            var a = this;
            return this.$items.filter(function (b) {
                return b !== a.opts.offset - 1
            }).css("display", "none"), this.execute = function () {
                var b = this.$items.eq(this.future),
                    c = this.$items.eq(this.current).css({
                        position: "absolute",
                        left: 0,
                        top: 0
                    });
                b.fadeIn(this.opts.speed, this.opts.easing, function () {
                    a._oncomplete.call(a)
                }), c.fadeOut(this.opts.speed, this.opts.easing, function () {
                    c.css("position", "")
                })
            }, this.teardown = function () {
                this.$items.stop(!0, !0).removeAttr("style")
            }, this
        },
        scroll: function () {
            var a = this,
                b = 0;
            this.$items.css({
                "float": "left",
                width: this.opts.slideWidth
            });
            for (var c = 0; c < this.count; c++) b += this.$items.eq(c).outerWidth(!0);
            return this.$carousel.css({
                minWidth: b
            }), this.execute = function () {
                var b = this.$items.eq(this.future).position().left + this.$wrapper.scrollLeft(),
                    c = this.$carousel.width() - this.$wrapper.width(),
                    d = b >= c;
                (!d || this.scrollable) && this.$wrapper.animate({
                    scrollLeft: d ? c : b
                }, this.opts.speed, this.opts.easing, function () {
                    a._oncomplete.call(a)
                }), this.scrollable = !d
            }, this.teardown = function () {
                this.scrollable = !0, this.$items.removeAttr("style"), this.$carousel.stop(!0, !0).removeAttr("style")
            }, this
        }
    }, a.fn.slides = function (b) {
        return this.each(function () {
            a.data(this, "slides") || a.data(this, "slides", new c(this, b))
        })
    }, "function" == typeof define && define.amd ? define(function () {
        return c
    }) : "undefined" != typeof module && module.exports && (module.exports = c)
}(jQuery);




<script src="2/dist/slideshow.js"></script>
    <script>
        $(function () {
            // Create slideshow instances
            var $s = $('.slideshow').slides();

            // Access an instance API
            var api = $s.eq(0).data('slides');

            // Transition select
            $('select[name=transition]').on('change', function () {
                api.redraw(this.value);
            });



        });
    </script>