每个幻灯片的显示面板 (Slick.js)

Question

我想在第二个示例的每张幻灯片的第一个示例上应用显示面板效果。

这意味着如果我单击第一张幻灯片，将出现第一个面板。 第二张幻灯片，第二个面板。 等等。

换句话说，我想在单击活动幻灯片时从底部显示内容并隐藏幻灯片。

扩展面板示例https://codepen.io/jinzagon/pen/GRZNNaN

光滑的幻灯片光滑的幻灯片

扩展板 HTML

 // Reveal & Close Panels var revealPanel = function (buttonReveal, panel, buttonClose) { $(document).ready(function() { // Reveal panel $(buttonReveal).on('click', function() { $(panel).addClass('expanded'); console.log('hidefor-'+panel); $(".content").addClass('hidefor-'+panel.substr(1)); $(".ip").addClass('hidefor-'+panel.substr(1)); }); // Close panel $(buttonClose).on('click', function() { $(panel).removeClass('expanded'); $(".content").removeClass('hidefor-panel-up'); $(".ip").removeClass('hidefor-panel-up'); }); // ESC to close Panel $(document).bind("keydown", function(e) { if (e.keyCode == 27) { $(panel).removeClass('expanded'); $(".content").removeClass('hidefor-panel-up'); $(".ip").removeClass('hidefor-panel-up'); } }); }); } revealPanel('.reveal-up','.panel-up', '.close'); //revealPanel('.reveal-left','.panel-left', '.close'); $('#open').on('click', function() { $('.panel-up').hide();$('#1').show(); }); $('#close').on('click', function() { $('.panel-up').hide();$('#2').show(); }); // Reveal Panel with Shortcuts $(document).ready(function() { $(document).bind("keydown", function(e) { if (e.keyCode == 76) { console.log(e.keyCode); $('.panel-left').addClass('expanded'); } if (e.keyCode == 82) { $('.panel-up').hide();$('#1').show(); $('.panel-up').addClass('expanded'); $(".content").addClass('hidefor-panel-up'); $(".ip").addClass('hidefor-panel-up'); } }); });

 .content { padding: 50px; position: absolute; width: 90%; -webkit-transition: all.7s ease; transition: all.7s ease; transform: scale(1); opacity:1; bottom:10%; }.content.hidefor-panel-up { bottom: 20%; transform: scale(0.95); opacity:0; }.ip { display:block; width:100%; height:100%; object-fit: cover; position: absolute; -webkit-transition: all 1s ease; transition: all 1s ease; opacity:1; top:0; opacity:1; z-index:-5; position:absolute; }.ip.hidefor-panel-up { opacity:1; top: 10%; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } body { font-family: "Lucida Console", Monaco, monospace; background: #06113E; line-height: 1.5em; font-size: 15px; overflow: hidden; } code { border: 1px solid #dddddd; background: #efefef; border-radius: 3px; padding: 3px 5px; } h1, h2, h3 { margin-bottom: 0.5em; } ul { margin: 30px 40px; } li { margin: 5px 0; }.panel { padding: 20px; }.panel-content { position: relative; /*background: #efefef;*/ padding: 30px 50px; overflow-y: auto; height: 100%; }.panel-content.close { line-height: 15px; position: absolute; text-align: center; cursor: pointer; display: block; color: #ffffff; right: 5px; top: 5px; height: 15px; width: 15px; content: "✖"; }.panel-content.close:before { line-height: 15px; position: absolute; text-align: center; cursor: pointer; display: block; color: #ffffff; right: 5px; top: 5px; height: 15px; width: 15px; content: "✖"; }.panel-left { z-index: 10; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); background: #eeeeee; position: fixed; display: block; bottom: 0; top: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; left: -100%; width: 45%; }.panel-left.expanded { left: 0; }.panel-up { z-index: 10; position: fixed; display: block; bottom: 0; -webkit-transition: all.7s ease; transition: all 0.7s ease-out; bottom: -20%; width: 100%; }.panel-up.expanded { bottom: 0; }.reveal-left { float: left; }.reveal-up { float: right; }.nav { padding: 10px; margin: 0 auto; height: 10px; width: 90%; }.nav button { padding: 4px 6px; }.nav a { font-weight: bold; color: #222; }.bottom { background: yellow; display: block; position: fixed; width: 100%; bottom: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="nav" style="color:white;z-index:99999999;position:absolute;"> <a style="color:white;" href="#1" class="reveal-up" id='open'>First Panel</a> <br> <a style="color:white;" href="#2" class="reveal-up" id='close'>Second panel</a> </div> <div class="panel-up" id="1"> <div class="panel-content"> <div class="close"></div> <p style="margin-bottom: 30px; color:white;">FIRST PANEL</p> </div> </div> <div class="panel-up" id="2"> <div class="panel-content"> <div class="close"></div> <p style="margin-bottom: 30px; color:white;">SECOND PANEL</p> </div> </div> <img class="ip" style="opacity:1; z-index:-5; position:absolute; transform: scale(1.2)" src="https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixlib=rb-1.2.1&w=1000&q=80"> <div class="content" style="color:white"> <h2 style="margin-top:10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies aliquet quam quis faucibus. Maecenas at nibh hendrerit ex lobortis tristique. Ut hendrerit aliquet lacus, sed bibendum nisl dapibus non. Etiam eleifend eu ipsum at varius. Nam metus odio, placerat eu lacus quis, euismod finibus magna.</p> <ul> <li><code>ESC</code> - Close all windows</li> <li><code>R></code> - Open panel with pressing "R" </li> </ul> </div>