브라우저 창 크기를 조정하지 않으면 Flexslider가 올바르게 표시되지 않습니다.

Spry Tabbed Panel의 두 패널 안에 축소판 슬라이더가있는 두 개의 Flexslider가 있습니다. 페이지가로드되면 Safari에서 슬라이더/축소판 쌍이 미친 듯 보입니다. 이미지는 거대하고 메인 슬라이더에서 잘립니다. 미리보기 이미지에서 이미지는 거대하고 잘리고 서로 겹쳐서 표시됩니다. 그러나 브라우저 창 크기를 조정하면 즉시 모양과 크기가 올바르게 표시됩니다. 크롬, 파이어 폭스, 오페라, IE에서 슬라이더/썸네일 쌍은 흰색 선 두 개로 보이며 브라우저 창 크기를 조정할 때 마술처럼 올바른 형식으로 튀어 나오게됩니다. 이 문제를 어떻게 해결할 수 있습니까? 여기 브라우저 창 크기를 조정하지 않으면 Flexslider가 올바르게 표시되지 않습니다.

는 웹 페이지에 대한 링크입니다 : http://jmoon.net/Projects/PhoenixRising/PhoenixRising_P1.html

슬라이더/썸네일 쌍 처음 두 패널에 "연방 &위원회"와 "전송 갤러리"

감사합니다!

출처

2013-06-10 expansivelove

이 문제는 갤러리가 페이지로드시 숨겨져 있기 때문에 플러그인이 컨테이너의 너비와 높이를 제대로 표시 할 수 없기 때문에 발생합니다. 페이지로드시 플러그인을 초기화하는 대신 사용자가 탭을 클릭하면 초기화됩니다. 탭 창에 애니메이션이 있으면 애니메이션이 완료된 후 flexslider를 초기화해야합니다.

출처

2013-06-17 15:30:53 Malcr001

탭이 지정된 페이지에 대해 spryTabbedPanels를 사용하고 있습니다. 나는 API를 보았고, 애니메이션 기능을 가지고있는 것처럼 보이지 않으므로, 끝내면 애니메이션을 고칠 수있을 것이다. 캐 러셀을 초기화 할 수 있도록 패널이 표시되면 감지하는 방법이 필요합니다. – Malcr001

검토해 주셔서 감사합니다. 그래, 이건 내 경험과 지식 기반을 약간 넘어서서 Tweaky 녀석에게 해줄거야. 문제가 해결되면 다른 해결책을 게시 할 것입니다. 내 문제를 들여다 볼 시간을 내 주셔서 감사합니다. – expansivelove

해결책은 SpryTabbedPanel을 버리고 자바 스크립트 탭 패널을 사용하는 것입니다. – expansivelove

이 코드는 제가이 문제에 쉽게 사용하는 코드입니다. here에서

$(document).ready(function() { 
    $('.***-your class or id-***').click(function(){ 
     $(window).load(function() { 

      // The slider being synced must be initialized first 
      $('#carousel').flexslider({ 
      animation: "slide", 
      controlNav: false, 
      animationLoop: false, 
      slideshow: false, 
      itemWidth: 95, 
      itemMargin: 5, 
      asNavFor: '#slider' 
      }); 

      $('#slider').flexslider({ 
      animation: "slide", 
      controlNav: false, 
      animationLoop: false, 
      slideshow: false, 
      sync: "#carousel" 
      }); 
     }); 
     }); 
    });

출처

2016-06-16 11:56:12 Rajitha

또 다른 해결책 그냥 당신이 그것을 필요로 할 때 당신이 그것을 호출해야합니다 $(window).trigger('resize');

을 사용하는 것입니다 (즉 flexslider가 초기화 된 후).

Flexslider는 jQuery에 의존하지만, 관심이있는 경우 there은 비 jQuery 버전 window.dispatchEvent(new Event('resize'));입니다.

출처

2017-08-01 18:54:22 Julix

브라우저 창 크기를 조정하지 않으면 Flexslider가 올바르게 표시되지 않습니다.

답변

관련 문제