슬라이드 이미지 문의

메인에 두개의 슬라이드가 돌아가는데요 

이미지처럼 메인하고 배너 슬라이드인데요 새로고침을 하거나 바로들어가면 배너슬라이드가 먼저 잠깐나오다가 메인슬라이드가 나옵니다 순서대로 나오게 하는방법이 있을까요.. 

======================소스============

메인슬라이드 

<!--■■■visual_slider■■■-->
<div class="visual_slider">
  <div class="main-carousel owl-carousel">
    
    <div class="li img01">
        <div class="copy_area_wrap">
        </div>
    </div>
    
    <div class="li img02">
        <div class="copy_area_wrap">
        </div>
    </div>

  </div>
</div>
<script>
  $(document).ready(function() {
    var owl = $('.main-carousel').owlCarousel({
      items: 1, //보여줄 이미지 갯수
      nav: true,
      loop: true,
      autoplay: true,
      autoplayTimeout: 5000,
      navText: ["PREV", "NEXT"],
      dots: true,
      dotsData: false
    });

    $('.main-carousel .owl-dot').click(function() {
        owl.trigger('to.owl.carousel', [$(this).index(), 500]);
    })

  });
</script>
<!--■■■visual_slider■■■-->

배너 슬라이드 

    <div class="right aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">
      <ul class="slider owl-carousel">
        <li class="img01"></li>
        <li class="img02"></li>
      </ul>
    </div>
    <script>
      $(document).ready(function() {
        $('.slider').owlCarousel({
          items: 1, //보여줄 이미지 갯수
          nav: true,
          loop: true,
          autoplay: true,
          autoplayTimeout: 4000,
          navText: ["PREV", "NEXT"]
        });
      });
    </script>