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:带有键盘控件的轮播 的相关文章

  • AngularJS - 关闭模态窗口

    我的内容包括 bootstrap css getbootstrap com 2 3 2 angular ui bootstrap tpls 0 10 0 min js from angular ui github io bootstrap
  • 将 Bootstrap 与 Bower 一起使用

    我正在尝试将 Bootstrap 与 Bower 一起使用 但由于它克隆了整个存储库 因此没有 CSS 和其他内容 这是否意味着我需要在我自己的构建过程中包含构建 Bootstrap 或者如果我错了 正确的工作流程是什么 I finally
  • 将按钮文本放在一行上

    我的按钮文本在 safari 中显示在一行上 即使在初次单击后 但是在 google chrome 上 当您第一次到达该按 钮时 我的按钮将显示在一行上 但是当您浏览更多帖子并再次遇到 加载更多 按钮时 文本搞砸了 这只发生在谷歌浏览器上
  • 与 IE8 兼容的最新 jQuery 版本是什么?

    我正在开发 Bootstrap 3 网站 并且我使用的 jQuery 版本 1 9 1 遇到了一些问题 我升级到 2 1 0 我的问题消失了 但是 这破坏了 IE8 兼容性 因为 2 1 0 不再支持 IE8 并且 jQuery 在该浏览器
  • iOS - NSNotificationCenter 多个UIKeyboard通知

    我有两个视图控制器 我们称它们为 A 和 B 1 在 A 中 我显示一个包含文本字段的 popOver 2 B中有一个UITextView用于简单的文本编辑 我必须管理 A 和 B 中的键盘才能滚动键盘隐藏的内容 我知道如何重新定位内容 我
  • 在 Bootstrap 中使用 CakePHP 时如何修改包装器 div 错误类

    我在用着Bootstrap 3 0RC1 with CakePHP 2 3 6 尝试利用那些漂亮的课程 例如has error and has warning for 验证状态 http getbootstrap com css forms
  • 如何纠正这个非法字符串偏移?

    我收到此错误 警告 第 32 行 home mysite public html wp content themes evento lib php extra class php 中的非法字符串偏移 type 我意识到文件中的这部分代码是错
  • 在 WooCommerce 中添加到购物车之前清空购物车

    我正在使用 WP 作业管理器和 Woo Subscriptions Now 最初 我选择了一个套餐 Woo Subscription 然后我添加了所有细节 但没有提交 回到网站 所以要再次购买 我需要选择一个套餐 于是我选择了套餐并填写了详
  • KeyboardAvoidingView - 隐藏键盘时重置高度

    我正在使用 React NativeKeyboardAvoidingView设置我的高度View当显示键盘时 但是当我关闭应用程序中的键盘时 视图的高度不会变回原来的值
  • 单击列表时使用 bootstrap Dropdown 防止下拉菜单消失

    我正在使用使用引导下拉菜单 http twitter github com bootstrap javascript html dropdowns生成下拉菜单 我想防止点击菜单时菜单消失 我已经实现了以下代码 但它不起作用 知道如何修复它吗
  • 如果产品重量超过1000克,如何以公斤为单位显示

    在 Storefront 主题中 我使用下面的代码将格式化重量从 1000g 更改为 1kg add action woocommerce after shop loop item title show weight 10 function
  • 在 UIWebView 中隐藏键盘

    有没有办法让 UIWebView 关闭所有关联的输入控件 例如键盘 选择器 还没有在带有选择器的网络视图中尝试过 但这绝对可以消除键盘 theWebView endEditing YES
  • 自定义箭头反应光滑

    我正在使用react slick 在我的项目中创建一个轮播 我已经阅读了文档并尝试了不同的方法 但找不到一种方法来完全按照我需要的方式自定义它 有谁知道是否有办法让 nextArrow 显示在图像前面 前面而不是显示在图像上这是正确的 请参
  • WooCommerce 从前端(而不是管理员)隐藏订单项元

    我有一些我不希望客户看到的订单项元详细信息 在帐户信息下的查看订单页面上 我找到了一个过滤器 可以从管理员 我仍然希望看到它 中删除这些数据 但找不到类似的过滤器来从前端 应该隐藏它 中删除它 这是将从后端管理中删除它的代码 对我来说毫无用
  • 如何在 django-crispy-forms 中将表单字段分布在两列布局上?

    我收到了一些使用 django crispy forms 在 Django 中创建表单的建议 我已经在文档中寻找了几个小时 但无法找出如何将表单字段分布在两列上的方法 看这个例子here https gist github com 1838
  • php laravel Blade 模板不渲染

    我正在尝试使用 Laravel 和 twitter bootstrap 设置一个基本页面 我安装了 Laravel 并获得了通用的 你在这里 或 w e 图像 这样看起来很闪亮 对于 twitter bootstrap 我在 public
  • 在跨开口的 Bootstrap 弹出窗口中保留复选框

    我在引导弹出窗口内有复选框 我将其用作表单的一部分 当用户打开弹出窗口 选择一些复选框 关闭弹出窗口 然后重新打开弹出窗口时 我遇到问题 新打开的弹出窗口不会显示用户上次打开弹出窗口时选中的框 我需要用户的选择在弹出窗口启动时保持不变 我猜
  • Ajax 内容和 jQuery 动画效果

    我正在尝试使用 jQuery 动画效果为 WordPress 帖子制作 Ajax 内容 问题是第一个动画 在本例中 fadeOut 工作正常 但第二个 FadeIn 或我尝试使用的任何动画效果没有对新内容生效 加载的内容只是出现 没有任何效
  • 2 使用我的代码在数组中查询

    我使用滑块来显示我的 WordPress 精选文章 它选择一个自定义类别并返回一定数量的帖子 如何将显示的第一篇帖子设为自定义帖子 我可以直接在滑块代码中添加特定帖子的 ID吗使该帖子首先出现 然后是原始查询返回的其他内容 例如 在页面上
  • WordPress - 类别和子类别的嵌套列表

    我正在尝试显示带有嵌套子类别的 WordPress 类别列表 到目前为止 我只能获取父类别列表或不包括父类别的子类别列表 但我无法将两者连接在一起 这是我想要创建的结果 Parent Category 子类别 子类别 Parent Cate

随机推荐

  • 如何在代码隐藏中使用 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 轮播吗 我知道这将在下一个版本中实现 但现在我想知道你们中是否有人能够使其工作 这是我当前的代码