New Pager Is Creating Every Time When I Click Next Control In Bxslider In Mvc

See more:

CSS

MVC

HTML5

hi,
i have created slider in my layout page in mvc.
i have used bxslider which has pager and prev/next controls in it.
i have used pager:false in slider.
on clicking next control, automatically pager is creating and is auto incrementing and duplicating everytime i click the next control....
please help...billions of thanks in advance....

$(document).ready(function () {
            $('.bxslider').bxSlider({
                mode: 'horizontal',
                useCSS: false,
                infiniteLoop: false,
                hideControlOnEnd: true,
                easing: 'easeOutElastic',
                speed: 1800,
                pager: false,
                auto: true,
                autoControls: true,
                autoStart:true,
                mode: 'fade',
                captions:false


            });

            $('.bx-prev, .bx-next').click(function (e) {
                var i = $(this).index();
                var slider = $('.bxslider').bxSlider();
                slider.goToSlide(i);
                slider.stopAuto();
                restart = setTimeout(function () {
                    slider.startAuto();
                }, 200);
                return false;
            });

<header>
       <div>
        <div class="bxslider-controls">
            <span id="bx-prev4"><a class="bx-next"></a></span>
            <span id="bx-next4"><a class="bx-prev"></a></span>
        </div>
       
        <ul class="bxslider">
         <li><img src="../../Images/Blue-Lines.jpg" alt="" style="width:1150" height="200" /></li>
         <li><img src="../../Images/special-olympics.gif" alt="" style="width:1150" height="200" /></li>
         <li><img src="../../Images/Kejriwal_Happy.gif" alt="" style="width:150" height="200" /></li>
         <li><img src="../../Images/modi.gif" alt="" style="width:150" height="200" /></li>
         <li><img src="../../Images/google-gameday.gif" alt="" style="width:1150" height="200" /></li>
         <li><img src="../../Images/noodles.gif" alt="" style="width:1150" height="200" /></li>
  
       </ul>
          
          
       </div>