jquery - FlexsliderフルスクリーンBGフェードインエフェクトはdivを非表示にします

Question

タッチが完璧に機能し、スワイプで画像が応答して変化するフェードイン効果から始めます-しかし-私がサイトを持っているdivコンテナは、画像の前ではなく背景に送信されます。

フレックススライダーをタッチ付きのフルスクリーン背景スライダーとして使用しようとしています。これが私のコードです。誰かが助けてくれたら。

よろしく、G

HTMLコード：

<div class="flexslider">
<ul class="slides">
<li>
  <img src="images/b3.jpg" />
</li>
<li>
  <img src="images/b4.jpg" />
</li>
<li>
  <img src="images/b6.jpg" />
</li>
</ul>
</div>

<div id="mainContainer2">

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT.

</div>
</body>

CSSコード：

/* CSS Document */
*{margin:0;paddding:0}

html, body {
font-size: 12px;
margin:0;
paddding:0;
}

#mainContainer2 {
margin: auto;
width: 1000px;
height: 655px;
position:relative;
}

/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider { width:100%; height: 100%; margin: 0; padding: 0; position:absolute;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide     the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; }
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}

    html .slides {height: 1%;}

/* No JavaScript Fallback /
/ If you are not using another script, such as Modernizr, make sure you

    include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0 0 60px; position:absolute; zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block;     background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30);     cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}