我发现了一些关于我找到的文字滑块内容的故障。当你在滑块的最后一张幻灯片上（或者当你点击下一个箭头时它总是触发）然后点击下一步你会看到第一张幻灯片，但是当你看到空白幻灯片然后它会闪烁时会出现。 / p>
不太确定发生了什么或为何会发生这种情况。当您单击上一个按钮时，幻灯片的效果应该类似。
$(document).ready(function() {
//rotation speed and timer
var speed = 99999;
var run = setInterval(rotate, speed);
var slides = $('.slide');
var container = $('#slides ul');
var elm = container.find(':first-child').prop("tagName");
var item_width = container.width();
var previous = 'prev'; //id of previous button
var next = 'next'; //id of next button
slides.width(item_width); //set the slides to the correct pixel width
container.parent().width(item_width);
container.width(slides.length * item_width); //set the slides container to the correct total width
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
//if user clicked on prev button
$('#buttons a').click(function(e) {
//slide the item
if (container.is(':animated')) {
return false;
}
if (e.target.id == previous) {
container.stop().animate({
'left': 0
}, 2000, function() {
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
});
}
if (e.target.id == next) {
container.stop().animate({
'left': item_width * -2
}, 2000, function() {
container.find(elm + ':last').after(container.find(elm + ':first'));
resetSlides();
});
}
//cancel the link behavior
return false;
});
//if mouse hover, pause the auto rotation, otherwise rotate it
container.parent().mouseenter(function() {
clearInterval(run);
}).mouseleave(function() {
run = setInterval(rotate, speed);
});
function resetSlides() {
//and adjust the container so current is in the frame
container.css({
'left': -1 * item_width
});
}
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin
function rotate() {
$('#next').click();
}#slides {
overflow: hidden;
position: relative;
width: 100%;
}
#slides ul {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#slides li {
width: 100%;
float: left;
text-align: center;
position: relative;
font-family: lato, sans-serif;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel">
<div class="btn-bar">
<div id="buttons"><a id="prev" href="#"><</a><a id="next" href="#">></a>
</div>
</div>
<div id="slides">
<ul>
<li class="MonthTreats slide" style="width: 736px;">
<div class="MonthHeader">
<h1>slide 1</h1>
</div>
<div class="Content">
<div class="MonthContent">
<div class="container">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu nisl rhoncus, mattis justo cursus, condimentum tortor. Pellentesque porttitor nulla eleifend, suscipit lorem vitae, efficitur ligula. Pellentesque tincidunt nec velit
sed feugiat. Integer ac dictum libero. Maecenas condimentum augue non leo bibendum, a commodo dolor eleifend. Curabitur faucibus dui sit amet purus ultricies, et blandit lacus euismod. Ut interdum rutrum dictum. Donec sit amet augue vel
nisi tempus pretium. Maecenas eget risus et justo cursus laoreet in at lorem. Vivamus et ligula ipsum. Nullam eget tortor porttitor, dapibus eros at, pretium augue. Donec pulvinar dignissim massa et interdum.</p>
<p>Praesent id neque quis lectus varius euismod. Donec rutrum lorem a condimentum pretium. Sed dictum nunc vitae turpis posuere, eu volutpat velit tincidunt. Pellentesque sodales, nisi et vehicula finibus, libero ipsum imperdiet est, quis venenatis
orci ligula at libero. Nam eleifend orci justo. Mauris enim turpis, iaculis quis sagittis a, vehicula non nisi. Vivamus eget interdum nisi. Vivamus in euismod nunc. Curabitur aliquam quam ac neque condimentum, nec consequat nisi mattis.
Curabitur ac urna eu augue semper porta sit amet sed orci. Suspendisse facilisis urna id ligula auctor vestibulum. Vivamus sed hendrerit ipsum, euismod imperdiet elit. Maecenas non iaculis nulla.</p>
</div>
</div>
</div>
</li>
<li class="MonthTreats slide" style="width: 736px;">
<div class="MonthHeader">
<h1>slide 2</h1>
</div>
<div class="Content">
<div class="MonthContent">
<div class="container">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu nisl rhoncus, mattis justo cursus, condimentum tortor. Pellentesque porttitor nulla eleifend, suscipit lorem vitae, efficitur ligula. Pellentesque tincidunt nec velit
sed feugiat. Integer ac dictum libero. Maecenas condimentum augue non leo bibendum, a commodo dolor eleifend. Curabitur faucibus dui sit amet purus ultricies, et blandit lacus euismod. Ut interdum rutrum dictum. Donec sit amet augue vel
nisi tempus pretium. Maecenas eget risus et justo cursus laoreet in at lorem. Vivamus et ligula ipsum. Nullam eget tortor porttitor, dapibus eros at, pretium augue. Donec pulvinar dignissim massa et interdum.</p>
<p>Praesent id neque quis lectus varius euismod. Donec rutrum lorem a condimentum pretium. Sed dictum nunc vitae turpis posuere, eu volutpat velit tincidunt. Pellentesque sodales, nisi et vehicula finibus, libero ipsum imperdiet est, quis venenatis
orci ligula at libero. Nam eleifend orci justo. Mauris enim turpis, iaculis quis sagittis a, vehicula non nisi. Vivamus eget interdum nisi. Vivamus in euismod nunc. Curabitur aliquam quam ac neque condimentum, nec consequat nisi mattis.
Curabitur ac urna eu augue semper porta sit amet sed orci. Suspendisse facilisis urna id ligula auctor vestibulum. Vivamus sed hendrerit ipsum, euismod imperdiet elit. Maecenas non iaculis nulla.</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>