asked on

Bootstrap slider help

Hello- Please see here: test.magickitchen.com/responsive/

The slider at the top, I would like two changes.

1. I'd like the picture to be smaller, The size is: 1,140px × 450px (scaled to 1,583px × 625px). I guess that's because of my screen size. I'd like it to be smaller in height, it doesn't really work well on a mobile either.

2. I'd like it to scroll automatically.

Thanks in advance for your help.

Rob

1. I'd like the picture to be smaller, The size is: 1,140px × 450px (scaled to 1,583px × 625px). I guess that's because of my screen size. I'd like it to be smaller in height, it doesn't really work well on a mobile either.

Because the site is responsive, the image fills the width of the screen. If you want the height of the image to be different you either need to reduce the width of the image or post another image with a different ratio of width to height.

2. I'd like it to scroll automatically.

I'm assuming it's this plugin? => http://dimsemenov.com/plugins/royal-slider/documentation/#api

in your
$(document).ready(function() {
...
slider.startAutoPlay();
...
});

Melody Scott

ASKER

Thanks! I'm attaching the js code, could you help me with where to put it?

custom.js

Rob

In the section (I've added the code at the end):

if($('.animated-fullwidth').length){
		jQuery.rsCSS3Easing.easeOutBack = 'cubic-bezier(0.175, 0.885, 0.320, 1.275)';
		$('.animated-fullwidth').each(function(index, el) {
			$(this).royalSlider({
				arrowsNav: true,
				arrowsNavAutoHide: false,
				fadeinLoadedSlide: false,
				controlNavigationSpacing: 0,
				controlNavigation: 'bullets',
				autoScaleSlider: true, 
				autoScaleSliderWidth: 960,     
				autoScaleSliderHeight: 350,
				imageScaleMode: 'fill',
				imageAlignCenter:false,
				blockLoop: true,
				loop: true,
				numImagesToPreload: 6,
				transitionType: 'fade',
				keyboardNavEnabled: true,
				block: {
					delay: 400
				}
			});	
// You can get slider instance from royalSlider data:
var slider = $(this).data('royalSlider');
slider.startAutoPlay();
		});
	}

Open in new window

Melody Scott

ASKER

I believe I added it correctly, but it isn't auto-playing: http://test.magickitchen.com/responsive/js/custom.js

Rob

That's ok, we'll try a different tact. Instead of trying to call a function, just add the autoplay as another option when creating it:

autoPlay: {
            // autoplay options go gere
            enabled: true,
            pauseOnHover: true
      }

Melody Scott

ASKER

test.magickitchen.com/responsive/js-plugins/royalslider/royalslider.css

I added it there, but I'm not sure that's what you mean?

Rob

No...add it to the .js not the .css

Same place you put my code before http:#a40537730, except within the initialization

Ie

if($('.animated-fullwidth').length){
		jQuery.rsCSS3Easing.easeOutBack = 'cubic-bezier(0.175, 0.885, 0.320, 1.275)';
		$('.animated-fullwidth').each(function(index, el) {
			$(this).royalSlider({
				arrowsNav: true,
				arrowsNavAutoHide: false,
				fadeinLoadedSlide: false,
				controlNavigationSpacing: 0,
				controlNavigation: 'bullets',
				autoScaleSlider: true, 
				autoScaleSliderWidth: 960,     
				autoScaleSliderHeight: 350,
				imageScaleMode: 'fill',
				imageAlignCenter:false,
				blockLoop: true,
				loop: true,
				numImagesToPreload: 6,
				transitionType: 'fade',
				keyboardNavEnabled: true,
				block: {
					delay: 400
				},
autoPlay: {
                // autoplay options go gere
                enabled: true,
                pauseOnHover: true
          }
			});	

		});
	}

Open in new window

Melody Scott

ASKER

Beautiful! Can I slow it down?

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Melody Scott

ASKER

Perfect, thanks for your help- and your patience!