HELP YOU HAVE A PROBLEM IN MY SLIDER

HELP YOU HAVE A PROBLEM IN MY SLIDER

THİS HTML KOD  <div class = "kayar kap1">
    <Style>
        #slider {positon: göreli; kenar boşluğu: 0 otomatik; genişlik:% 100; yükseklik: 250 piksel; taşma: gizli;}
        #slider img {genişlik:% 100; yükseklik: 250 piksel;}
        #slider li {list-style: none;}
        .sliderbutton {position: göreli; kenar boşluğu: 0 otomatik; genişlik: 120px; kenar boşluğu üstü: -25px;}
        .sliderbutton li {list-stili: yok; dolgu: 5px; arka plan: kırmızı; float: sol; marj-sağ: 10px; border-radius: 10px;}
        .sliderleft {imleç: işaretçi; arka plan: RGBA (0,0,0,0.2); konumu: mutlak; en: 50 piksel, kalınlık: 250 piksel, çizgi-yüksekliği: 270px;}
        .sliderright {kenar sol: 652px; imleci: işaretçi; arka plan: RGBA (0,0,0,0.2); konumu: mutlak; en: 50 piksel, kalınlık: 250 piksel, çizgi-yüksekliği: 270px;}
    </ Style>
    <Script>
        $ (Document) .ready (function () {
            var kaydırıcı = 0;
            $('.sliderbutton li:first').css('background','yellow');
            $.slider = function(toplam){
                $('#slider li').hide();
                if(slider < toplam-1)
                {
                    slider++;
                    $('.sliderbutton li').css('background','red');
                    $('.sliderbutton li:eq('+slider+')').css('background','yellow');
                    $('#slider li:eq('+slider+')').fadeIn("fast");
                }else if(slider < 0){
                    slider = toplam-1;
                    $('.sliderbutton li').css('background','red');
                    $('.sliderbutton li:eq('+slider+')').css('background','yellow');
                    $('#slider li:eq('+slider+')').fadeIn("fast");
                }else{
                    $('#slider li:first').fadeIn("fast");
                    slider=0;
                    $('.sliderbutton li').css('background','red');
                    $('.sliderbutton li:eq('+slider+')').css('background','yellow');
                }
            }
            var lenghtli = $('#slider li').length;
            var interval = setInterval('$.slider('+lenghtli+')',3000);
            $('#slider').hover(function(){
                interval = clearInterval(interval);
            },function(){
                interval = setInterval('$.slider('+lenghtli+')',3000);
            })
            $('.sliderbutton li').click(function(){
                $('.sliderbutton li').css('background','red');
                $(this).css('background','yellow');
                interval = clearInterval(interval);
               var indis = $(this).index();
                $('#slider li').hide();
                $('#slider li:eq('+indis+')').fadeIn("fast");
                slider = indis;
                interval = setInterval('$.slider('+lenghtli+')',3000);
            });
            $('.sliderleft').click(function () {
                slider--;
                $('.sliderbutton li').css('background','red');
                if(slider < 0)
                {
                    $('.sliderbutton li:last').css('background','yellow');
                    slider = lenghtli-1;
                }else{
                    $('.sliderbutton li:eq('+slider+')').css('background','yellow');
                }
                $('#slider li').hide();
                $('#slider li:eq('+slider+')').fadeIn("fast");
            });
            $('.sliderright').click(function () {
                slider++;
                $('.sliderbutton li').css('background','red');
                if(slider > lenghtli-1)
                {
                    $('.sliderbutton li:first').css('background','yellow');
                    slider = 0;
                }else{
                    $('.sliderbutton li:eq('+slider+')').css('background','yellow');
                }
                $('#slider li').hide();
                $('#slider li:eq('+slider+')').fadeIn("fast");
            });
        });
    </ Script>
</ Head>
<Body>


<div id = "kayar kapak">
<div class = "font1">
    <div class = "sliderleft"> SOL </ div>
    <div class = "sliderright"> SAĞ </ div>
  </ Div>

   <li> <img src = "! Anasayfa / cipsi.jpg" alt = ""> </a> </ li>
   <li> <img src = "! Anasayfa / 1.jpeg" width = "100px" alt = ""> </ li>
   <li> <img src = "! Anasayfa / kirmiz.jpg" alt = ""> </ li>
   <li> <img src = "! Anasayfa / pancar.jpg" alt = ""> </ li>
  </ Div>

<div class = "kayar kapak düğmesi">
    <Li> </ li>
    <Li> </ li>
    <Li> </ li>
    <Li> </ li>
</ Div>
                 
</ Div>

CSS KOD:

#slider {genişlik: otomatik; yükseklik: 400 piksel; taşma: gizlenmiş;}

 #slider li {list-style: none;}
.sliderbutton {position: göreli; kenar boşluğu: 0 otomatik; genişlik: 120px; kenar boşluğu üstü: -25px;}
.sliderbutton li {list-stili: yok; dolgu: 5px; arka plan: kırmızı; float: sol; marj-sağ: 10px; border-radius: 10px;}

.sliderleft {imleç: işaretçi; arka plan: RGBA (0,0,0,0.2); konumu: mutlak; en: 50 piksel, kalınlık: 400 piksel, çizgi-yüksekliği: 400 piksel;}
.sliderright {kenar sol: 900px; imleci: işaretçi; arka plan: RGBA (0,0,0,0.2); konumu: mutlak; en: 50 piksel, kalınlık: 400 piksel, çizgi-yüksekliği: 400 piksel;}