Hi

 

At the moment i am using jQuery cycle on my website to create a slideshow with prev and next buttons for my users to view a slideshow of some images.

 

However recently i have noticed that when the page loads it starts with showing all the images one after another and then once the page is loaded it puts it to how it should show with one image and the prev and next buttons.

 

Is jQuery cycle not the best method of creating a slideshow or something??

Put overflow:hidden on the image container

Put overflow:hidden on the image container

 

That hasn't worked for me.

 

Here is my code if it helps:

 

<div class='drivers-pics'>
			
  <h3>10 most recently uploaded pics</h3>
			
    <div class='drivers-pics-pics'>
				
	<?
	$host=""; // Host name
	$username=""; // Mysql username
	$password=""; // Mysql password
	$db_name="DansDB"; // Database name
	$tbl_name="jwtdriversimgs"; // Table name
				
	// Connect to server and select database
	mysql_connect("$host", "$username", "$password")or die("cannot connect"); 
	mysql_select_db("$db_name")or die("cannot select DB");

	// Retrieve data from database 
	$sql="SELECT * FROM $tbl_name ORDER BY id DESC LIMIT 10";
	$result=mysql_query($sql);
	?>
				
	<?php
	// Start looping rows in mysql database.
	while($rows=mysql_fetch_array($result)){
	?>		
				
	  <div>
	    <?echo $rows['title']?><br>
	    <?echo "<img src='".$rows['url']."' alt='".$rows['title']."' width='720' height='405'/>"?><br>
						
	    <?$userID = $rows['user']?>
	    <?
	    // Retrieve data from database 
	    $sql2="SELECT * FROM jwtdrivers WHERE id = '$userID'";
	    $result2=mysql_query($sql2);
	    while($rows2=mysql_fetch_array($result2)){
	    ?>
						
	    Uploaded By: <?echo $rows2['username']?><br>
						
	    <?
	    }
	    ?>
						
	    Description: <?echo $rows['description']?><br>
	    Date Posted: <?echo $rows['upload_day']?>/<?echo $rows['upload_month']?>/<? echo $rows['upload_year']?><br>
	    Image ID: <?echo $rows['id']?>
	    </div>	
					
	    <?php
	    // close while loop 
	    }
	    ?>
			
	    </div>
			
	<div class='drivers-pics-nav'>
	<a id='drivers-pics-prev' href="#">Prev</a>
	<a id='drivers-pics-next' href="#">Next</a>
	</div>
			
</div>

can you show us a live example?

I think pixerview is the best way to create slideshow for a website. It will not appear the situation you mentioned above.

For one of my progect i used this slider. its easy to implement and nice looking http://jquery.malsup.com/cycle2/

Thanks Fleur

Edited March 6, 201412 yr by alva

http://dev7studios.com/plugins/nivo-slider/ is pretty good, though it can be a little sluggish and awkward to implement multiple ones.

 

The best one I have encountered was an old school one but I have been searching for it for ages and haven't managed to find it.

 

Brief search just now and they're getting better, with pin it buttons to share your images which can't be a bad thing http://designgrapher.com/25-html5-and-css3-sliders-free-to-use/.

 

You get better results when searching for 'css slider' not slideshow.