CODEWITHSUNDEEP
jqueryimageslider
Travis
Travis

Reputation: 53

Displaying html content over a jQuery image slider

Here is a (somewhat) working version of the page I am working on: https://www.the-car-club.com/walsergold/home.asp . The content displays properly, but only content on the last slide is clickable. Any suggestions on how to make content on the first couple slides interactive?

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);

Upvotes: 0

Views: 387

Answers (2)

isherwood
isherwood

Reputation: 61083

To maintain accessibility, try this instead of {display: none}. 

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

You'll need to incorporate those styles into your jQuery, however, to prevent sudden transitions.

Upvotes: 0

Syon
Syon

Reputation: 1614

You need to display:None/Block the slides. In your current code, you're just changing the opacity from 1 to 0 with class 'active'. So the element is still there, and the last element (slide3) will be the only thing that's clickable. Remove all references to .show(), edit your css and add display:block to 'active'.

Upvotes: 2

Related Questions