程序员经验分享-hwhale

jQuery 滑块适用于 div 元素而不仅仅是图像

2023-12-20

我已经在我正在处理的页面底部为一些“建议项目”创建了 div 和容器，希望它成为一个滑块，您可以在其中左右单击以查看更多内容。但是我见过的所有 jQuery 滑块都只适用于图像（轮播），对于这种情况，人们可以向我推荐一些滑块，因为它不仅仅是图像。

我想我不能将 DIV 放在 UL 元素内部，因为这是我见过的所有滑块都使用的。

这是我的下面滑块区域的 html。以及该页面的链接：http://bit.ly/18IOB8J http://bit.ly/18IOB8J

<div id="carousel-left"><a href="#"><img src="http://placehold.it/20x100" /></a></div>

             <div id="suggestedproducts">
                 <div id="suggestedproduct-container">
                     <div id="suggestedproduct-img">
                        <a href="#"><img src="http://acsupply.mangdevelopment.co.uk/upload/category/5_FixingsHardwareSecurity.jpg" /></a>
                     </div>
                     <div id="suggestedproduct-desc">
                        <a href="#"><h5>JCB 650W ELECTRIC JIGSAW</h5></a>
                        <p>&#163; 59.99</p>
                     </div>
                 </div>
                 <div id="suggestedproduct-container">
                     <div id="suggestedproduct-img">
                        <div id="suggestedproduct-img">
                        <a href="#"><img src="http://acsupply.mangdevelopment.co.uk/upload/category/5_FixingsHardwareSecurity.jpg" /></a>
                     </div>
                     </div>
                     <div id="suggestedproduct-desc">
                        <a href="#"><h5>JCB 650W ELECTRIC JIGSAW</h5></a>
                        <p>&#163; 59.99</p>
                     </div>
                 </div>
                 <div id="suggestedproduct-container">
                     <div id="suggestedproduct-img">
                        <a href="#"><img src="http://acsupply.mangdevelopment.co.uk/upload/category/5_FixingsHardwareSecurity.jpg" /></a>
                     </div>
                     <div id="suggestedproduct-desc">
                        <a href="#"><h5>JCB 650W ELECTRIC JIGSAW</h5></a>
                        <p>&#163; 59.99</p>
                     </div>
                 </div><!-- suggestedproduct-container -->
                 <div id="carousel-right"><a href="#"><img src="http://placehold.it/20x100" /></a></div>

I found 基本滑块 http://www.basic-slider.com/成为最好、最容易集成的滑块脚本之一。重量非常轻，具有所有需要的选项：

  • 它可以滑动图像和/或 HTML 内容
  • 它反应灵敏
  • 提供漂亮的键盘、鼠标和滚轮控制
  • 非常容易集成和定制
  • 淡入淡出或幻灯片过渡
  • 计时选项、控制显示选项、...

它取代了我使用的所有其他滑块脚本，因为它非常容易集成和定制，而且非常轻量级，而且额外提供了很好的淡入淡出效果。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

Slider

carousel

jQuery 滑块适用于 div 元素而不仅仅是图像 的相关文章

  • 具有最大高度的 div 内的表格

    我想要一个可滚动的表格 为了实现这一点 我包装了一个 table into a div with a max height and overflow auto 除此之外 div has display inline block以确保 div

  • 如何使用 AOS 触发向上滚动动画

    我正在使用 AOS 库 css 和 js 它可以帮助我创建每次用户向下滚动页面时触发的动画 我有一个问题 页面的顶部元素仅运行一次 因为 AOS 仅在向下滚动时触发它 我希望我的所有动画在每次用户向下和向上滚动时运行 我怎样才能做到呢 这是

  • 使用图像映射生成器的一个好的替代方案是什么？ [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我有一张大图像 我想让图像的某些部分可单击 我还想指定可点击区域的形状 方形 圆形 自定义 在不依赖 Javascript 的情况下 如何

  • Chrome getUserMedia 未在本地请求权限

    我正在尝试在 Chrome 中使用 navigator getUserMedia 但是 它在本地提供时不会请求权限 file whatever index html 但在 JSFiddle 上会请求权限 http jsfiddle net

  • 以编程方式添加超链接到列表项

    我想以编程方式获得以下 HTML ul li a href a li ul 我可以添加 li to ul But a to li 不可能 My code BulletedList ul new BulletedList ListItem l

  • 在 javascript 中将 3 个函数合并为一个

    我尝试将这三个功能合二为一 但这样做后 它不起作用 你能帮我把它们结合起来吗 function showForm id name document getElementById submitForm style display block

  • 为民意调查结果创建彩色条

    在我的网络应用程序中 我想用彩色条显示民意调查结果 其长度与选票百分比成正比 如何使用 HTML CSS 实现此目的 该网站包含一些很好的示例 http apples to oranges com blog post css for bar

  • 适用于所有浏览器的 Center HTML 5 音频播放器

    我尝试过这样的代码 div style margin 0 auto div

  • Firefox 在构建页面时使白色“闪烁”

    我一直致力于构建一个带有 Flash 幻灯片组件的网站 但我有点困惑 当我在 Firefox 3 6 8 中查看该页面时 它似乎首先下载该页面的内容 并在下载幻灯片时发出白色 闪烁 但是当我在 Safari 中查看页面时 它似乎首先构建页面

  • 在页面之间传递 javascript 变量[重复]

    这个问题在这里已经有答案了 可能的重复 跨页面保留 javascript 变量 https stackoverflow com questions 1981673 persist javascript variables across pa

  • 子 div 超出父 div 范围

    目前我正在使用 CSS 和 HTML 等设计一个网站 但是我遇到了一个问题 当我向子级添加浮动时 我的子级 div 超出了父级 div 的范围 该网站位于此处我的网页设计 http 7sisters in test mintbite 更加详

  • 如何在 dash/plotly 中使用 iframe？ （Python/HTML）

    我正在创建一个仪表板 我想使用这个交互式地图 网站链接 https www ons gov uk peoplepopulationandcommunity healthandsocialcare causesofdeath articles

  • 为什么 jQuery 对损坏标记的解释与浏览器不同？

    我之前已经回答过这个问题 https stackoverflow com a 19101905 1253312 但我并不完全理解why答案是正确的 答案的要点 p p function jqrender html a href http w

  • 设置三个输入数字的最大值

    我有三个输入数字

  • 在 Bootstrap 选择器上使用 jQuery 取消选择选项

    我对一些 UI 元素使用 Bootstrap SelectPicker 它允许用户选择多个选项并将其呈现在段落标签中的屏幕上 他们还应该能够删除选定的选项 这是我的代码 用于将选定的选项渲染到屏幕上 以便每个选项旁边都会显示一个 X 单击它

  • 将“http://”添加到尚未包含“http://”的 URL 前面

    我有一个input保存 URL 的字段 我希望这个保存的输入能够识别变量开头不存在 Http 但不知道从哪里开始 是否可以仅检查字符串的一部分 然后有一个在必要时追加的函数 如果您还想允许 https 我会使用如下正则表达式 if http

  • 脚本不会从nodejs应用程序中的ejs文件运行

    我正在尝试使用nodejs express mysql和ejs让网页显示图表 但我显然不明白ejs javascript等是如何工作的 我需要运行一个脚本来设置图表 来自 Chart js 模块 但它不会输出任何类型的图表 我尝试过的 将

  • Bootstrap 面板主体，内有表格

    我有一个引导面板 单击图标即可折叠并自动关闭 该面板内部包含一个全宽的表格 但只有在没有任何内容时才看起来像这样panel body 例如 这张桌子横跨面板的整个宽度和高度 看起来不错 但如果我可以有一个围绕桌子的类 我会更喜欢 但是 如果

  • 将带有 rowspan 和 colspan 的 XHTML 表转换为 LaTeX

    我一直在寻找将 HTML 表格转换为 LaTeX 的合适解决方案 我发现以下问题与我的要求相似 XML 表到 LaTeX https stackoverflow com questions 27021926 xml table to lat

  • 在用户单击之前图像不会绘制在画布上？

    我使用执行类似以下操作的函数绘制几张图像 context drawImage img width 2 1 height 2 1 width height 我读过 我需要等待图像加载后才能绘制它 如下所示 img onload functio

随机推荐

  • 在日期时间数据类型中插入 NOW() 值将返回 0000-00-00 00:00:00

    我有一个数据库 它有一个完美运行的 NOW 函数 显示正确的日期 并且在不小心删除了它之后 我创建了一个类似的数据库 但是当我插入 NOW 来插入时 current 当前日期 它将插入为 0000 00 00 00 00 00 显示的警告是

  • 如何从 n x 3 数据集绘制非凸曲面

    R中有没有直接绘制非凸曲面的方法 我对凸面使用了类似以下的东西 效果很好 xyz lt cbind y x z tbr lt t surf tri xyz delaunayn xyz rgl triangles xyz tbr 1 xyz

  • 如何将许多 php 变量传递给 python

    我使用以下代码启动 python 脚本并向其传递 php 变量 tmp exec python path to pythonfile py myVariable mySecondVariable output 这工作得很好 我的问题是我需要

  • Etsy API 图片上传错误

    我有一个 oauth 连接 它可以很好地处理所有其他请求 但有一个 上传列表图像 这是代码 connection this gt getEtsyConnection imageApiUrl https openapi etsy com v2

  • 在 R 中使用多个更改参数应用函数

    我想对引用 R 数据框中的多列的所有行应用一个函数 例如 如果我有一个名为 data 的数据框 其中包含三个变量 var1 var2 和 var3 并且我想对每一行应用一个函数 myfunc lt function var1 var2 va

  • 获取音频文件大小而不导出

    我正在开发一个应用程序 用于导出存储在 iPod 库中的音频文件 但我应该在导出和上传之前验证文件大小 服务器有固定的最大上传大小 我知道导出文件后 大小不会相同 有什么方法可以估计新大小 主要问题 我可以在导出之前知道原始文件大小 使用

  • Python：为什么需要 functools.partial？

    部分应用很酷 有什么功能functools partial https docs python org 3 library functools html functools partial提供你无法通过 lambdas 的报价 gt gt

  • 使用 ColdFusion 的 reCaptcha v3

    我正在尝试将 reCaptcha v3 集成到 ColdFusion 站点 我对 CF 语法不太感兴趣 目前我似乎从服务器端的验证请求中没有得到任何返回 任何人都可以看到任何明显错误和 或请指出我正确的方向吗 客户端

  • 从firebase存储Xamarin获取图像下载url

    我试图从上传到 firebase 存储的照片中获取图像 url 以便我可以将图像的引用存储在另一个表中 这将使我能够在整个应用程序的其他位置显示图像 我目前有 private void UploadPhoto if filePAth nul

  • 如何使用 Python 从 Windows 7 中迭代连接的 iPhone 上的照片？

    当我将 iPhone 连接到 Windows 7 系统时 Windows 资源管理器会打开 DCIM 内容的虚拟文件夹 我可以通过 Pywin32 218 访问 shell 库接口 如下所述 我可以在 python 中使用库抽象吗 http

  • 需要配置的打字稿

    我正在构建一个 Web 应用程序 其中的开发不是基于 TypeScript 构建的 但是该应用程序具有我想要使用插件样式进行的集成点 这就是使用 TypeScript 的地方 TypeScript 代码位于第二个解决方案中 我将 js 文件

  • git status 报告新克隆的存储库中修改的文件

    Solved 远程存储库似乎包含两个名称相同的文件 除了第一个字母之外 这导致我的系统上的文件被覆盖 从而导致以下问题 Update 看起来它与换行符无关 但我还找不到解释 事情是这样的 git status报告FileStartingWi

  • 获取在 Windows 上构建轮错误 Pygame 的要求

    我正在尝试使用以下命令安装 Pygame pip install pygame我得到这个结果 pip 安装 pygame 收集pygame 使用缓存的 pygame 2 4 0 tar gz 13 2 MB 安装构建依赖项 完成 获取构建轮

  • 服务结构具有 100 万个键的可靠字典性能

    我正在使用包含约 100 万个键的可靠字典来评估 Service Fabric 的性能 我得到的结果相当令人失望 所以我想检查我的代码或我的期望是否错误 我有一本初始化的字典dict await stateManager GetOrAddA

  • jQuery.post 刷新我的页面？

    我的页面上有以下带有表单的代码 但是当我点击提交时 我的页面似乎刷新了 form

  • js如何将objectName打印到控制台

    使用 webdev 工具控制台时 如果输入浏览器对象 则会返回控制台 gt console Console gt console object Console gt console log console undefined gt Cons

  • rm 无法从脚本中通过通配符删除文件，但可以在 shell 提示符下工作

    我在 Linux shell 脚本中遇到了一个非常愚蠢的问题 我想删除目录中扩展名为 bz2 的所有文件 在我调用的脚本中 rm archivedir bz2 其中 archivedir 是目录路径 应该很简单 不是吗 不知何故 它因以下错

  • [iOS][AWS Cognito] 已弃用“登录”：使用“AWSIdentityProviderManager”

    我一直在尝试使用 Amazon Cognito 在 iOS 上使用 Facebook 和 Twitter 对用户进行身份验证 我无法实施 因为官方文件太旧了 这是我的代码 NSString token FBSDKAccessToken cu

  • 使用 Python 和 mySQL 进行动态 SQL 查询

    我有多个表 这些表在网格中的值更改后更新 这些表并不总是具有相同的键或列 因此我无法明确命名列或格式 唯一相同的是键所在的列 我知道我目前这样做的方式是不正确的 并且使我容易受到注入攻击 我还遇到了一个问题 其中某些值包含在 SQL 语句中

  • jQuery 滑块适用于 div 元素而不仅仅是图像

    我已经在我正在处理的页面底部为一些 建议项目 创建了 div 和容器 希望它成为一个滑块 您可以在其中左右单击以查看更多内容 但是我见过的所有 jQuery 滑块都只适用于图像 轮播 对于这种情况 人们可以向我推荐一些滑块 因为它不仅仅是图

热门标签