안녕하세요 저는이 플러그인을 사용하고 있습니다 : 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>
캐 러셀 항목 래퍼 스타일을 다음과 같이 설정하십시오. background-repeat: no-repeat
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다