Same javascript twice cause the conflict on the slider

Question

I'm trying to make an image slider and text slider on same page using same JavaScript. But some how it doesn't work properly as expected. I research some about this but only thing I found is to use no-conflict but it doesn't work either. When I exclude number-1 JavaScript code the number-2 slider works properly but when I include number 1 slider number 2 doesn't work properly. Is there a way I can avoid conflicting each other ? if so then how can I do this ? Here is my JavaScript code:

        <script> //number-2
            sliderInt = 1;
            sliderNext = 2;

            $(document).ready(function() {
                $('#slider > img#1').fadeIn(150);
                startSlider();
            })

            function startSlider() {

                count = $('#slider > img').size();

                loop = setInterval(function() {

                    if(sliderNext > count) {
                        sliderInt = 1;
                        sliderNext = 1;
                    }

                    $('#slider > img').fadeOut(150);
                    $('#slider > img#' + sliderNext).fadeIn(150);

                    sliderInt = sliderNext;
                    sliderNext = sliderNext + 1;
                }, 3000);

            }

            function prev() {
                newSlide = sliderInt - 1;
                showSlide(newSlide);
            }

            function next() {
                newSlide = sliderInt + 1;
                showSlide(newSlide);
            }

            function stopLoop() {
                window.clearInterval(loop);
            }

            function showSlide(id) {

                stopLoop();

                if(id > count) {
                    id = 1;
                }else if(id < 1) {
                    id = count;
                }

                $('#slider > img').fadeOut(150);
                $('#slider > img#' + id).fadeIn(150);

                sliderInt = id;
                sliderNext = id + 1;

                startSlider();

            }

            $('#slider > img').hover(

                function() {
                    stopLoop();
                },
                function() {
                    startSlider();
                }

                // In the End of the line don't put comma ','

            );

        </script>

        <script> //number-1

            textsliderInt = 1;
            textsliderNext = 2;

            $(document).ready(function() {
                $('#slider_text > p#1').fadeIn(300)
                textsliderStart();
            })

            function textsliderStart() {
                count = $('#slider_text > p').size();

                loop = setInterval(function() {

                    if(textsliderNext > count) {
                        textsliderInt = 1;
                        textsliderNext = 1;
                    }

                    $('#slider_text > p').fadeOut(300);

                    $('#slider_text > p#' + textsliderNext).fadeIn(300);

                    textsliderInt = textsliderNext;
                    textsliderNext = textsliderNext + 1;
                }, 3000)
            }
        </script>

Answer 1

Put var in front of count = $('#slider_text > p').size(); and loop = setInterval(function() {

When you dont use var you declare count and loop at the global scope