Slide-Carousel

JavaScript
1

Hello, 1. I have a slide Carousel for my images on this PAGE and I want to slow down the time when the slides
transition. This is the Javascript:

$(function() {
				var $carousel = $('#carousel'),
					$pager = $('#pager');

				//	gather the thumbnails
				var $thumb = $( '<div class="thumb" />' );
				$carousel.children().each(function() {
					var src = $(this).attr( 'src' );
					$thumb.append( '<img src="' + src.split('/large/').join('/small/') + '" />' );
				});

				//	duplicate the thumbnails
				for (var a = 0; a < $carousel.children().length - 1; a++) {
					$pager.append( $thumb.clone() );
				}

				//	create large carousel
				$carousel.carouFredSel({
					items: {
						visible: 1,
						width: 550,
						height: 310
					},
					scroll: {
						fx: 'directscroll',
						onBefore: function( data ) {
							var oldSrc = data.items.old.attr('src').split('/large/').join('/small/'),
								newSrc = data.items.visible.attr('src').split('/large/').join('/small/'),
								$t = $thumbs.find('img:first-child[src="' + newSrc + '"]').parent();

							$t.trigger('slideTo', [$('img[src="' + oldSrc + '"]', $t), 'next']);
						}
					}
				});

				//	create thumb carousels
				var $thumbs = $('.thumb');
				$thumbs.each(function( i ) {
					$(this).carouFredSel({
						auto: false,
						scroll: {
							fx: 'directscroll'
						},
						items: {
							start: i+1,
							visible: 1,
							width: 100,
							height: 80
						}
					});

					//	click the carousel
					$(this).click(function() {
						var src = $(this).children().first().attr('src').split('/small/').join('/large/');
						$carousel.trigger('slideTo', [$('img[src="' + src + '"]', $carousel), 'next']);
					});
				});
			});

2. I want to target the thumbnails sizes and get them to the right size so they dont look squished
How can I do that?

2

Here is carouFredSel documentation.

The duration setting of the scroll settings object controls the speed of the animation. The default is 500 ms.

The size of the thumbs is controlled with the width and height settings of the items settings object, currently 100 and 80 pixels respectively.

3

So I got Object:'duration:500ms', if I want to make it slower is it a higher number or lower?

scroll: {
						fx: 'directscroll',
                        Object:'duration:500ms',
						onBefore: function( data ) {
							var oldSrc = data.items.old.attr('src').split('/large/').join('/small/'),
								newSrc = data.items.visible.attr('src').split('/large/').join('/small/'),
								$t = $thumbs.find('img:first-child[src="' + newSrc + '"]').parent();

							$t.trigger('slideTo', [$('img[src="' + oldSrc + '"]', $t), 'next']);
						}
4

The higher the number, the slower the animation!

5

I have it at Object:'duration: 5000ms', and it still does not slow down.

6

Oh sorry, I did not pay attention to the error in the code you quoted. The syntax is wrong. Before (or after, it doesn’t matter) the fx: 'directscroll', inside the scroll: {} object, you must insert the duration:5000,, meaning 5000 milliseconds, or 5 seconds, like so:

scroll: {
  fx: 'directscroll',
  duration: 5000,
  onBefore: function( data )  {
    …
  }
}
1 Like
7

Great Thanks

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.