jQuery圖像滑塊無法正常工作

Question

您好，我正在使用此插件： https : //github.com/elclanrs/jq-tiles在我的網站標題中創建圖像滑塊。 我正在使用Asp.net MVC。 不幸的是，滑塊無法像演示一樣工作。 而不是顯示一行和一列，而是顯示了2列和x行的滑塊（x是我在滑塊中使用的圖像數。

這是我的索引cshtml代碼：

 @{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/jquery.tiles.min.css" rel="stylesheet" />

<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>

<script src="~/Scripts/jquery.tiles.js"></script>

<div class="slider">
    <img src="~/Content/img/img01.jpg" /> <!-- No description -->
    <img src="~/Content/img/img02.jpg" /> <!-- No description -->
    <img src="~/Content/img/img03.jpg" /> <!-- No description -->
    <img src="~/Content/img/img04.jpg" /> <!-- No description -->
    <img src="~/Content/img/img05.jpg" /> <!-- No description -->
    <img src="~/Content/img/img06.jpg" /> <!-- No description -->
    <img src="~/Content/img/img07.jpg" /> <!-- No description -->
    <img src="~/Content/img/img08.jpg" /> <!-- No description -->
    <img src="~/Content/img/img09.jpg" /> <!-- No description -->
    <img src="~/Content/img/img10.jpg" /> <!-- No description -->
</div>


<script>

    $('.slider').tilesSlider({
        x: 15, // # of tiles in x axis, 20 max
        y: 10, // # of tiles in y axis, 20 max
        effect: 'simple',
        fade: false, // fade images in addition to the tiles effect
        random: true, // animate tiles in random order
        reverse: false, // start animation from opposite direction
        backReverse: false, // reverse the animation when going back in the slideshow (useful for some effects)
        rewind: false, // reverse animation at a certain percentage in time
        auto: true, // Start the slideshow on load
        loop: true, // Start slideshow again when it finishes
        slideSpeed: 3500, // time between slides
        tileSpeed: 800, // time to clear all tiles
        cssSpeed: 300, // css3 transition speed [100,200,300,400,500,600,700,800,900,1000],
        nav: false, // Add navigation
        navWrap: null, // Add the navigation to an existing element
        bullets: false, // Show bullets, if false the show pagination with numbers
        thumbs: false, // Show thumbnails when hovering nav
        thumbSize: 25, // Thumbnail size (percentage of the original image)
        timer: false // show or hide the timer bar

    });



</script>

動畫和過渡效果很好，唯一的問題是圖像的重復，如圖所示：

Answer 1

嘗試將輪播項目包裝樣式設置為background-repeat: no-repeat