Отображение содержимого html поверх слайдера изображения jQuery

Question

Вот (несколько) рабочая версия страницы, над которой я работаю: https://www.the-car-club.com/walsergold/home.asp. Содержимое отображается правильно, но только контент на последнем слайде можно щелкнуть. Любые предложения о том, как сделать контент на первой парочке слайдами интерактивными?

HTML

<div class="square-slider"> 
<div class="slide slide1"> 
    <div class="content light"> 
     <h3>Recreating The Square Slider</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate 
     aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p> 
    </div> 
    <img src="images/asset1.png" alt="" class="asset" /> 
</div> 
<div class="slide slide2"> 
    <div class="content dark"> 
     <h3>Looks Amazing Right?</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate 
     aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p> 
    </div> 
    <img src="images/asset2.png" alt="" class="asset" /> 
</div> 
<div class="slide slide3 inverted"> 
    <div class="content light"> 
     <h3>And Simple To Use</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate 
     aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p> 
    </div> 
    <img src="images/asset3.png" alt="" class="asset" /> 
</div> 
<a href="#" class="prev">Prev</a> 
<a href="#" class="next">Next</a> 
<div class="overlay"></div> 

JavaScript (JQuery)

(function($){ 

$('.square-slider').each(function(){ 
    var slider = $(this), 
     slides = slider.find('.slide'), 
     currentSlide = 0; 

    slides.show(); 
    $(slides[currentSlide]).addClass('active'); 
    $('.next,.prev', slider).show(); 

    $('.prev', slider).on('click', function(){ 
     slides.removeClass('active'); 
     currentSlide--; 
     if(currentSlide < 0) currentSlide = slides.length - 1; 
     $(slides[currentSlide]).addClass('active'); 
     return false; 
    }); 

    $('.next', slider).on('click', function(){ 
     slides.removeClass('active'); 
     currentSlide++; 
     if(currentSlide > slides.length - 1) currentSlide = 0; 
     $(slides[currentSlide]).addClass('active'); 
     return false; 
    }); 
}); 

})(window.jQuery); 

Answer 1

Вы должны отобразить: Нет/Блок слайдов. В вашем текущем коде вы просто изменяете непрозрачность от 1 до 0 с активным классом. Таким образом, элемент все еще существует, и последний элемент (slide3) будет единственным, что можно щелкнуть. Удалите все ссылки на .show(), отредактируйте свой css и добавьте отображение: block to 'active'.

Answer 2

Чтобы сохранить доступность, попробуйте вместо {display: none}.

.slide {left: -999em;} 
.slide.active {left: 0;} 

Однако для предотвращения внезапных переходов вам необходимо включить эти стили в свой jQuery.