Как сделать изображения слайдера кликабельными по всей длине скоса?

Question

[CatherineGauss]

Имеется вот такой слайдер. Изображения по всей длине скоса должны прокликиваться. Но у меня выходит что кликнуть можно только на середину, и из-за этого движется только первый слайдер, а на остальные даже нажать нельзя.

$(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

[Виталий Киренков]

У вас проблема со стилями, так что не понимаю зачем теги яваскрипт и т.п., а так же код...

Для того чтоб кликалось нормально, каждый слайд сделайте дивом, со свойством skew - 2d трансформация. И повесьте ему оферфлоу хидден., а внутрь картинку и ссылку, то есть тэг А.

Comments

[CatherineGauss]

сделала div-ами, все равно так же картинки не кликаются в любом месте, а только по середине :с

[Виталий Киренков]

значит что-то не так сделала... У меня был подобный дизайн, получилось же =))

[CatherineGauss]

@DeLaVega а как внутрь А поместить картинку? типа теги А, а внутрь img c srс?

[Виталий Киренков]

@CatherineGauss - что вас тут смущает? Так веками уже делается =))

[CatherineGauss]

@DeLaVega и можно ссылку на сайт где вы это реализовывали? Хоть посмотрю как это в адекватной форме выглядеть должно

[Виталий Киренков]

@CatherineGauss Это была акция от Касперского, акция прошла, сайт закрыли.

[CatherineGauss]

@DeLaVega а исходного кода нигде не осталось? :с