2017-10-30 16 views
0

こんにちは私のプラグインは:https://github.com/elclanrs/jq-tiles 私のウェブサイトのヘッダーにイメージスライダーを作成しています。私はAsp.net MVCを使用しています。 残念ながら、スライダはデモと同じように動作しません。 。代わりに、1行1列を示したのが2列にスライダーを示し、(xは私はスライダーで使用画像の数である行をxはJqueryのイメージスライダーが正常に動作しません

これは私のインデックス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> 

アニメーションやトランジションは、図に示すように、唯一の問題は、画像の繰り返しているだけで正常に動作:pic1

+0

としてカルーセル項目ラッパースタイルを設定してみてください先に行くとするのdevのツールを使用します。 rを書く方法を知っているスライダサイジングを修正するCSS。 – 3Dos

答えて

0

これは、CSSの問題ですbackground-repeat: no-repeat

+0

ありがとうございました:) –

関連する問題