js MySQLデータベースからのスライドショーは、画像をループしない

Question

私は、mysqlデータベースからの画像を表示するjsスライドショーを持っています。 Imの問題は、同じ外部キーを持つ複数のイメージがある場合、各外部キーのテーブルの最初のイメージを表示することだけです。

すべての情報を含むプロパティテーブルPropertyIDがプライマリキーです。 propertyimageテーブルには、イメージ名とパス、および外部キーとしてのPropertyIDが含まれています。 https://imgur.com/gallery/Ipdfw

このスクリーンショットでは、スライドショーを見ることができますが、最初の画像のみをループするだけです。 https://imgur.com/gallery/S1H2g

これは私がRobots jquery slideshowを好きに使っているスライドショーです。

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> 

Answer 1

それはあなたが使用しているコードのようになります。

// 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); 
}); 

を特にライン：var api = $s.eq(0).data('slides');は、配列内の最初のイメージのみを選択します。ループのたびにそれを再描画します。

// Create slideshow instances 
var $slideshow = $('.slideshow').slides(), 

// Access an instance API 
api = $slideshow.data('slides'); 

は、上記のコードを使用してスクリプトでいただきまし置き換えることで、この試してみて：

IロボットのようなjQueryのスライドショーのドキュメント

は hereプラグインを初期化するために、次の例を示しますました。