html - 使用 bxslider 脚本制作滑块,但现在 a href 不起作用,可能是什么问题?
问题描述
我使用 bxslider 在我的 blogspot 中放置了一个滑块,但现在链接(书名)不起作用。请参阅 phlawdigest.blospost.com 以查看实际站点。以下是我使用的代码。
Jquery 代码如下:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script>
$(document).ready(function() {
$('.image-left').bxSlider({
auto: true,
pause: 50000,
// in millisecond
autoHover: true, // pause on hover
autoControls: true,
captions: false,
});
});
HTML代码如下:
<div class="image-left">
<div>
<img src="URL link/>
<h2><a href = "https://amzn.to/3tu0Bxf"> Book Title One</a></h2>
<p>some text description</p>
</div>
<div>
<img src="URL link"/>
<h2><a href = "https://amzn.to/3tu0Bxf"> Book Title Two</a></h2>
<p>some text description</p>
</div>
</div>
解决方案
bxSlider
support jquery3.1.1
and you can not give appropriate css properties for your html class...
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<style>
.selected {
color: red;
}
.highlight {
background: yellow;
}
.image-left {
text-align: center;
}
img
{
width: 100%;
height: 320px;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager
{
text-align: center !important;
}
</style>
</head>
<body>
<div class="image-left">
<div>
<img src="https://images.pexels.com/photos/50594/sea-bay-waterfront-beach-50594.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<h2>
<a href = "https://amzn.to/3tu0Bxf"> Book Title One</a>
</h2>
<p>some text description</p>
</div>
<div>
<img src="https://images.pexels.com/photos/531321/pexels-photo-531321.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<h2><a href = "https://amzn.to/3tu0Bxf"> Book Title Two</a></h2>
<p>some text description</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function() {
$('.image-left').bxSlider({
auto: true,
pause: 50000,
touchEnabled: false,
// in millisecond
autoHover: true, // pause on hover
controls: true,
captions: false,
});
});
</script>
</body>
</html>
推荐阅读
- python - keras fit_generator InvalidArgumentError on last step_per_epoch
- r - 使用 R 从 PDF 提取/解析为 CSV?
- java - Kotlin 中的枚举类对于 Android 来说是否像 Java 中的“昂贵”?
- c# - 迁移已创建的表 Entity Framework
- c# - 为索引视图控制器进行多重连接时出现问题
- sql - 希望根据价格列中的最后两位数字过滤查询
- c# - C# Text-Based Game 读取为没有错误但在第一次选择后关闭
- python - 升级 Pandas - PermissionError: [Errno 13] Permission denied: '/usr/local/lib64/python3.6/site-packages/numpy'
- javascript - 使用 react-select 选择选项后如何继续输入?
- css - 按钮加载指示器边框动画