Little content slider - can't join autostart and buttons to work together

Hi everybody
I've made a simply text rotator with autostart (time changing). And also I wanted to add buttons to give possibility to change it manually. But when I try to apply these buttons, there is a problem with correct display - after click current text is doubled. I can't figure out how to join it together to work

Here is my jQuery code:

1. function fadeContent() {   
   $(".text div:hidden:first").fadeIn(500).delay(2000).fadeOut(500, function() {
       $(this).appendTo($(this).parent());
       fadeContent();
     });
   }
   fadeContent();
   
   $('#text1').click(function(event) {
     $('.text div:nth-child(2)').fadeOut(500);
     $('.text div:nth-child(3)').fadeOut(500);
     $('.switcher strong').not(this).removeClass('active').mouseleave();
     $(this).addClass('active');
     $('.text div:nth-child(1)').delay(500).fadeIn(500);
   });
   
   $('#text2').click(function(event) {
     $('.text div:nth-child(1)').fadeOut(500);
     $('.text div:nth-child(3)').fadeOut(500);
     $('.switcher strong').not(this).removeClass('active').mouseleave();
     $(this).addClass('active');
     $('.text div:nth-child(2)').delay(500).fadeIn(500);
   });
   
   $('#text3').click(function(event) {
     $('.text div:nth-child(1)').fadeOut(500);
     $('.text div:nth-child(2)').fadeOut(500);
     $('.switcher strong').not(this).removeClass('active').mouseleave();
     $(this).addClass('active');
     $('.text div:nth-child(3)').delay(500).fadeIn(500);
   });

 
And here is demo JSFiddle: DEMO

Can U help me fix it? How should I make it to work together?

• Topic Participants

• kbwood.au