How to make slider images clickable along the entire length of the bevel?

Question

JavaScript

There is such a slider. Images along the entire length of the bevel should be clickable. But it turns out that you can only click on the middle, and because of this, only the first slider moves, and you can’t even click on the rest.

$(document).ready(function() {

    var itemList, item, className, thisItem, newOrder, itemDesc, desc;

    itemList  = $('#itemlist');
    item      = itemList.children('img');

    itemDesc  = $('#itemdescription');
    desc      = itemDesc.children('span');


    item.each(function(index) {

        className  = 'item-' + index;

        $(this).addClass(className).attr('data-order', index);

    });

    desc.filter(':first-child').fadeIn();

   
    item.on('click', function() {

        thisItem  = $(this);
        thisOrder = parseInt(thisItem.attr('data-order')) - 1;

        thisItem.addClass('show');

        
        item.on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function() {

            thisItem.removeClass().addClass('item-0').attr('data-order', '0');


            
            desc.hide();
            desc.filter('[data-for=' + thisItem.attr('id') + ']' ).fadeIn('fast');
        });



     
        window.setTimeout(function () {

            for(var i = thisOrder; i >= 0; i--) {

                
                movedItem = item.filter('[data-order=' + i + ']');
                newOrder  = parseInt(movedItem.attr('data-order')) + 1;
                className = 'item-' + newOrder;

                
                movedItem.removeClass().addClass('transition ' + className).attr('data-order', newOrder);

                
                item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() {
                    item.removeClass('transition');
                });
            }
        }, 500);
    });
});

Answer 1

You have a problem with styles, so I don’t understand why javascript tags, etc., as well as the code ...
In order to click normally, make each slide a div, with the skew property - 2d transformation. And hang him an offer hidden., And inside the picture and a link, that is, tag A.