...

View Full Version : JQuery Slider Images Not Displaying Correctly



irishpeck
12-21-2010, 03:06 PM
Hi Guys i have just designed a website for a company at http://www.snapwexford.com/bolands. As you can see this website has a jquery slider at the top but its loading the images into the page first so all of them show up please help me resolve this issue as its for a client. Thanks so much in advance

abduraooft
12-21-2010, 03:26 PM
I think, adding
#sliderContent li{
display:none;
}
into your css would fix it.

irishpeck
12-21-2010, 04:49 PM
So where in the file would i place the code your suggesting??

This is the part of the CSS for the Slider


/* HEADER */
#header{width:940px; height:400px; margin:20px 0px 20px 0px !important; clear:both; background-color:#fff; float:left}
* html #header{margin:10px 0px 10px 0px !important;}
#header-slide{padding:10px;}
#header-slide ul{list-style-type:none; margin:0px; padding:0px;}


This is the index.html file (its shortened down to only contain the info required)

<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/slider.css" rel="stylesheet" type="text/css" />
<!-- ////////////////////////////////// -->
<!-- // Javascript Files // -->
<!-- ////////////////////////////////// -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Quicksand_Light_300.font.js"></script>
<script type="text/javascript" src="js/Quicksand_Book_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('h1') ('h1 a') ('h2') ('h3') ('h4') ('h5') ('h6') ('#box p') ('.text-styled') ('#top-navigation li a', {
hover: true
}) ('blockquote');
Cufon.replace('#slider .bottom', { fontFamily: 'Quicksand Book' });
</script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript" src="js/s3slider.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#slider").s3Slider({
timeOut: 4000,
captionOpacity: 0.7
});
/* for corner rounded top menu */
$('#top-navigation ul ul').corner("bottom");

});
</script>
<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('img, #logo');
</script>
<![endif]-->
</head>
<body>

<div id="wrapper">
<div id="container-top">
<div class="container">
<div id="top">
<div id="top-left">
<br><div id="logo"><img src="images/wwbyclogo.png" alt="" /></div><!-- end #logo -->
</div><!-- end #top-left -->
<div id="top-right">
<div id="top-search">
</div><!-- end #top-search -->
<div id="top-navigation">
<ul id="topnav">
<li><a class="current" href="index.html">Home</a></li>
<li><a href="howitworks.html">How It Works</a>
<li><a href="valuemycar.html">Value My Car</a></li>
<li><a href="sellyourcar.html">Sell Your Car</a></li>
</ul>
</div><!-- end #top-navigation -->
</div><!-- end #top-right -->
</div><!-- end #top -->
<div id="header">
<div id="header-slide">
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<img src="images/cars/slide1.jpg" alt="1" />
<div class="bottom">
<span class="title_slider">We Will Buy Your Car.ie</span><br />
<span class="desc_slider">We take the hassle out of selling your used car. Just fill out the form on the "Sell Your Car" tab or you can call us on <b>01 4004440</b>… <br><a href="howitworks.html">Read more &raquo;</a>
</span>
</div>
</li>
<li class="sliderImage">
<img src="images/cars/bmw.jpg" alt="2" />
<div class="bottom">
<span class="title_slider">We Will Buy Your Car.ie</span><br />
<span class="desc_slider">We take the hassle out of selling your used car. Just fill out the form on the "Sell Your Car" tab or you can call us on <b>01 4004440</b>… <br><a href="valuemycar.html">Read more &raquo;</a>
</span>
</div>
</li>
<li class="sliderImage">
<img src="images/cars/mazda6.jpg" alt="3" />
<div class="bottom">
<span class="title_slider">We Will Buy Your Car.ie</span><br />
<span class="desc_slider">We take the hassle out of selling your used car. Just fill out the form on the "Sell Your Car" tab or you can call us on <b>01 4004440</b>… <br><a href="sellyourcar.html">Read more &raquo;</a>
</span>
</div>
</li>
<li class="sliderImage">
<img src="images/cars/audia4.jpg" alt="4" />
<div class="bottom">
<span class="title_slider">We Will Buy Your Car.ie</span><br />
<span class="desc_slider">We take the hassle out of selling your used car. Just fill out the form on the "Sell Your Car" tab or you can call us on <b>01 4004440</b>
</span>
</div>
</li>
<li class="clear sliderImage"></li>
</ul>
</div>
</div><!-- end #header-slide -->
</div><!-- end #header -->

SB65
12-21-2010, 06:11 PM
On your page, you link to slider.css, which I suspect might have that entry in it. The link is broken.

Otherwise, in your style.css as abduraooft says.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum