Slider LI

jQuery LI based

by webspicer

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="product" style="margin-left:15px;"> 
<span id="productwrapper"> Produkte und Zinssätze </span> <a href="javascript:void(0);" class="gear"></a> 
</div>

<div class="container" style="margin-left:15px;">

<!-- first Slide Starts -->
<ul id="product_1">
<li> <div class="producttype"> 
<span id="producttypewrapper">Hypotheken 1 </span> 
<a href="#product_2" class="arrowright arrow"></a> 
</div> </li>

<li class="productlists">
	<a href="javascript:window.open('http://www.google.com/','width=400,height=200')" class="productlists">
	<span class="list"> Variable Hypothek </span>
	<span class="number"> 1.250% </span> 
	<a href="javascript:window.open('http://www.google.com/','width=400,height=200')" class="widget"></a> 
	</a>
	<div class="clearfix"></div>
</li>

<li class="productlists">
	<a href="javascript:window.open('http://www.google.com/','width=400,height=200')" class="productlists">
	<span class="list"> Festhypothek 2 Jahre </span>
	<span class="number"> 1.250% </span> 
	<a href="javascript:window.open('http://www.google.com/','width=400,height=200')" class="widget"></a> 
	</a>
	<div class="clearfix"></div>
</li>

<li class="productlists">
	<a href="javascript:window.open('http://www.google.com/','width=400,height=200')" class="productlists">
	<span class="list"> Festhypothek 5 Jahre </span>
	<span class="number"> 1.250% </span> 
	<a href="javascript:window.open('http://www.google.com/','width=400,height=200')" class="widget"></a> 
	</a>
	<div class="clearfix"></div>
</li>

<li class="productlists">
	<a href="javascript:window.open('http://www.google.com/','width=400,height=200')" class="productlists">
	<span class="list"> Festhypothek 8 Jahre </span>
	<span class="number"> 1.250% </span>
	<a...

CSS

.clearfix {clear:both; height:0px;}

body{background:#fff;}
.container{width:263px; border:1px solid #dedede; height:auto; position:fixed; padding-bottom:8px;}
.container ul{ position:fixed; width:263px; overflow:hidden}
.container ul li{margin:0px; padding:0px; }
.heightmedium{height:371px; *height:375px; height:375px\0; }
.heighthigh{height:582px; *height:590px; height:590px\0; }

div.product{ border:1px solid #E1E2E2; border-bottom:none; font-family:Verdana,arial; font-size:10pt; font-weight:bold; color:#6F7070; padding:10px 0px 10px 35px; background:#F3F4F4 url(../img/icon_widget_produkte_und_zinssätze.png) no-repeat left top; width:228px;}
div.product a.gear{background: url(../img/gear.png) no-repeat left top; padding:15px; float:right; margin-right:10px; position:relative; top:-8px;}

.container ul li div.producttype{margin:12px 5px 13px 5px; height:33px; font-family:arial,Verdana; font-size:10pt; color:#6b777b; text-align:center; border-bottom:1px solid #6B777B;}
.container ul li div.producttype a.arrowleft{background: url(../img/arrow_left.png) no-repeat right top; padding:15px; float:left; margin-right:5px; border: 1px solid green;}
.container ul li div.producttype a.arrowleft:hover{background: url(../img/arrow_left_mouseover.png) no-repeat right top; padding:15px; float:left; margin-right:5px;}
.container ul li div.producttype a.arrowright{background: url(../img/arrow_right.png) no-repeat right top; padding:15px; float:right; margin-right:5px; border: 1px solid red; }
.container ul li div.producttype a.arrowright:hover{background: url(../img/arrow_right_mouseover.png) no-repeat right top; padding:15px; float:right; margin-right:5px;}
.container ul li.productlists{width:95%; margin:0px;}
.container ul li.productlists:first-child{position:relative; top:-10px;}
.container ul li.productlists{ border-bottom:1px solid #dedede; padding:8px 0px;margin:0px 5px; font-family:verdana, arial; font-size:10pt; color:#6b777b; position:relative; top:-12px;}
.container...

JavaScript

var productListName = $('.list').text();
		
	$('li.productlists').each(function() 
	{
		var productListAll = $(this).find('span.list').text().length;
		
		if ( productListAll > 34 )
		{	
			$(this).find('.number').css('margin-top','10px');
			$(this).find('a.productlists').css('background-position','right 64%');
		}
		else
		{
			$(this).find('.number').css('margin-top','0px');
			$(this).find('a.productlists').css('background-position','right top');			 
		}

	});
	
	 $(".arrowleft").click(function() 
     {
        var $toggled = $(this).attr('href');
        $($toggled).siblings(':visible').hide("slide", {direction: 'right'},  200);
        $($toggled).toggle("slide", {direction: 'left'}, 200);
 
        return false;
    });
	
	$(".arrowright").click(function() 
     {
        var $toggled = $(this).attr('href');
        $($toggled).siblings(':visible').hide("slide", {direction: 'left'},  200);
        $($toggled).toggle("slide", {direction: 'right'}, 200);
 
        return false;
    });

	$(".container").css('height',$("#product_1").height());