Multiple Widths for LoopedSlider Plugin
Hi there,
I've been battling with trying to use two loopedsliders on a page with multiple widths. I can't seem to get the 2nd one to work, Everything shows up fine but the slider isn't working...Any ideas on what might be the problem?
this is what the html looks like:
<div id="left-col">
<div id="newsSlider">
<div class="news-container">
<ul class="news-slides">
<li><p>this is the first slide</p>
<p>Nam liber tempor cum soluta nobis eleifend option. Magna aliquam erat volutpat ut, wisi enim ad minim veniam quis.</p>
<p> Ex ea commodo consequat duis autem vel eum iriure dolor! Iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore?</p>
</li>
<li><p> this is slide #2</p> <p>Anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima eodem modo typi qui nunc? Sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril. Dolore eu feugiat nulla facilisis at vero eros delenit augue duis dolore? Saepius claritas est etiam processus dynamicus qui sequitur mutationem.<p>
<p>Quarta decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant. Laoreet dolore magna aliquam erat volutpat ut wisi enim ad minim veniam quis nostrud exerci tation. Etiam processus dynamicus qui sequitur mutationem consuetudium lectorum mirum est notare quam littera gothica quam nunc.</p>
<li>
<li><p>this is the third slide</p> <p>?Qui blandit praesent luptatum zzril delenit augue duis? Consequat vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio. Facit eorum claritatem Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius claritas est etiam. Decima et quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes in. Lectorum mirum est notare quam littera gothica quam nunc putamus parum claram anteposuerit litterarum. Suscipit lobortis nisl, ut aliquip ex ea commodo.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat vel. Lobortis nisl ut aliquip ex, ea commodo consequat. Quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes in? Minim veniam quis nostrud exerci tation ullamcorper suscipit illum dolore eu feugiat nulla facilisis at vero. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet. Doming id quod mazim placerat facer possim assum typi non habent claritatem? Quod ii legunt saepius claritas est etiam processus dynamicus qui sequitur mutationem.</p></li>
</ul>
</div>
<a href="#" class="previous">previous</a>
<a href="#" class="next">next</a>
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</div>
<div id="right-col">
<ul id="breadcrumb">
<li><a href="index.html">home</a></li>
<li> » </li>
<li>portfolio</li>
<li> » </li>
<li><a href="corporate.html"> corporate </a></li>
</ul>
<div id="gallery">
<div id="loopedSlider">
<div class="container">
<div class="slides">
<div > <img src="images/broadcast/a-channel/a-channel-barrie.jpg" alt="" /></div>
<div > <img src="images/broadcast/a-channel/studio-a.jpg" alt="" /></div>
<div > <img src="images/broadcast/a-channel/studio-c.jpg" alt="" /></div>
<div><img src="images/broadcast/a-channel/new-vi-1.jpg" alt="" /></div>
<div><img src="images/broadcast/a-channel/new-vi-2.jpg" alt="" /></div>
</div>
</div>
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">3</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
$('#loopedSlider').loopedSlider();
});
</script>
<ul id="sec-nav">
<li><a href="all-state.html">all state </a></li>
<li><a href=" pg.html">proctor & gamble</a></li>
<li><a href="atos-origins.html">canucks</a></li>
<li><a href="telus.html"> telus</a></li>
<li><a href="bclc.html">bclc</a></li>
<li><a href="visa.html"> visa</a></li>
<li><a href="cab.html"> cab </a></li>
<li><a href="corporate-misc.html"> miscellaneous </a></li>
<li><a href="mastercard.html"> mastercard </a></li>
</ul>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
$('#newsSlider').loopedSlider({
autoHeight: 400
});
});
</script>
this is what the css looks like:
#gallery{
float: right;
}
.container { width:700px;
height:375px;
overflow:hidden;
position:relative;
cursor:pointer;
z-index: -10;
}
.slides { position:absolute;
top:0;
left:0;
}
.slides div { position:absolute;
top:0;
width:700px;
display:none;
}
ul.pagination { list-style-type:none;
margin:0;
padding:0;
margin:2px auto;
float: right;
height: 17px;
}
ul.pagination li { float:left;
margin:0 2px;
height: 16px;
}
ul.pagination a { display:block;
width:16px;
height: 16px;
padding-top:12px;
overflow:hidden;
background-image:url(../images/pagination.png);
background-repeat:no-repeat;
text-indent: -9999em;
}
ul.pagination li.active a {background-image: url(../images/pagination_on.png);
height: 20px;
}
#newsSlider { margin:0 auto; width:300px; position:relative; clear:both; }
.news-container { width:270px;
height:375px;
overflow:hidden;
position:relative;
cursor:pointer;
z-index: -10;
}
.news-slides { position:absolute;
top:0;
left:0;
}
.news-slides div { position:absolute;
top:0;
width:270px;
height: 200px;
display:none;
}