Carousel arrows cause page to scroll up

ForumCategory: PluginsCarousel arrows cause page to scroll up
lori asked 1 year ago

The arrows on the carousel do not advance the images they cause the page to scroll up. The scroll up isn’t much, it takes you to below the image selector buttons. 
 

Carey McDonald Staff replied 1 year ago

Hi Lori – I’m not seeing the arrows, just the navigation dots in the upper right corner of the slider. Generally, however, users are more likely to use the three boxes below than to click through on the slider.

lori replied 1 year ago

Thank you for taking a look into this problem.
The arrows show up when I view the carousel on the homepage.
Are you looking at http://liviesweb.com ?
Thank you,
Lori

UCDSMcommunications replied 1 year ago

I’m also having this issue on our test site. I’ve looked through as much of the bootstrap carousel settings and documentation as I can understand and I can’t find a solution to this. You can turn off “Slide Controls” in the Carousel Settings so the arrows don’t show, but I find them to be a useful tool when someone wants to move through the items quickly (if they worked). Our images are also linked to their pertinent page.

lori replied 1 year ago

Thank you for the suggestion to turn off the slide controls. I will do this for now, and hopefully I will find an answer to solve the problem soon. It would be nice to click through the images. As a user, that is what I typically do with a slider.

2 Answers
Chris answered 3 months ago

Did anyone ever find an answer to this? I’m having the same issue, and the plugin author seems to think this error is most often caused by Javascript error. I’ve tried disabling all plugins, though, and that doesn’t seem to help.

Kevin answered 3 months ago

I ran into this same issue using version 1.0.1 of this UUA Theme – the issue is caused by the following JavaScript found in the footer.php file of the theme:

/*  Smooth scrolling anchor links */
$('a[href*=#]:not([href=#])').click(function() {
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
		|| location.hostname == this.hostname) {

		var target = $(this.hash);
		target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
		if (target.length) {
			$('html,body').animate({
				 scrollTop: target.offset().top
			}, 1000);
			return false;
		}
	}
});

 
When I removed that script, the carousel arrows worked.
I believe the purpose of this script was to add a smooth scrolling effect to anchor links on a page. If you still want anchor links to scroll smoothly to the link instead of just jumping instantly to it – you could fix the script to be more specific so that it doesn’t target the carousel links. For example, change the first line of this script to something like:

$('a[href*=#]:not([href=#],.carousel a)').click(function() {
Kevin replied 3 months ago

You may also want to adjust the height of the ‘.carousel .carousel-indicators’ element because it overlaps on top of the right-side arrow making it less clickable than the left side is.

Chris replied 3 months ago

Brilliant! Works for me! Thanks so much!