Merhaba arkadaşlar. youtubedan çalıştığım videolarla zar zor basit bi içerik sayfalayıcısı yaptım. Onu bir sayfada id ya da sınıf seçici kullanarak 2 kez çağırmak istiyorum. bunun için yazdığım kodları nasıl bir hale getirmm gerekiyor acaba?
çağımak istediğim şekil bu:
$('#birinci').slider();
$('#ikinci').slider();
Burda slideri ben uydurdum. bunun gibi çalıştırmak istiyorum yazdığım kodları. kusura bakmayın sadece birkaç gündür jquery dersi alıyorum. Konu başlığını bile doğru yazdığımdan emin değilim.

        <script>
            $(document).ready(function () {
                $("li").hide();
                $("li:first").show();
                var lisayisi = $("li").length;
                $("span.pre").on('click', function() {
                    var active_li_index = $("li:visible").index();
                    if (active_li_index== 0) {
                        $("li").eq(active_li_index).hide('slide',{direction:'right'},150, function() {
                            $("li").eq(-1).show('slide',{direction:'left'},500);
                        })
                    }else{
                        $("li").eq(active_li_index).hide('slide',{direction:'right'},150, function (){
                            $("li").eq(active_li_index-1).show('slide',{direction:'left'},500);
                        })
                    }
                });
                $("span.next").on('click', function() {
                    var active_li_index = $("li:visible").index();
                    if (active_li_index== (lisayisi -1)) {
                        $("li").eq(active_li_index).hide('slide',{direction:'left'},100, function (){
                            $("li").eq(0).show('slide',{direction:'right'},500);
                        });
                    }else{
                        $("li").eq(active_li_index).hide('slide',{direction:'left'},100, function(){
                            $("li").eq(active_li_index+1).show('slide',{direction:'right'},500);        
                        });
                    }
                });
            });
        </script>

<div id="birinci">
<div class="home_prenext"><span class="pre" href="#">Geri</span><span class="next" href="#">ileri</span>
    <div class="home_players">
        <ul>
            <li><span>içerik 1</span></li>
            <li><span>içerik 2</span></li>
            <li><span>içerik 3</span></li>
            <li><span>içerik 4</span></li>
            <li><span>içerik 5</span></li>
            <li><span>içerik 6</span></li>
            <li><span>içerik 7</span></li>
            <li><span>içerik 8</span></li>
            <li><span>içerik 9</span></li>
        </ul>
    </div>
</div>
</div>
<div id="ikinci">
<div class="home_prenext"><span class="pre" href="#">Geri</span><span class="next" href="#">ileri</span>
    <div class="home_players">
        <ul>
            <li><span>içerik 1</span></li>
            <li><span>içerik 2</span></li>
            <li><span>içerik 3</span></li>
            <li><span>içerik 4</span></li>
            <li><span>içerik 5</span></li>
            <li><span>içerik 6</span></li>
            <li><span>içerik 7</span></li>
            <li><span>içerik 8</span></li>
            <li><span>içerik 9</span></li>
        </ul>
    </div>
</div>
</div>