CSS 스타일이 필요하지 않습니다.

Question

내가 원하는 것은 내 페이지를 시작할 때 사용자가 버튼을 클릭 할 때까지 내 갤러리를 표시하지 않겠다는 것입니다.

배경이 열리지 만 이미지가 표시되지 않기 때문에 CSS에 문제가 있다고 생각합니다. 내 의견으로는 "디스플레이"와 함께 뭔가. 나는 많은 것을 시도했지만 내 문제를 해결할 수는 없다.

도움 주셔서 감사합니다.

CSS :

.fixed-bar{margin-top:43px;display:none} 
.ui-btn-right{margin-right:70px} 

.elastislide-list { 
    list-style-type: none; 
    display:inline; 
} 

.no-js .elastislide-list { 
    display: block; 
} 

.elastislide-carousel ul li { 
    min-width: 60px; /* minimum width of the image (min width + border) */ 
    } 

.elastislide-wrapper { 
    position: relative; 
    background-color: #fff; 
    margin: 0 auto; 
    min-height: 90px; 
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2); 
} 

.elastislide-wrapper.elastislide-loading { 
    background-image: url(../elastislide/loading.gif); 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

.elastislide-horizontal { 
    padding: 10px 40px; 
} 

.elastislide-vertical { 
    padding: 40px 10px; 
} 

.elastislide-carousel { 
    overflow:hidden; 
    position:relative; 
} 

.elastislide-carousel ul { 
    position: relative; 
    display: block; 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    -webkit-backface-visibility: hidden; 
    -webkit-transform: translateX(0px); 
    -moz-transform: translateX(0px); 
    -ms-transform: translateX(0px); 
    -o-transform: translateX(0px); 
    transform: translateX(0px); 
} 

.elastislide-horizontal ul { 
    white-space: nowrap; 
} 

.elastislide-carousel ul li { 
    margin: 0; 
    -webkit-backface-visibility: hidden; 
} 

.elastislide-horizontal ul li { 
    height: 100%; 
    display: inline-block; 
} 

.elastislide-vertical ul li { 
    display: block; 
} 

.elastislide-carousel ul li a { 
    display: inline-block; 
    width: 100%; 
} 

.elastislide-carousel ul li a img { 
    display: block; 
    border: 2px solid white; 
    max-width: 100%; 
} 

/* Navigation Arrows */ 

.elastislide-wrapper nav span { 
    position: absolute; 
    background: #ddd url(../elastislide/nav.png) no-repeat 4px 3px; 
    width: 23px; 
    height: 23px; 
    border-radius: 50%; 
    text-indent: -9000px; 
    cursor: pointer; 
    opacity: 0.8; 
} 

.elastislide-wrapper nav span:hover { 
    opacity: 1.0 
} 

.elastislide-horizontal nav span { 
    top: 50%; 
    left: 10px; 
    margin-top: -11px; 
} 

.elastislide-vertical nav span { 
    top: 10px; 
    left: 50%; 
    margin-left: -11px; 
    background-position: -17px 5px; 
} 

.elastislide-horizontal nav span.elastislide-next { 
    right: 10px; 
    left: auto; 
    background-position: 4px -17px; 
} 

.elastislide-vertical nav span.elastislide-next { 
    bottom: 10px; 
    top: auto; 
    background-position: -17px -18px; 
} 

HTML : 대상 선택기를 사용하여 보이지 않는 부분을 활성화하기 위해 코드에서 눈에 보이는 버튼이 없기 때문에

<div class="container demo-3"> 
    <div class="main"> 
    <div class="fixed-bar"> 
     <ul id="carousel" class="elastislide-list" > 
     <li><a href="#"><img src="elastislide/small/1.jpg" alt="image01" /></a></li> 
     <li><a href="#"><img src="elastislide/small/2.jpg" alt="image02" /></a></li> 
     <li><a href="#"><img src="elastislide/small/3.jpg" alt="image03" /></a></li> 

Answer 1

.fixed-bar{margin-top:43px;display:block;} 

문제가 존재한다. 흥미로운 예를 확인하십시오. http://jsfiddle.net/codepo8/wsD9L/

Answer 2

표시 할 설정이 고정 막대이므로 아무 것도 작동하지 않는 것 같습니다. 그것은 모든 아이들을 나타나지 않게해야합니다. 이 기능을 JSFiddle에서 사용할 수 있습니까? 그것은 모든 사람들이 답변을 시도하는 데 도움이되며 또한 프로세스에서 문제를 해결하는 데 도움이됩니다 (항상 작은 것으로 보이는 경우 나에게 일어납니다).