Sekko

Witam wszystkich!

Jako, że jesteście mądrymi ludźmi proszę Was o pomoc w "uruchomieniu" slidera Nie znam się kompletnie na Javascripcie tylko html i css - męcze się z tym na różne sposoby już 2 dni . Proszę o pomoc w uruchomieniu autoprzewijania w sliderze. Metodę "clickania" wyszukałem tu na forum, ale nie moge jej w żaden sposób spiąć ze sliderem aby się przewijał. Jquery itp - podpięte

HTML slidera:

	<div class="slider">
	  <div class="arrows">
	    <a class="previous previous-slide" href="#"><</a>
	    <a class="next next-slide" href="#">></a>
	  </div>
	  <div class="slides">
			<div class="slide active picture1">
			<center>
				<div class="slide-content">
				<h2>Konfekcjonowanie</h2>
				<p>Clocks+ helps you break the barriers of space and time to get information for any city you like. You can search for and organise your favorite cities so that you can easily find out the correct local time.</p>
				<a target="_blank" href="https://itunes.apple.com/gb/app/clocks+/id937380413?mt=8">Check me out</a>
				</div>
				</center>
			</div>
			<div class="slide picture2">
			<center>
				<div class="slide-content">
				<h2>Timezones</h2>
				<p>Clocks+ helps you break the barriers of space and time to get information for any city you like. You can search for and organise your favorite cities so that you can easily find out the correct local time.</p>
				<a target="_blank" href="https://itunes.apple.com/gb/app/clocks+/id937380413?mt=8">Check me out</a>
				</div>
				</center>
			</div>
			<div class="slide picture3">
			<center>
				<div class="slide-content">
				<h2>Timezones</h2>
				<p>Clocks+ helps you break the barriers of space and time to get information for any city you like. You can search for and organise your favorite cities so that you can easily find out the correct local time.</p>
				<a target="_blank" href="https://itunes.apple.com/gb/app/clocks+/id937380413?mt=8">Check me out</a>
				</div>
				</center>
			</div>
		</div>
		<div class="bullets">
		</div>
	</div>

i obecny Javascript:

var $slider = $(".slider"), $bullets = $(".bullets");
		function calculateHeight(){
			var height = $(".slide.active").outerHeight();
			$slider.height(height);
		}

		$(window).resize(function() {
			calculateHeight();
		    clearTimeout($.data(this, 'resizeTimer'));
		});
		
		function resetSlides(){
			$(".slide.inactive").removeClass("inactiveRight").removeClass("inactiveLeft");
		}

		function gotoSlide($activeSlide, $slide, className){
			 $activeSlide.removeClass("active").addClass("inactive "+className);
			 $slide.removeClass("inactive").addClass("active");
			 calculateHeight();
			 resetBullets();
			 setTimeout(resetSlides, 300);
		}

		$(".next").on("click", function(){
			 var $activeSlide = $(".slide.active"),
				 $nextSlide = $activeSlide.next(".slide").length != 0 ? $activeSlide.next(".slide") : $(".slide:first-child");
				 console.log($nextSlide);
				 gotoSlide($activeSlide, $nextSlide, "inactiveLeft");
		});
		$(".previous").on("click",  function(){
			 var $activeSlide = $(".slide.active"),
				 $prevSlide = $activeSlide.prev(".slide").length != 0 ? $activeSlide.prev(".slide") : $(".slide:last-child");

				 gotoSlide($activeSlide, $prevSlide, "inactiveRight");
		});
		$(document).on("click", ".bullet", function(){
			if($(this).hasClass("active")){
				return;
			}
			var $activeSlide = $(".slide.active");
			var currentIndex = $activeSlide.index();
			var targetIndex = $(this).index();
			console.log(currentIndex, targetIndex);
			var $theSlide = $(".slide:nth-child("+(targetIndex+1)+")");
			gotoSlide($activeSlide, $theSlide, currentIndex > targetIndex ? "inactiveRight" : "inactiveLeft");
		})
		function addBullets(){
			var total = $(".slide").length, index = $(".slide.active").index();
			for (var i=0; i < total; i++){
				var $bullet = $("<div>").addClass("bullet");
				if(i==index){
					$bullet.addClass("active");	
				}
				$bullets.append($bullet);
			}
		}
		function resetBullets(){
			$(".bullet.active").removeClass("active");
			var index = $(".slide.active").index()+1;
			console.log(index);
			$(".bullet:nth-child("+index+")").addClass("active");
		}
		addBullets();
		calculateHeight();

    function zmianaslajdu() {
                counter++;
                showCurrent();
             }
                
            function zmianaslajdu2() {
                counter--;
                showCurrent();
             }
            
            interval = setInterval(zmianaslajdu, 5000);
            zmianaslajdu();
                
            // add click events to prev & next buttons 
            document.querySelector('.next').addEventListener('click', function() {
                counter++;
                showCurrent();
                clearInterval(interval);
                interval = setInterval(zmianaslajdu, 5000);
                zmianaslajdu();
              }, false);
     
            document.querySelector('.previous').addEventListener('click', function() {
                counter--;
                showCurrent();
                clearInterval(interval);
                interval = setInterval(zmianaslajdu2, 5000);
                zmianaslajdu2();
              }, false);