Как сделать так, чтобы стрелка влево в карусели отображалась только при нажатии правой кнопки? ⇐ Html

[Anonymous]

Я делаю слайд-шоу с элементами, которые я хочу, чтобы стрелка влево отображалась при нажатии стрелки вправо. означает, что когда мы переходим к следующему элементу, стрелка влево позволяет вернуться назад. Вот мой код:
http://codepen.io/xhepigerta/pen/NNOKaX

Код: Выделить всё

$(document).ready(function() {
//move the last list item before the first item.  The purpose of this is if the user clicks to slide left he will be able to see the last item.
$('#category li:first').before($('#category li:last'));

//when user clicks the image for sliding right
$('#right_scroll').click(function() {

//get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
var item_width = $('#category li').outerWidth() + 10;
$('this').css('opacity', '0.5')

//calculae the new left indent of the unordered list
var left_indent = parseInt($('#category').css('left')) - item_width;

//make the sliding effect using jquery's anumate function '
$('#category:not(:animated)').animate({
'left': left_indent
}, 500, function() {

//get the first list item and put it after the last list item (that's how the infinite effects is made) '
$('#category li:last').after($('#category li:first'));

//and get the left indent to the default -210px
$('#category').css({
'left': '-210px'
});
});
});

//when user clicks the image for sliding left
$('#left_scroll').click(function() {

var item_width = $('#category li').outerWidth() + 10;

/* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
var left_indent = parseInt($('#category').css('left')) + item_width;

$('#category:not(:animated)').animate({
'left': left_indent
}, 500, function() {

/* when sliding to left we are moving the last item before the first list item */
$('#category li:first').before($('#category li:last'));

/* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
$('#category').css({
'left': '-210px'
});
});

});
});

Код: Выделить всё

.user-category {
position: fixed;
width: 100%;
height: auto;
background: #232323;
padding: 20px 0;

top: 0;
overflow: hidden;
z-index: 1;
border-bottom: 1px solid #232323;
}

.user-category-inner {
/* float: left; */
/* width: 98%; */
left: 20px;
}

.user-category-inner ul {
position: relative;
left: -30px;
/* margin:0; */
/* padding: 0;  */
width: 9999px;
}

.user-category-inner ul li {
display: inline;
list-style: none;
padding: 28px 20px;
margin: 0 15px;
}

.user-category-inner li a {
line-height: 1.6rem;
text-decoration: none;
font-size: 1.2rem;
color: #fff;
border-radius: 5px;
background: #6D6E71;
/* For browsers that do not support gradients */
/*Safari 5.1-6*/
/*Opera 11.1-12*/
/*Fx 3.6-15*/
/*Standard*/
padding: 20px 25px;
}

.arrow-left {
position: absolute;
left: 0;
cursor: pointer;
z-index: 999;
padding: 0 60px;
top: 0;
height: 100%;
rsor: pointer;
background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(90%, #222));
background-image: -webkit-linear-gradient(left, transparent 0%, #222 90%);
background-image: linear-gradient(to right, transparent 0%, #3B17A5 90%);

}

.arrow-left i {
font-size: 4rem;
color: #fff;
line-height: 80px;
}

.arrow-right {
position: absolute;
right: 0;
height: 100%;
padding: 0 60px;
top: 0;
cursor: pointer;
background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(90%, #222));
background-image: -webkit-linear-gradient(left, transparent 0%, #222 90%);
background-image: linear-gradient(to right, transparent 0%, #3B17A5 90%);

}

.arrow-right i {
font-size: 4rem;
color: #fff;
line-height: 80px;
}

Код: Выделить всё

[i][/i]

[list]
[*][url=#]Zbavitje[/url]
[*][url=#]Zbavitje Zbavitj Zbavitj Zbavitj[/url]
[*][url=#]Zbavitje[/url]
[*][url=#]Zbavitje[/url]
[*][url=#]Zbavitje[/url]
[*][url=#]Zbavitje[/url]
[*][url=#]Zbavitje[/url]
[*][url=#]Zbavitje[/url]
[*][url=#]Zbavitje[/url]
[*][url=#]Zbavitje[/url]
[*][url=#]Zbavitje[/url]
[*][url=#]Zbavitje[/url]
[*][url=#]Zbavitje[/url]
[*][url=#]Zbavitje[/url]
[*][url=#]Zbavitje[/url]
[/list]

[i][/i]

Подробнее здесь: https://stackoverflow.com/questions/369 ... when-click