滑塊內的目標圖像

Question

我已經制作了一個自定義滑塊..有一點幫助..當點擊下一個按鈕時，我需要一些幫助來定位圖像。

我codepen在這裏 https://codepen.io/erayner/pen/LLBwOj

本質上講，當我點擊下一步按鈕我只是想隱藏的圖像之一。

//example of one of the slides 
<div class="row slide slide2"> 
     <div class="col-sm-6 slide2-container"> 
      <div class="slide2-container1"> 
       <h4>Burglar</h4> 
       <p>A burglar looks for an easy entry point</p> 
       <ul> 
        <li>Unlocked doors</li> 
        <li>Open windows</li> 
       </ul> 
       <p>To keep burglars out, effective security should</p> 
       <p><span>Discover</span> them on the edge of your property before they get in.</p> 
       <p><span>Enforce</span> existing security measures to maintain high security standards.</p> 
       <p><span>Harden</span> security tools to make entry difficult.</p> 
      </div> 
      <div class="slide2-container2"> 
       <h4>Cyber Hacker</h4> 
       <p>Cyber attackers look for easy entry points</p> 
       <ul> 
        <li>Social engineering/phishing to get an unsuspecting user to expose their network credentials or install malware</li> 
        <li>Exploiting a vulnerability in a web-based application or service</li> 
       </ul> 
       <p>To keep attackers out, effective security should</p> 
       <p><span>Discover</span> when malicious sites, applications or downloads are being accessed.</p> 
       <p><span>Enforce</span> existing security measures to block this activity.</p> 
       <p><span>Harden</span> security tools to make entry difficult before a connection is established.</p> 
      </div> 
     </div> 
     <div class="col-sm-6 slide2"> 
      <img src="http://ciscosecurity.co.nz/test-images/state-2.svg" class="svg svg1"> 
      <img src="http://ciscosecurity.co.nz/test-images/state-1.svg" class="svg"> 
     </div> 
    </div> 

//jquery im trying to get to hide '.active .svg(1,2,3)' 
jQuery('.arrow-left, .arrow-right').click(function (e) { 
    e.preventDefault(); 
    if ($('.active').hasClass('slide2')) { 
     $('.svg2').hide(); 
    } else { 
     $('.svg2').show(); 
    } 
    t($(this)); 
}); 

任何幫助非常感謝。 乾杯

編輯：更新的jQuery - >「上一個」按鈕無法使用代碼，但「下一個」不

Answer 1

瞄準這裏的正確元素的只是一個問題是，我想到一個例子是試圖做你想要什麼。

https://codepen.io/natedog213/pen/RgJZYd?editors=1111

if ($('.slide2').hasClass('current')){ 
    $('.slide2').children().last().css('top', '-300px'); 
}else{ 
    $('.slide2').children().last().css('top' , '100px'); 
}