0
Ich mache eine Diashow mit Elementen, die ich machen möchte, wie der linke Pfeil angezeigt wird, wenn man in das rechte klickt, Ich meine, wenn wir zu den nächsten Sachen gehen, die linke, um einfach zurück zu gehen. Bisher ist mein Code wie folgt aus: http://codepen.io/xhepigerta/pen/NNOKaXwie man den Pfeil links im Karussell mit Objekt nur anzeigen lässt, wenn man auf das rechte klickt
$(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;
}<div class="user-category">
<div class="arrow-left" id="left_scroll"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
<div class="user-category-inner">
<ul id="category">
<li><a style="background-image:url('http://www.tvweek.com/wp-content/uploads/2014/09/taylor-swift.jpg)" href="#">Zbavitje</a></li>
<li><a href="#">Zbavitje Zbavitj Zbavitj Zbavitj</a></li>
<li><a href="#">Zbavitje</a></li>
<li><a href="#">Zbavitje</a></li>
<li><a href="#">Zbavitje</a></li>
<li><a href="#">Zbavitje</a></li>
<li><a href="#">Zbavitje</a></li>
<li><a href="#">Zbavitje</a></li>
<li><a href="#">Zbavitje</a></li>
<li><a href="#">Zbavitje</a></li>
<li><a href="#">Zbavitje</a></li>
<li><a href="#">Zbavitje</a></li>
<li><a href="#">Zbavitje</a></li>
<li><a href="#">Zbavitje</a></li>
<li><a href="#">Zbavitje</a></li>
</ul>
</div>
<div class="arrow-right" id="right_scroll"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
</div>starken Text