滑块内的目标图像

Question

>我在一些帮助下制作了一个自定义滑块..单击下一步按钮时，我需要一些帮助来定位图像。

我的代码笔在这里 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');
}