滑块和谷歌搜索之间的jQuery冲突

Question

我与编码的某些部分发生冲突，涉及jQuery：

1

 <script type="text/javascript" src="/js/jquery.bxslider.min.js"></script> 
    <link href="/newsite/jquery.bxslider.css" rel="stylesheet" />
    <script type="text/javascript">

    $(document).ready(function(){
    $('.bxslider').bxSlider({
    auto: true,
    speed: 500,
    });
    });

    </script>

2：

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
var orderByOptions = {};
orderByOptions['keys'] = [{label: 'Relevance', key: ''},{label: 'Date', key: 'date'}];
customSearchOptions['enableOrderBy'] = true;
customSearchOptions['orderByOptions'] = orderByOptions;  var customSearchControl = new       google.search.CustomSearchControl(
'001660792890902641363:fw8od_tpdvm', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
options.enableSearchboxOnly("http://www.google.com/cse?cx=001660792890902641363:fw8od_tpdvm");
customSearchControl.draw('cse-search-form', options);
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />

我已经尝试过使用$ j = jQuery.noConflict（）;在编码的第一部分，但它没有工作。几乎我搜索到这个问题的所有答案建议这样做，但它不会解决我的问题。

Answer 1

从您的css文件中的padding-top: 1000px;中删除此行.bx-wrapper .bx-page。 这与谷歌搜索重叠。你似乎也把这个类定义了两次，你需要从它们中删除。

Answer 2

我遇到了同样的问题。 Volkan在他2014年2月10日的答案中对于导致问题的原因是正确的 - 滑块周围的一个看不见的边界与Google搜索框重叠。我在Volkan描述的BXSlider CSS中找不到填充顶部代码。但是，我添加了“margin-top：15px;”带滑块的容器，处理问题（请注意，不到15像素是不够的。）