Bootstrap:带有键盘控件的轮播

2024-01-02

有人能够用键盘控制实现 Twitter Bootstrap 轮播吗?我知道这将在下一个版本中实现,但现在我想知道你们中是否有人能够使其工作。

这是我当前的代码:

<script type="text/javascript">

  jQuery(document).keypress(function(event) {

  if (event.keyCode === RIGHT_ARROW) {
  $('a.carousel-control.right').trigger('click');

  }

  if (event.keyCode === LEFT_ARROW) {

  $('a.carousel-control.left').trigger('click');

  }

  });

</script>

但我对此毫无进展。有任何想法吗?

编辑:这是我正在运行的 WordPress 代码...

                        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

                        <article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article" itemscope itemtype="http://schema.org/BlogPosting">


                            <?php if ( $post->post_type == 'portfolios' && $post->post_status == 'publish' ) {
                            $attachments = get_posts( array(

                            'post_type' => 'attachment',
                            'posts_per_page' => -1,
                            'post_parent' => $post->ID,
                            'exclude' => get_post_thumbnail_id(),
                            'orderby' => 'menu_order',
                            'order' => 'ASC'    
                                ) );

                            ?>

                            <?php if ( $attachments ) {  
                            $the_rest = array_slice($attachments, 0, 100);
                            ?>      

                            <div id="carousel-<?php the_ID(); ?>" class="featured-carousel carousel slide carousel-fade">

                                <div class="carousel-inner">

                                    <?php 
                                    global $post;
                                    $post_num = 0;  
                                    foreach( $the_rest as $attachment) :
                                    $image = wp_get_attachment_image_src( $attachment->ID, 'orion-thumb-900', false );
                                    $post_num++;
                                    ?>          

                                    <div class="item <?php if($post_num == 1){ echo 'active'; } ?>">
                                    <?php echo "<img src='" . $image[0] . "'>"; ?>  
                                      <div class="container">
                                      </div> <!-- /.container -->
                                    </div> <!-- /.item -->

                                    <?php endforeach; ?>          

                                    <?php } ?>

                                    <?php } ?>      

                                </div> <!-- /.carousel-inner -->

                                    <a class="left carousel-control" href="#carousel-<?php the_ID(); ?>" data-slide="prev">&lsaquo;</a>
                                    <a class="right carousel-control" href="#carousel-<?php the_ID(); ?>" data-slide="next">&rsaquo;</a>

                            </div> <!-- /.carousel -->

                                <section class="entry-content clearfix">

                                    <?php the_content(); ?>

                                    <?php orion_related_posts(); ?>

                                </section> <!-- end article section -->

                        </article> <!-- end article -->

                    <?php endwhile; ?>  

感谢那,

轮播事件和设备支持就更好了 - 如今“点击”很糟糕!

    $(document).bind('keyup', function(e) {
        if(e.which == 39){
            $('.carousel').carousel('next');
        }
        else if(e.which == 37){
            $('.carousel').carousel('prev');
        }
    });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap:带有键盘控件的轮播 的相关文章

随机推荐

  • 如何在代码隐藏中使用 Eval 来设置 Page.Title

    我有一个绑定到 ListView 控件的 SQLDataSource 但我想将部分绑定记录放入 HTML TITLE 属性中 这是我想要更改的代码隐藏文件 以便它可以使用 Eval 根据数据内容构建动态 TITLE Public Parti
  • 汇编 x86 中的 Math.h 库函数? [复制]

    这个问题在这里已经有答案了 我尝试将 Linux fedora 9 下编写的 C 代码转换为汇编 x86 代码 但是 我在 Math h 函数中遇到问题 该库中的函数 例如 ceil floor log log10 pow 在 x86 汇编
  • Java 中 volatile 关键字最简单易懂的示例

    我正在读关于volatileJava 中的关键字并完全理解其中的理论部分 但是 我正在寻找的是一个很好的案例 它展示了如果变量不存在会发生什么volatile如果是的话 下面的代码片段无法按预期工作 摘自here https stackov
  • 回发后视图状态不保留

    我在保持控件回发时的视图状态时遇到一些问题 vb net 这是我在控制中放入的一些代码 Protected Overrides Sub OnInit ByVal e As System EventArgs MyBase OnInit e M
  • 如何避免在 TEdit 聚焦时按下 Escape 时发出叮当声?

    在我几年前开发的代码中 我经常使用它来随时按 Escape 键关闭当前表单 procedure TSomeForm FormKeyPress Sender TObject var Key Char begin if key 27 then
  • Shibboleth - 如何读取属性?

    我已使用 Shibboleth 成功登录到我的服务提供商测试页面 然后我转到 Shibboleth sso Session 页面 我看到以下内容 Attributes affiliation 1 value s entitlement 1
  • 我可以制作图案密码屏幕锁定 android 应用程序吗

    有人有开发应用程序来替换默认锁定屏幕的经验吗 我被告知这是不可能的 但是this http www 1mobile com pattern password screen locker 849722 html应用程序管理它 您知道的任何教程
  • 新手批量问题-创建文件

    我正在开发一个批处理程序 该程序可以扫描 PC 的各个部分 并将它们记录到文件中 令人惊讶的是 我无法让程序创建要写入的文件 然后我尝试创建一个文件 我相当确定它会起作用 如下 echo off ipconfig gt ip txt tim
  • Android:视图类和活动类的 startActivityForResult 和 setResult

    我很困惑 不知道如何使用 startActivityResults 和 setResults 从以前的活动中获取数据 我有一个视图类和一个活动类 基本上在我的视图类中 我有这个对话框 它实际上会启动称为 colorActivity 类的活动
  • 如何使 Spark 驱动程序能够适应 Master 重启?

    我有一个 Spark Standalone 不是 YARN Mesos 集群和一个正在运行的驱动程序应用程序 在客户端模式下 它与该集群通信以执行其任务 但是 如果我关闭并重新启动 Spark 主节点和工作节点 驱动程序不会重新连接到主节点
  • 写入文本文件

    我正在寻找一种用 C 写入文本文件的方法 我创建了一个表单 其中包含名字 姓氏 电话号码 出生日期的文本框 当用户点击按钮时 我希望将该信息写入文本文件 我发现的例子并没有真正告诉我如何做到 所以这就是我在这里问的原因 最简单的方法就是使用
  • Spark中Map任务内存消耗巨大

    我有很多文件 大约包含 60 000 000 行 我的所有文件都采用以下格式 timestamp producer messageId data bytes n 我一一浏览我的文件 并且还想为每个输入文件构建一个输出文件 因为有些台词依赖于
  • robocopy 无效参数“-”

    我正在尝试完成我的批处理脚本 但在某些情况下它会失败 这是我正在运行的命令 ROBOCOPY C test dash2 Hello 4 C test dash2 Hello 4 MOV 这是我收到的错误 ROBOCOPY Robust Fi
  • 将图例名称设置为匿名 geom_function

    有没有办法为匿名 geom function 设置图例名称 我设法为不同种类的鸢尾花找到一个图例 但也想为我的产品线提供一个标签 非常感谢 data iris iris gt ggplot aes x Sepal Length y Sepa
  • Django modelformset_factory 删除标记为删除的模型表单

    使用 modelformset factory 时 如何从数据库中删除表单中标记为删除的对象 我像这样创建 modelformset factory ItemFormset modelformset factory Item ItemMod
  • 为什么需要这么长时间才能匹配?这是一个错误吗?

    我需要匹配 Web 应用程序中的某些 URL 即 123 456 789 并编写此正则表达式来匹配模式 r d 我注意到 即使在测试模式几分钟后 它似乎也没有进行评估 re findall r d 12345121 223456 12312
  • 纯CSS连续水平文本滚动不中断

    我正在尝试创建一个带有水平文本的新闻滚动条 该文本连续滚动 循环之间不会中断 理想情况下 解决方案是纯 css html 但我不知道这是否可能 到目前为止 这是我的初步尝试 http jsfiddle net lgants ncgsrnza
  • 默认关闭 HTML5 视频的隐藏式字幕

    这就是我所拥有的
  • 使用 CSS 将边框半径应用于滚动条

    简单地说 这就是我想要的 使用 Webkit 浏览器获得 webkit 滚动条 这就是我在 Opera 上得到的结果 Firefox 也不将边框半径应用于滚动条 但仍然应用边框 有没有一种简单的方法可以使滚动条下的边框不消失 我不需要花哨的
  • Bootstrap:带有键盘控件的轮播

    有人能够用键盘控制实现 Twitter Bootstrap 轮播吗 我知道这将在下一个版本中实现 但现在我想知道你们中是否有人能够使其工作 这是我当前的代码