$(document).ready(function(){

     var i = 0 ;
	var colors = ["red","blue","green"];

	 showColors(colors);
    $("#addcolor").click(function(){
       var x = $(".color").val();
		colors.push(x);

        showColors(colors);
          $("#slider").css({
           "background-color": $(".slides1").css("background-color")

		  	});

         });


	     $(document).on("click",".deletebtn",function(event){
            event.preventDefault();
            var id = $(this).data("id");
            showColors(colors);

        })

		function showColors(colors){
			var output = "";
			for(var i = 0; i< colors.length; i++){
				output += "<div class='dom slides"+i+"'  data-color='"+colors[i]+"' style='background-color:" + colors[i] + "'><button data-id='"+i+"'class='deletebtn'>x</button></div>";
			}
			$("#colorcontainer").html(output);

		}

     var slideIndex = 1 ;
    $("#next").click(function(){

       showDivs(slideIndex+=1);


    });
    $("#previous").click(function(){

        showDivs(slideIndex-=1);
    });
    function showDivs (n){

        var slidesCount = $(".dom").length;
        if(n > slidesCount){
            slideIndex = 0;
        }
        if(n < 1){

        slideIndex = slidesCount.length-1;

        }
        var color = $(".slides"+slideIndex+"").css("background-color");
        console.log(color);
       $("#slider").css({
           "background-color": color



       })







    }


})