1
홈 슬라이더를 만들기 위해 플렉스 슬라이더를 사용하고 있습니다.슬라이더 위로 넘김 캡션이 움직이지 않습니다 (크롬 만 해당)
캡션에 문제가 있습니다. 슬라이드를 변경하면 한 슬라이드에서 다른 슬라이드로 변경하는 동안이 아니라 슬라이드가 중지 된 후에 모든 슬라이드의 캡션이 나타납니다.
내 CSS 코드 :.front-page-slider{
position: relative;
width: 900px;
padding: 0;
margin-top: 28px;
}
.flexslider ul.slides > li{
position: relative;
}
.flex-caption{
position:absolute;
width: 235px;
height: 445px;
z-index: 50;
top: 25px;
right: 25px;
background-color: #CDCDCD;
}
html로
<div class="container front-page-slider">
<div class="flexslider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 1800%; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-900px, 0, 0);">
<li class="clone" aria-hidden="true" style="width: 900px; float: left; display: block;">
<a href="#" target="_blank"><img width="300" height="300" src="http://localhost/artech/wp-content/uploads/2013/10/radio-nippon-project.png" class="attachment-front-slider wp-post-image" alt="radio-nippon-project" draggable="false"></a>
<div class="flex-caption"><h1>Radio Rippon</h1></div>
</li>
/* More <li> with slides etc*/
</ul>
</div>
</div>
및
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".front-page-slider",
controlNav: false,
slideshow: false
});
또한 JS 코드 나는이
를 사용하고 (I 다음 화살표를 누르면)top: 25px;
bottom: 0;
left: 0;
만 오른쪽 방향을 잘 작동
나는 또한 행운과 오른쪽, 왼쪽 상단, 하단 다양한 조합을 시도했다.
미리 감사드립니다. 내 영어를 유감스럽게 생각합니다.
P.S : 제공된 CSS가 아닌 jquery.flexslider-min.js (Flexslider 2) 만 사용하고 있습니다.
업데이트 1 : 나는 Firefox (latet version)가 아닌 chrome (최신 버전)에서만 발생하는 것으로 나타났습니다. 심지어 IE10에서.