wordpress - 键盘导航 - 轮播引导
问题描述
我使用带有轮播指示器(数字)的 boostrap 轮播。如果我使用键盘导航,旋转木马可以工作,但指示器不会改变
当我使用键盘进行下一个/上一个时,我希望指示器自动更改。
我的键盘导航 JS:
$(document).bind('keyup', function(e) {
if(e.which == 39){
$('.carousel').carousel('next');
}
else if(e.which == 37){
$('.carousel').carousel('prev');
}
});
我的轮播代码
<div id="testslide" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<?php if ( have_rows( 'galerie_de_photo' ) ) : ?>
<?php $count = 0; while ( have_rows('galerie_de_photo') ) : the_row(); ?>
<div class="carousel-item <?php if ($count == 0) { ?>active<?php } ?>">
<?php $visuel = get_sub_field( 'visuel' ); ?>
<?php if ( $visuel ) { ?>
<img src="<?php echo $visuel['url']; ?>" alt="<?php the_field( 'texte_alternatif' ); ?>" />
<?php } ?>
</div>
<?php
$count++;
endwhile; ?>
<?php endif; ?>
</div>
</div>
我的指标导航代码:
<?php if ( have_rows( 'galerie_de_photo' ) ) : ?>
<ol class="carousel-indicators desktopnumber">
<?php
$count = 0;
while ( have_rows('galerie_de_photo') ) : the_row();
?>
<li class="single-project-carousel-indicator-item" data-target="#testslide" data-slide-to="<?php echo $count; ?>" class="<?php if ($count == 0) { ?>active<?php } ?>"><?php echo $count + 1; ?></li>
<?php
$count++;
endwhile;
?>
</ol>
<?php endif; ?>
解决方案
试试下面的例子。
$(document).bind('keyup', function(e) {
if(e.which == 39){
$('.carousel').carousel('next');
}
else if(e.which == 37){
$('.carousel').carousel('prev');
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/500x300" alt="Third slide">
</div>
</div>
</div>
<ol class="carousel-indicators desktopnumber">
<li class="single-project-carousel-indicator-item" data-target="#testslide" data-slide-to="1" class="active">1</li>
<li class="single-project-carousel-indicator-item" data-target="#testslide" data-slide-to="2" class="">2</li>
<li class="single-project-carousel-indicator-item" data-target="#testslide" data-slide-to="3" class="">3</li>
</ol>
推荐阅读
- double-quotes - 使用带单引号或双引号的 strlen
- javascript - 用于图像预览的“保存按钮”
- nativescript - 如何使用 Nativescript 框架导入 JavaScript 数学模块?
- python - 如何使用 python 编辑文本文件中的特定行而不将文本文件中的所有内容转换为列表?
- asp.net-mvc - 外键可以在一行中重复出现吗
- wget - Wget - 下载网页中的所有文件?
- angularjs - 如何创建带有角度 d3 的自定义字符串标签的条形图?
- c# - Linq 表达式在表单中设置多个属性
- ios - 单击 UIImageView 时如何获取触摸位置?
- javascript - 如何解释 Chrome 控制台调试数据?