화살표를 클릭하여 li 항목을 좌우로 슬라이드시키는 jQuery 함수를 얻으려고합니다. TinyCarousel.js라는 jQuery 스크립트를 사용하고 있습니다. 제대로 작동하는 동안 마지막 li 항목이 첫 번째 위치에 올 때까지 오른쪽으로 계속 스크롤합니다. 내가 현재 가지고있는 것은 메인 슬라이더 아래의 "게임 현재 테스트 또는 해제 섹션"에있는 here으로 볼 수 있습니다. 오른쪽으로 끝까지 스크롤하면 문제를 알 수 있습니다. jQuery 슬라이더가 끝날 때 동적으로 멈추거나 계속하려면 li 항목을 추가하십시오.
그것이 가능하려면 다음 중 하나를 ...1)는 창의 오른쪽에 모든 방법을 보여주는되면 마지막으로 리 항목이 중지 만들기 위해 jQuery를 변경? 브라우저 창 크기에 상대적이어야하고 창 크기에 부분적으로 하나의 항목 만 표시되도록하는 것이 좋습니다. 나는 또한 내가 PHP 내에서 할 수있는 리튬 항목의 양을 알아야 할 것입니다 알아요.
2) 또는 슬라이더가 끝나는 것처럼 보이지 않도록 li를 계속 추가하십시오. 반복해서 반복하면됩니까? 나는 그들이 화면을 벗어난 경우에도 li 항목을 계속 추가하고 제거해야한다고 생각합니다.
문제를 표시하기 위해 jFiddle을 만들려고했습니다. 하지만 필자가 필요로하는 것과 더 가까운 jFiddle에서 모두 다른 것을 함께하고있다. 그것은 어느 시점에서 오른쪽으로 움직이는 것을 멈추는 것처럼 보입니다. 그러나 마지막 전체가 완전히 표시 될 필요는 없습니다. 라이브 사이트에서 멈추는 것과 다르게 무엇을하고 있습니까?
도움을 주시면 대단히 감사하겠습니다. 나는 검색을했고 this을 찾았지만이 상황에서는 작동하지 않았다. 감사합니다. 내가 jQuery를 1.10.2, PHP 5.4, TinyCarousel.js 버전 여기에 1.9
사용하고있다
내가 현재 가지고있는 것입니다. CSS의
.PrevArrow {
width: 5%;
float: left;
margin-top: 20px;
}
.NextArrow {
width: 5%;
float: right;
margin-top: 20px;
}
.ListImage img {
margin-top: 5px;
margin-bottom: 10px;
}
#slider-code .viewport {
float: left;
width:90%;
height: 95px;
overflow: hidden;
position: relative;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
#slider-code .buttons {
display: block;
margin: 0px 10px 0 10px;
float: left;
}
#TickHead {
margin-top: 3px;
}
#slider-code .prev {
margin: 0 10px 0 10px;
}
#slider-code .next {
margin: 0 10px 0 10px;
}
#slider-code .disable {
visibility: hidden;
}
#slider-code .overview {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
left: 0;
top: 0;
}
.TestingTickerText {
vertical-align: top;
color: #666666;
font-family:'Open Sans', "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 10px;
}
#slider-code .overview li {
float: left;
margin: 0 20px 0 0;
padding: 1px;
height: 65px;
width: 105px;
left: 0;
}
#slider-code .pager {
overflow:hidden;
list-style: none;
clear: both;
margin: 0 0 0 45px;
}
#slider-code .pager li {
float: left;
}
#slider-code .pagenum {
text-decoration: none;
text-align: center;
padding: 5px;
color: #555555;
font-size: 14px;
font-weight: bold;
display: block;
}
#slider-code .active {
color: #fff;
}
<div id="slider-code">
<div class="PrevArrow">
<a href="#" class="prev"><img src="Link to Left Arrow"/></a>
</div>
<div class="viewport">
<ul class="overview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
etc...
</ul>
</div>
<div class="NextArrow">
<a href="#" class="next"><img src="Link to Right Arrow"/></a>
</div>';
<center>
<span id="TickHead" class="cat_bg2">Games Currently Testing or Releasing</span>
</center>
</div>
JQuery와
(function ($) {
$(document).ready(function(){
$('#slider-code').tinycarousel({ display: 1});
});
}(jQuery));