[英]How to Create Testimonial Slider
I have to create a slider plugin for testimonial to show in a webpage, the testimonial item should be visible one at a time , I have created basic blocks in HTML and jquery.I used setTimeOut function to hide and show testimonial item inside each function, but it not works properly. 我必须创建一个用于见证的滑动插件才能显示在网页中, 一次可以看到一个见证项,我已经在HTML和jquery中创建了基本块。我使用setTimeOut函数在每个函数中隐藏和显示了见证项,但它不能正常工作。 I am pasting my code here
我在这里粘贴我的代码
** HTML** ** HTML **
<div class="col-md-6 testimonial-wrapper">
<div class="testimonial-item" style="display: block; opacity: 0.872447;">
<h3>
Testimonials</h3>
<hr style="height: 4px; border: none; color: #333; background-color: #7BC83A;; width: 70px;
margin-left: 0;">
<h4>
Shaf/ Seo</h4>
<blockquote>
<p>Hi
</p>
</blockquote>
</div>
<div class="testimonial-item" style="display: block; opacity: 1;">
<h3>
Testimonials</h3>
<hr style="height: 4px; border: none; color: #333; background-color: #7BC83A;; width: 70px;
margin-left: 0;">
<h4>
Shaje/ As</h4>
<blockquote>
<p>Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text
</p>
</blockquote>
</div>
</div>
JQUERY JQUERY
$(document).ready(function () {
var wrapper = $(".testimonial-wrapper");
var testimonialItem = $(".testimonial-wrapper .testimonial-item");
var timeOut = 10000;
var lengthOfItem = testimonialItem.length;
var counter = 0;
startIteration();
function startIteration() {
testimonialItem.each(function () {
var current = $(this);
setInterval(startTestimonialSlider(current), timeOut);
counter++;
debugger;
if (counter == lengthOfItem) {
counter = 0;
debugger;
startIteration();
}
});
}
function startTestimonialSlider(itemToDisplay) {
itemToDisplay.prev().fadeOut();
itemToDisplay.fadeIn();
}
});
This is not working properly. 这不能正常工作。
i think this is what you wanted to do right ? 我想这就是你想做的对吗?
$(document).ready(function () { var testimonialItem = $(".testimonial-wrapper .testimonial-item"); var lengthOfItem = testimonialItem.length; var counter = 0; testimonialItem.hide(); setTimeout(function(){ startIteration(counter); }, 1000); function startIteration(counter) { testimonialItem.eq(counter).fadeIn('slow', function() { if(counter<=lengthOfItem){ setTimeout(function(){ testimonialItem.fadeOut('slow',function(){ if (counter == lengthOfItem) { counter = 0; }else{ counter++;} setTimeout(function(){ startIteration(counter);}, 500); });}, 2000); } }); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-6 testimonial-wrapper"> <div class="testimonial-item" style="display: block; opacity: 0.872447;"> <h3>Testimonials</h3> <hr style="height: 4px; border: none; color: #333; background-color: #7BC83A;; width: 70px;margin-left: 0;"> <h4>Shaf/ Seo</h4> <blockquote> <p>Hi</p> </blockquote> </div> <div class="testimonial-item" style="display: block; opacity: 1;"> <h3> Testimonials</h3> <hr style="height: 4px; border: none; color: #333; background-color: #7BC83A;; width: 70px; margin-left: 0;"> <h4> Shaje/ As</h4> <blockquote> <p>Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text</p> </blockquote> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.