jQuery Image Slider with Thumbnails, Bullets and Slideshow

Posted on December 2, 2014 by Dan Doicaru in jQuery/JavaScript Category with Hard Difficulty

Because a lot of users asked in my previous simple html photo gallery tutorial how to add navigation arrows and some other useful things, here it is your new html photo gallery.

In this ultimate tutorial I will explain to all of you, from scratch, how to create a complete and advanced jQuery image slider with thumbnails, active bullets for every slide, navigation arrows inside the big preview image and a slideshow timer that will change everything automatically inside our jQuery image slider.

jQuery Image Slider Preview

Before we start, you must know a few things. For this advanced image slider we will use the following programming languages:

  • A lot of jQuery and Javascript to make things work
  • A little PHP to make the things easier
  • HTML and CSS to make things look good

Full HD Video Tutorial

What you need for jQuery Image Slider

If you are coding locally, PHP will not run in your browser and for that you will need to download XAMMP. This program will install Apache along with PHP and optional MySQL, Perl and others. You can add your files and folder inside "htdocs" folder, located in your installation folder.

The second option is to edit your files directly from FTP and reupload them once you are done with the changes.

1. HTML Structure

First we need to start with the basic html structure for our jQuery image slider, that means to set the document type, document title, linking the css file and include jQuery files. To write all these things you will need to create a PHP file (with extension .php) and for later a CSS file. You can check the image below to see how I created them.

jQuery Image Slider Files

Now open index.php with any text editor (Sublime Text, Notepad++, Dreamweaver etc.) and write the HTML below. Make sure to have all files above in the same folder.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>jQuery Image Slider with Thumbnails, Bullets and Slideshow</title>

	<link rel="stylesheet" href="style.css" />

	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>

<body>

<!-- HERE WILL START THE CODE -->

</body>
</html>

1.1 Set PHP Variables

Now that we have the basic html we can start writing the main html structure of our jQuery image slider inside the <body> tag. First you need to add a PHP variable with total images. We do this because is easier to write a single code instead of hundred of lines if you are using a lot of images. So here it is below.

<?php
	$imagesTotal = 8;     // SET TOTAL IMAGES IN GALLERY
?>

Great, now we need to create the main structure of the jQuery image slider. There will be the following containers and elements:

  • Gallery Thumbnails Container
  • Big Preview Container
  • Left and Right Navigation Arrows
  • Navigation Bullets under images

1.2 Writing the HTML

Inside the thumbnails, preview image and bullets container I will use FOR statement from PHP which will write the code for your images and links for how much you've set the variable with total images. You can find more details about FOR loops on this page.

Also, the script will be written with jQuery and Javascript with a little help from PHP to make things easier. I will put the whole html code so you can copy and paste it in your files easily, then I will explain it.

<div class="galleryContainer">
	<h1>jQuery Image Slider with Thumbnails, Bullets and Slideshow</h1>
	<p>Created by HTML-TUTS.com. You can view the full tutorial <a href="http://html-tuts.com/?p=8898" rel="nofollow" target="_blank">here</a></p>

	<div class="galleryThumbnailsContainer">
		<div class="galleryThumbnails">
			<?php
				for ($t = 1; $t <= $imagesTotal; $t++) {
					echo '<a href="javascript: changeimage(' . $t . ')" class="thumbnailsimage' . $t . '"><img src="images/thumbs/image' . $t . '.jpg" width="auto" height="100" alt="" /></a>';
				}
			?>
		</div>
	</div>

	<div class="galleryPreviewContainer">
		<div class="galleryPreviewImage">
			<?php
				for ($i = 1; $i <= $imagesTotal; $i++) {
					echo '<img class="previewImage' . $i . '" src="images/image' . $i . '.jpg" width="900" height="auto" alt="" />';
				}
			?>
		</div>

		<div class="galleryPreviewArrows">
			<a href="#" class="previousSlideArrow">&lt;</a>
			<a href="#" class="nextSlideArrow">&gt;</a>
		</div>
	</div>

	<div class="galleryNavigationBullets">
		<?php
			for ($b = 1; $b <= $imagesTotal; $b++) {
				echo '<a href="javascript: changeimage(' . $b . ')" class="galleryBullet' . $b . '"><span>Bullet</span></a> ';
			}
		?>
	</div>
</div>

As you can see above, each section has his own container (thumbnails, preview and bullets). To reduce the amount of writing, I used the "for statement" from php. For example, to write all the images and links from thumbnails we will need only a number to have a different class name so you can manipulate objects, the rest will be the same. Check the php code and the output below.

<?php
	for ($t = 1; $t <= $imagesTotal; $t++) {
		echo '<a href="javascript: changeimage(' . $t . ')" class="thumbnailsimage' . $t . '"><img src="images/thumbs/image' . $t . '.jpg" width="auto" height="100" alt="" /></a>';
	}
?>

And the output will be:

PHP FOR statement inside thumbnails

The "for statement" above will generate the code until he reaches the total number of images which you set it inside the variable "imagesTotal".

2. Styling the Image Slider

Now that we have the structure we need to style our jQuery image slider. Inside style.css add the code below. You are free to adjust the gallery with your own style.

body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	font-size: 14px;
}
a,
.galleryThumbnails img {
	transition: all 150ms linear;
	-webkit-transition: all 150ms linear;
	-moz-transition: all 150ms linear;
}
.galleryContainer {
	margin: 40px auto;
	width: 900px;
}
.galleryPreviewContainer {
	position: relative;
}
.galleryPreviewImage img {
	display: none;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	box-shadow: 5px 5px 0 0 #c1c1c1;
	position: relative;
	top: 0;
	left: 0;
}
img.previewImage1 {
	display: block;
}
.galleryPreviewArrows a {
	font-family: Arial;
	font-size: 30px;
	background: rgba(0,0,0, 0.3);
	width: 70px;
	height: 70px;
	line-height: 70px;
	display: block;
	text-align: center;
	color: #FFF;
	text-decoration: none;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	position: absolute;
	left: 20px;
	top: 50%;
	margin-top: -35px;
}
a.nextSlideArrow {
	right: 20px;
	left: auto;
}
.galleryPreviewArrows a:hover {
	background: #000;
	margin-top: -40px;
}
.galleryNavigationBullets {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 60px;
}
.galleryNavigationBullets span {
	display: none;
}
.galleryNavigationBullets a {
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-right: 5px;
	background: #ddd;
}
.galleryNavigationBullets a:hover,
.galleryNavigationBullets a.active {
	background: #555;
}
.galleryThumbnailsContainer {
	width: 900px;
	overflow-x: auto;
	margin-top: 30px;
	margin-bottom: 40px;
	padding: 20px 0;
}
.galleryThumbnails {
	width: 2000px;
}
.galleryThumbnails img {
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	margin-right: 10px;
	border: 4px solid #e0e0e0;
	position: relative;
	top: 0;
}
.galleryThumbnails a:hover img {
	top: -5px;
	border: 4px solid #999;
}
.galleryThumbnails a.active img {
	border: 4px solid #F00;
}

3. Make the jQuery Image Slider Work

Now is time to add the magic. The Javascript part will be combined with PHP and a lot of jQuery. We will create 2 functions, one for changing slides automatically (using "setInterval") and the other one for changing images by click.

The rest will be simple click functions for left and right arrows. Check the full code below and I will explain it after. Make sure to add it above the ending of </html> tag.

<script type="text/javascript">
// init variables
var imagesTotal = <?php echo $imagesTotal; ?>;
var currentImage = 1;
var thumbsTotalWidth = 0;

$('a.galleryBullet' + currentImage).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");


// SET WIDTH for THUMBNAILS CONTAINER
$(window).load(function() {
	$('.galleryThumbnails a img').each(function() {
		thumbsTotalWidth += $(this).width() + 10 + 8;
	});
	$('.galleryThumbnails').width(thumbsTotalWidth);
});


// PREVIOUS ARROW CODE
$('a.previousSlideArrow').click(function() {
	$('img.previewImage' + currentImage).hide();
	$('a.galleryBullet' + currentImage).removeClass("active");
	$('a.thumbnailsimage' + currentImage).removeClass("active");

	currentImage--;

	if (currentImage == 0) {
		currentImage = imagesTotal;
	}

	$('a.galleryBullet' + currentImage).addClass("active");
	$('a.thumbnailsimage' + currentImage).addClass("active");
	$('img.previewImage' + currentImage).show();

	return false;
});
// ===================


// NEXT ARROW CODE
$('a.nextSlideArrow').click(function() {
	$('img.previewImage' + currentImage).hide();
	$('a.galleryBullet' + currentImage).removeClass("active");
	$('a.thumbnailsimage' + currentImage).removeClass("active");

	currentImage++;

	if (currentImage == imagesTotal + 1) {
		currentImage = 1;
	}

	$('a.galleryBullet' + currentImage).addClass("active");
	$('a.thumbnailsimage' + currentImage).addClass("active");
	$('img.previewImage' + currentImage).show();

	return false;
});
// ===================


// BULLETS CODE
function changeimage(imageNumber) {
	$('img.previewImage' + currentImage).hide();
	currentImage = imageNumber;
	$('img.previewImage' + imageNumber).show();
	$('.galleryNavigationBullets a').removeClass("active");
	$('.galleryThumbnails a').removeClass("active");
	$('a.galleryBullet' + imageNumber).addClass("active");
	$('a.thumbnailsimage' + currentImage).addClass("active");
}
// ===================


// AUTOMATIC CHANGE SLIDES
function autoChangeSlides() {
	$('img.previewImage' + currentImage).hide();
	$('a.galleryBullet' + currentImage).removeClass("active");
	$('a.thumbnailsimage' + currentImage).removeClass("active");

	currentImage++;

	if (currentImage == imagesTotal + 1) {
		currentImage = 1;
	}

	$('a.galleryBullet' + currentImage).addClass("active");
	$('a.thumbnailsimage' + currentImage).addClass("active");
	$('img.previewImage' + currentImage).show();
}

var slideTimer = setInterval(function() {autoChangeSlides(); }, 3000);
</script>

4. Explaining the Code

First part of the code is to initialize all variables. Next, we must calculate the width (including margin and padding) of all thumbnails and sum them together in variable "thumbsTotalWidth" and apply this width to thumbnails container, so the "overflow: hidden;" property can work without any problems.

The interesting part of this jQuery image slider is the navigation (arrows and bullets). For the next arrow, you should, obviously, increase the variable number with 1, right after removing all active classes from objects.

currentImage++;

if (currentImage == imagesTotal + 1) {
	currentImage = 1;
}

$('a.galleryBullet' + currentImage).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
$('img.previewImage' + currentImage).show();

As you can see in the code above, after incrementing variable "currentImage" using the post-increment operator (you can read more here about incrementing/decrementing operators), we apply an "if statement" that checks if the current image is equal with the total number of our images.

That means for example if you have 8 images in your jQuery image slider and if current image is 8 and is equal with total images which is 8, then your jQuery image slider should return to the first image of your image slider and that means current image should be 1. Then you can add a class like "active" to your current image.

Same rule applies for previous arrow, the only difference is that you need to decrement the value for the current image variable.

Also, to trigger all these things you will need to create some functions for each buttons. That means your code must run when you click the buttons, so the event is "click".

For bullets and thumbnails you will need a special function. To learn more about functions check this link. Our function should have a parameter which must be a number. That number will trigger the image you will need. For example:

for ($b = 1; $b <= $imagesTotal; $b++) {
	echo '<a href="javascript: changeimage(' . $b . ')" class="galleryBullet' . $b . '"><span>Bullet</span></a> ';
}

If you can see, the link above has inside the "href" attribute a Javascript code. That code will trigger the exact image for each link. You can check the image at the end of step 1.2.

And the last one, to make a slideshow you will need a functions that runs the code every few seconds again and again. We have our function which is incrementing the value by 1, all you need to do is to trigger this function using another function called "setInterval".

var slideTimer = setInterval(function() {autoChangeSlides(); }, 3000);

This will run the function "autoChangeSlides" every 3000 miliseconds. That means every 3 seconds. If you want you can change with your own time.

5. Conclusion

I hope that my jQuery image slider tutorial was well explain and documented. Leave a comment below with your opinions or problems (if you have). Check download and demo links below. I am working on a video tutorial for this gallery, so you can understand better.

Live Demo

Download Files

6. Update: Adding Descriptions (Captions)

On step 1.1 when you declare the PHP variables, write below a PHP Array with all descriptions. Make sure to include ALL descriptions because you will get an error, so in my case I have 8 images.

<?php
	$imagesTotal = 8;     // SET TOTAL IMAGES IN GALLERY

	// set description to each image
	$description[1] = 'Caption for picture number 1 inside the slider and using <strong>HTML Tags</strong.';
	$description[2] = 'This is another description for picture number 2 with <em>HTML Tags</em>.';
	$description[3] = 'Another one for picture number 3.';
	$description[4] = 'Details for picture number 4.';
	$description[5] = 'Some text for picture 5.';
	$description[6] = 'One more description for picture 6.';
	$description[7] = 'Hello world for picture number 7.';
	$description[8] = 'The last caption for picture number 8.';
?>

In HTML you must add a new <div> under or above the div with the class galleryNavigationBullets. I added it under.

<div class="galleryDescription">
	<?php
		for ($x = 1; $x <= $imagesTotal; $x++) {
			echo '<div class="description' . $x . '">' . $description[$x] . '</div>';
		}
	?>
</div>

In CSS you must hide all descriptions (captions), so that our jQuery image slider can display one at a time.

.galleryDescription > div {
	display: none;
}
.galleryDescription > div.visible {
	display: block;
}

The jQuery part is a bit long because you need to 2 lines, one to hide and one to show the description to each own image. We have arrows, thumbnails and bullets as action triggers, plus slideshow.

To not write the code again from the jQuery image slider, I will place fragments of it, to know where you should place the code. You can download the updated files below.

// init variables
var thumbsTotalWidth = 0;

$('div.description' + currentImage).addClass("visible");

Previous arrow code (download the full code from the updated files):

$('a.previousSlideArrow').click(function() {
	$('div.description' + currentImage).removeClass("visible");

	if (currentImage == 0) {
		currentImage = imagesTotal;
	}
	
	$('div.description' + currentImage).addClass("visible");
});

Next arrow code:

$('a.nextSlideArrow').click(function() {
	$('div.description' + currentImage).removeClass("visible");

	if (currentImage == imagesTotal + 1) {
		currentImage = 1;
	}

	$('div.description' + currentImage).addClass("visible");
});

Bullets code:

function changeimage(imageNumber) {
	$('img.previewImage' + imageNumber).show();

	$('.galleryDescription > div').removeClass("visible");

	$('div.description' + currentImage).addClass("visible");
}

Automatic slideshow code:

function autoChangeSlides() {
	$('div.description' + currentImage).removeClass("visible");

	if (currentImage == imagesTotal + 1) {
		currentImage = 1;
	}

	$('div.description' + currentImage).addClass("visible");
}

Make sure to NOT copy the fragments from the code above. Download it from the links below or you can follow the tutorial from the beginning and update your code accordingly.

Live Demo (With Descriptions)

Download Updated Files

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (8 votes, average: 4.75 out of 5)
Related Articles
Comments
  1. Gravatar Icon Willem:

    Great work, but how to do with small images.

  2. Gravatar Icon Zo:

    Hi, great tutorial!

    Can you please let me know how to apply the slider to WordPress?

    Thank you.

  3. Gravatar Icon Henry Hargreaves:

    Hi,

    First off great article, it really helped me! However there is still one thing I’m eager to know, how would you go about making this slide responsive ?

    Kind regards,
    Henry.

    • Hello Henry,

      That is quite simple. We will make the containers fluid, reduce the height of the thumbnails and use max-width 100% for big preview images to look good on all devices and resolutions.

  4. Gravatar Icon Charlotte:

    Hi Dan

    I hope this finds you well. Tried your code to add a gallery on our webpage, however when I hover over the thumbnails or click on the slider arrows, the preview image does not change.

    (P.S. I hope I get a quick response.)

    Kindly assist.

    • Hello Charlotte,

      Maybe there is something wrong with your code or you forgot some files. Not sure exactly. Can you provide me a link with the page or post your code to CodePen or jsFiddle and pass the link back here?

  5. Gravatar Icon Tyler:

    Hi Dan, I’m implementing something similar for a site I’m working on. Only problem is I’d like to overlay the description over the preview image/video. How would I go about doing that? Thanks.

    • Hello Tyler,

      In order to do that you have to move the .galleryDescription div inside the .galleryPreviewContainer with absolute position using bottom to 0. That should do the trick. If you want I can help you with it, but not for free.

      • Gravatar Icon Tyler:

        Thanks for the quick response! I did as you said and it’s technically inside the container but I probably have to do some trouble-shooting on my own.

  6. Gravatar Icon Carlos:

    Thanks so much for posting your work and knowledge.

    I believe I followed your instructions, and so far I am happy that something got displayed after following your YouTube guide. Still my images do not scroll upon pressing the buttons. Would you be able to help me.

    One more question, What needs to be modified if I want my pictures square instead of rounded corners?

    Thanks again.

    • Hello Carlos,

      Sorry for the late reply. Saw your message, couldn’t find time to answer. Was in a short holiday. So, for the first question can you please paste your entire jquery image slider code on CodePen or jsFiddle and give me the link? It is easier to me to read it there please, if possible.

      For the second question with rounded corners, try to find in your CSS the lines below and where you want to remove the rounded corners just delete the lines with border-radius property.

      .galleryThumbnails img {
          border-radius: 20px;
          -webkit-border-radius: 20px;
          -moz-border-radius: 20px;
      }
  7. Gravatar Icon Arif:

    How can i add caption in photo preview in “…..width=”900″ height=”auto” alt=”….?” /”
    pls help me

  8. Gravatar Icon Michael:

    How do I make several unsynchronized image galleries on the same page?

    • Hello Michael,

      Sorry for the captcha thing. Sometimes it generates some errors, not sure why. Thanks for letting me know. I posted your question here.

      So, the easiest way to add more galleries on the same page is to clone the code again and change all variables and classes to be different than the others. The hardest way is to change the code to achieve what you need.

  9. Gravatar Icon Maja:

    Great! How to make a navigation for thumbnails? I don’t want to have a scroll just a arrow to go to next/prev set of thumbs. How to achive it? Thank You

    • Hello Maja,

      Sorry for the late answer. You will need an extra JavaScript code for that, using the setInterval() function. Also you need to change the CSS a little and add 2 extra links in HTML to act as buttons. I can assist you via e-mail if you need it on your project or client.

  10. Gravatar Icon Zlombee:

    Hi!

    Thank you so much for such a great tutorial!
    Sorry for a noob question: can you please give some advice – how to get the slides to work with .fadeIn/.fadeOut or .fadeToggle?
    Thanks in advance! :)

    • Hello,

      For this type of jQuery image slider is a little bit different. Using fadeIn() and fadeOut() must go together with absolute position on slides containers. You can try and download the files of this tutorial and where you find .hide(), replace with .fadeOut(), and for .show() replace with .fadeIn() to see the difference.

  11. Gravatar Icon G. O'Brien:

    I don’t get it… I did it exactly how is in your video and still all messed up. Could you help me out?

    • Hello O’Brien,

      Can you please paste your code to jsFiddle or CodePen? So I can take a look. As I saw in your code (which I deleted because is too long), you have some syntax errors there. You should check it again.

      • Gravatar Icon G. O'Brien:

        Sorry about the repeated post, power went out right as I clicked post but didn’t know if it went through. Here is the jsFiddle link.

        https://jsfiddle.net/y0w6vxoh/

        • First of all your code is a total mess. You wrote some PHP code in one single line, and there is also a commented line which breaks the other lines. Make sure to write the code EXACTLY as it is, without any spaces between strings and semicolons and keep the lines the same.

          Also your PHP code is not executing because your page has the .htm extension. Make sure to change it to .php.

          • Gravatar Icon G. O'Brien:

            Sorry but your code does not work period for anything that I do. I get the same result every time. And it is exactly how you write it in your video. I’ve cross checked it 3 times now and it’s identical.

          • Hello Garrett,

            Maybe doesn’t support PHP, I think that is the cause. Saw that your code is appearing as plain text (where you have PHP). My code is just fine, you can download the files or even view a live demo to see it in action. There is a problem from your server probably.

  12. Gravatar Icon Pawzy:

    Hi. I am trying to make a similar thing and ran into a wall with creating permalinks. Ideally each image would have a permalink so the gallery could be linked with a specific image. (E.g. shared on facebook). Any thoughts on how this could be achieved?

    • Hello Pawzy,

      Sorry for the late answer. To add links on the big images in your slider, you need to do the same trick as descriptions. Make sure to add this PHP code under the last description array:

      $description[8] = 'some description 8';
      
      $link[1] = 'http://google.com/';
      $link[2] = 'http://html-tuts.com/';
      $link[3] = '#';
      $link[4] = '#';
      $link[5] = '#';
      $link[6] = '#';
      $link[7] = '#';
      $link[8] = '#';

      And make sure to update the code for big preview images, like this:

      <div class="galleryPreviewImage">
      	<?php
      		for ($i = 1; $i <= $imagesTotal; $i++) {
      			echo '<a href="' . $link[$i] . '" target="_blank"><img class="previewImage' . $i . '" src="images/image' . $i . '.jpg" width="900" height="auto" alt="" /></a>';
      		}
      	?>
      </div>
  13. Gravatar Icon L. Williams:

    Hello again!

    Thanks for the response! The only issue I have now, is that it doesn’t hide the video. I managed to get it working somehow, then ended up breaking it o_e.

    Thanks again,
    both for your time & tutorial.

    • Oops! Yes you are right Lee. Sorry, my bad. The problem is that I gave you the code for thumbnails instead of the big preview images. Here is the right code:

      <div class="galleryPreviewImage">
        <?php
        for ($i = 1; $i <= $imagesTotal; $i++) {
          if($i == 3) {
            echo '<div class="bigimg previewImage' . $i . '"><iframe width="900" height="400" src="https://www.youtube.com/embed/8Vdl2dQ0img" frameborder="0" allowfullscreen></iframe></div>';
          } else {
            echo '<img class="bigimg previewImage' . $i . '" src="images/image' . $i . '.jpg" width="900" height="auto" alt="" />';
          }
        }
        ?>
      </div>

      Also in your jQuery code, replace everywhere img.previewImage with .previewImage, because there are targeted only images with that class and you need divs too, like this:

      $('.previewImage' + imageNumber).show();

      Don’t forget to add in CSS the new class .bigimg created to hide all elements, including that div with your YouTube video.

      .bigimg {
        display: none;
      }
      • Gravatar Icon L. Williams:

        That fixed it! Really appreciate the help chap! :)

        Have a great day, and see you around the web!

  14. Gravatar Icon L. Williams:

    Hi there!
    Foremost, thank you for creating this tutorial!

    I’d like to add a youtube video inside the gallery, but so far I’m unable to do so.
    Any help would be appreciated!

    Lee.

    • Hello Lee,

      You can write an if statement inside the for loop of the big preview images of your jQuery image slider. For example:

      <div class="galleryThumbnails">
        <?php
          for ($t = 1; $t <= $imagesTotal; $t++) {
            if ($t == 3) {
              echo '<iframe src="youtube.com/watch...">';
            } else {
              echo '<a href="javascript: changeimage(' . $t . ')" class="thumbnailsimage' . $t . '"><img src="images/thumbs/image' . $t . '.jpg" width="auto" height="100" alt="" /></a>';
          }
        ?>
      </div>

      So, when the count reaches 3, code will output that iframe with YouTube instead of image. The same you can do with the thumbnails.

  15. Gravatar Icon Sid:

    How will I do it if I want a list of items rather than images like:

    Announcement 1
    Announcement 2
    Announcement 3
    Announcement 4
    etc..

    • Hello Sid,

      Can’t you use the description container for that? The whole jQuery image slider is providing images and captions for each one. You can delete the div with images and move the code from description in that place.

  16. Gravatar Icon D. Valdez:

    Thank you for the tutorial, it’s just what I needed! I am having a problem in Firefox and Internet Explorer. When I click one of the thumbs to change the image, the code crashes and it takes me to a page that just says “false”. Check out where I am using the slideshow at http://goo.gl/OAh6DG and any help would be greatly appreciated.

    • Hello Valdez,

      Thank you for your feedback. The problem was in the function “changeimage(imageNumber)”. You must delete the line with “return false”, because I added it by mistake, sorry. I also updated the tutorial too.

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


+ 1 = 2

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.