2023年1月6日 13:38:32go评论76阅读模式

英文:

Carousel - linking to slide from another page - why Url Hash Navigation not working?

问题

I apologize, but it seems like you've requested code translation, and you'd like only the translated parts. Here's the translation of the non-code parts:

"Can't get the link with the #tag to be recognized."
- 无法使带有 #tag 的链接被识别。
"The items data-hash shows up in the browser URL window, but isn't being recognized by the script."
- "data-hash" 项目显示在浏览器的 URL 窗口中，但脚本没有识别它。
"Is this being overridden by other JS, such as this, which is in the owl.carousel_main.js file?"
- 这是否被其他 JavaScript 覆盖，比如位于 owl.carousel_main.js 文件中的代码？
"Or is there a way to give the URLHashNavigation script priority?"
- 或者是否有一种方法可以优先使用 URLHashNavigation 脚本？
"Or have I got the script in the wrong place?"
- 或者我是否将脚本放错了位置？

I hope this helps! If you have any more specific translation requests or questions, feel free to ask.

英文:

Can't get the link with the #tag to be recognised.

The items data-hash shows up in the browser URL window, but isn't being recognised by the script.

I'm using the standard script on the carousel page:

$(document).ready(function() {
			$(&#39;.sidetext-carousel&#39;).owlCarousel({
			items: 1, 
			loop: false, 
			center:true, 
			margin:30, 
			URLhashListener:true,
			startPosition: &#39;URLHash&#39;,
			});
		})

is this being overiden by other JS, such as this, which is in the owl.carousel_main.js file?

(function($) {
	&quot;use strict&quot;;
	var fullHeight = function() {
		$(&#39;.js-fullheight&#39;).css(&#39;height&#39;, $(window).height());
		$(window).resize(function(){
			$(&#39;.js-fullheight&#39;).css(&#39;height&#39;, $(window).height());
		});
	};
	fullHeight();

var carousel = function() {
	$(&#39;.sidetext-carousel&#39;).owlCarousel({
		loop:true,
		autoplay: false,
    	margin:30,
	    animateOut: &#39;fadeOut&#39;,
    	animateIn: &#39;fadeIn&#39;, 
		nav:true,
		dots: true,
		autoplayHoverPause: false,
    	items: 1,
    	navText : [&quot;&lt;p&gt;&lt;small&gt;&lt;/small&gt;&lt;span class=&#39;ion-ios-arrow-round-back&#39;&gt;&lt;/span&gt;&lt;/p&gt;&quot;,&quot;&lt;p&gt;&lt;small&gt;&lt;/small&gt;&lt;span class=&#39;ion-ios-arrow-round-forward&#39;&gt;&lt;/span&gt;&lt;/p&gt;&quot;],
		responsive:{
		  0:{
			items:1
		  },
		  600:{
			items:1
		  },
		  1000:{
			items:1
		  }
    }
	});
};
carousel();

})(jQuery);

Or is there a way to give the UrLHashNavigation script priority?

Or have I got the script in the wrong place?

Thanks.

答案1

得分: 1

没有，因为您只能调用一次Owl初始化函数。先到先得。您需要将两个设置脚本与所有轮播选项（items:1、loop:false等）合并为一个单独的调用。

由于您的第一个Owl初始化脚本位于您包含jQuery和轮播JavaScript之前，它将失败并被忽略。但由于您的..._main.js按正确顺序包含在其中，它会运行。

修复方法

合并这两个脚本，例如：

$('.sidetext-carousel').owlCarousel({
  items: 1, 
  loop: false, 
  center: true, 
  margin: 30, 
  URLhashListener: true,
  startPosition: 'URLHash',
  autoplay: false, 
  animateOut: 'fadeOut',
  animateIn: 'fadeIn', 
  nav: true,
  dots: true,
  autoplayHoverPause: false,
  navText : ["<p><small></small><span class='ion-ios-arrow-round-back'></span></p>","<p><small></small><span class='ion-ios-arrow-round-forward'></span></p>"],
  responsive:{
    0:{
      items:1
    },
    600:{
      items:1
    },
    1000:{
      items:1
    }
  }
});

请注意，我没有验证选项，我从您那里复制了它们。如果有错误，它仍然存在。

然后删除第一个初始化脚本，并在包含jQuery和Owl.js之后包含合并的初始化脚本（假设您将其放在..._main.js中）：

<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/owl.carousel_main.js"></script>

然后一切应该正常工作。

英文:

> is this being overiden by other JS, such as this, which is in the owl.carousel_main.js file?

No, because you can only call the Owl initializer function once. First come first serve. You will need to combine the two setup scripts with all the carousel options (items:1, loop:false, etc) in a single call.

Because your first Owl initializer script is placed before you included jQuery and the carousel JavaScript, it will fail and be ignored. But since your ..._main.js is included in the proper order, it runs.

To fix

Combine the two scripts, for example:

$(&#39;.sidetext-carousel&#39;).owlCarousel({
  items: 1, 
  loop: false, 
  center: true, 
  margin: 30, 
  URLhashListener: true,
  startPosition: &#39;URLHash&#39;,
  autoplay: false, 
  animateOut: &#39;fadeOut&#39;,
  animateIn: &#39;fadeIn&#39;, 
  nav: true,
  dots: true,
  autoplayHoverPause: false,
  navText : [&quot;&lt;p&gt;&lt;small&gt;&lt;/small&gt;&lt;span class=&#39;ion-ios-arrow-round-back&#39;&gt;&lt;/span&gt;&lt;/p&gt;&quot;,&quot;&lt;p&gt;&lt;small&gt;&lt;/small&gt;&lt;span class=&#39;ion-ios-arrow-round-forward&#39;&gt;&lt;/span&gt;&lt;/p&gt;&quot;],
  responsive:{
    0:{
      items:1
    },
    600:{
      items:1
    },
    1000:{
      items:1
    }
}

Note I did not validate the options, I copied them from you. If it had an error, it's still there.

Then remove the first initializer script and include the combined initializer script (assuming you put it in the ..._main.js) after including jQuery and the Owl.js: :

&lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/owl.carousel.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/owl.carousel_main.js&quot;&gt;&lt;/script&gt;

And things should work.

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。