スライダーでオーバーレイを作成するにはどうすればよいですか？

Question

私は滑らかなスライダーでそのような何かを作りたい：スライダーで

このオーバーレイは、ボタンをクリックした後に表示されます。私は滑らかなスライダの中央モードを使用する必要がありますと思う。色、幅などをスタイルする方法は分かっていますが、上記の構造を実装することはできません。

Answer 1

100% width and heightでdivを作成します。
これをabsolutely positioned relative to body/htmlにします。 このdivの内側にスライダーを置きます。 display noneをcssで、ユーザーがトリガーをクリックしたときにブロックを表示するか、 .show() in jqueryをクリックして非表示にすることができます。 アイデアはそこにあります。

あなたがする必要があるのは、これを達成するために、複数の方法は、私はライトボックスを使用して作成した例であり、あなたはここからアイデアを得ることができ、以下、がありますあなたのスライダー

Answer 2

を実装JSfiddle

をチェックすることですCSS

#pageOverLay { 
    background: #fff none repeat scroll 0 0; 
    margin-left: 43%; 
    margin-top: 10%; 
    position: absolute; 
    width: 500px; 
    z-index: 1001; 
    visibility:hidden; 
} 
#pageOverLay-shadow { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #000; 
    filter: alpha(opacity=75); 
    -moz-opacity: 0.75; 
    -khtml-opacity: 0.75; 
    opacity: 0.75; 
    z-index: 1000; 
    visibility: hidden; 
} 
#pageOverLayCloseBtn { 
    position:absolute; 
    top:0; 
    right:0; 
} 
.slick-slider { 
    margin: 30px auto 50px; 
} 
.slick-slider { 
    -moz-user-select: none; 
    box-sizing: border-box; 
    display: block; 
    position: relative; 
} 

jQueryの

$("#openLB").on("mousedown","",showLightBox); 

function showLightBox() { 
    $("#pageOverLay-shadow").css("visibility", "visible"); 
    $("#pageOverLay").css("visibility", "visible"); 

} 

$("#pageOverLayCloseBtn").on("mousedown","",pageOverLayClose); 

function pageOverLayClose() { 
    $("#pageOverLay-shadow").css("visibility", "hidden"); 
    $("#pageOverLay").css("visibility", "hidden"); 
} 
var disqus_shortname = 'slickcarousel'; 

(function() { 
    var dsq = document.createElement('script'); 
    dsq.type = 'text/javascript'; 
    dsq.async = true; 
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; 
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 
})(); 

HTML

<a id="openLB" href="#">Click Here to show lightbox</a> 
<div id="pageOverLay-shadow"></div> 
<div id="pageOverLay"> 
    <div id="pageOverLayCloseBtn"><a href="#" onclick="pageOverLayClose();">X</a> </div> 
    <h2>Images</h2> 
    <div class="slider fade"> 
    <div> 
     <div class="image"> <img src="http://wowslider.com/sliders/demo-94/data1/images/photo1427806208781b36531cb09ef.jpg" /> </div> 
    </div> 
    <div> 
     <div class="image"> <img src="http://wowslider.com/sliders/demo-94/data1/images/photo142855067022515f007f6f1ba.jpg" /> </div> 
    </div> 
    <div> 
     <div class="image"> <img src="http://wowslider.com/sliders/demo-94/data1/images/photo1428452788387375d846a8ab4.jpg" /> </div> 
    </div> 
    </div> 
</div>