Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    50
    Thanks
    20
    Thanked 0 Times in 0 Posts

    Question JQuery Slider Images Not Displaying Correctly

    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I think, adding
    Code:
    #sliderContent li{
    display:none;
    }
    into your css would fix it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    irishpeck (12-22-2010)

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    50
    Thanks
    20
    Thanked 0 Times in 0 Posts

    Exclamation Sorry i should have added the codes

    So where in the file would i place the code your suggesting??

    This is the part of the CSS for the Slider
    Code:
    /* 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)
    Code:
    <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 -->
    Last edited by irishpeck; 12-21-2010 at 05:50 PM. Reason: New info

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.

  • Users who have thanked SB65 for this post:

    irishpeck (12-22-2010)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •