슬라이드 이미지 문의

슬라이드 이미지 문의

QA

슬라이드 이미지 문의

본문

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

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

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

메인슬라이드 

<!--■■■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>

이 질문에 댓글 쓰기 :

답변 2

978180634_1713338355.0314.png

 

함수를 활용해보세요
 

onInitialized: function() {

   배너 슬라이드 로딩

}

<script>
  $(document).ready(function() {
    var owl = $('.main-carousel').owlCarousel({
      items: 1, //보여줄 이미지 갯수

이부분을
<script>
  $(document).onInitialized: function() {
    var owl = $('.main-carousel').owlCarousel({
      items: 1, //보여줄 이미지 갯수
이렇게 넣는건가요?

아마 순차적 로드 때문에 높이가 지정되어 있지 않아 그런것 같은데요

로딩 부분은 미니님이 말씀해주셨고

미리 해당 높이를 확보해두시면 레이아웃이 밀리는 현상이 없을것 같습니다.

css 부분에는 높이가 지정되어있는데요
.main-carousel .li{height:650px; background-size:cover; background-position:center; position:relative}
.main-carousel .jarallax { height: 650px;}
.main-carousel .img01 { background-image:url(../img/main_banner_img01.jpg);}
.main-carousel .img02 { background-image:url(../img/main_banner_img02.jpg);}

답변을 작성하시기 전에 로그인 해주세요.
전체 301
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT