swiper 질문입니다 ㅠ

    <div id="con1" class="tab-content current">
                <div class="swiper-container slider-main">
                    <ul class="swiper-wrapper">
                        <li class="swiper-slide">
                            <img src="#" alt="">
                        </li>
                        <li class="swiper-slide">
                            <img src="#" alt="">
                        </li>
                        <li class="swiper-slide">
                            <img src="#" alt="">
                        </li>
                    </ul>
                  <div class="swiper-pagination"></div>
                </div>
            </div>

            <div id="con2" class="tab-content">
                <div class="swiper-container slider-main2">
                    <ul class="swiper-wrapper">
                        <li class="swiper-slide">
                            <img src="#" alt="">
                        </li>
                        <li class="swiper-slide">
                            <img src="#" alt="">
                        </li>
                        <li class="swiper-slide">
                            <img src="#" alt="">
                        </li>
                    </ul>
                  <div class="swiper-pagination2"></div>
                </div>
            </div>

<script>
 $(function(){
    var mainslider = new Swiper('.slider-main', {
      pagination: {
        el: '.swiper-pagination',
        type: 'progressbar',
      },
    });
    var mainslider = new Swiper('.slider-main2', {
      pagination: {
        el: '.swiper-pagination2',
        type: 'progressbar',
      },
    });
 });

  </script>

progressbar 를이용하려고 하고,

슬라이드를 2개 넣었는데 

하나만 작동을 합니다 ㅠㅠ

이유가 뭘까요?ㅠㅠㅠ