问题标签 [sliders]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
626 浏览

html - 调整窗口大小时如何缩放文本字段和滑块 (HTML/JADE/CSS)

我目前有一个名为 controPanelChamber 的 div,其中嵌套了一些其他 div,如下所示(在全屏时):在此处输入图像描述这很棒。代码如下

这正是我想要的样子;但是,当我调整窗口大小时,并非所有内容都会相应地缩放,如果窗口足够小,它会看起来像下面这样在此处输入图像描述我的 CSS 看起来像这样:

我对前端开发相当陌生,但我的理解是使用 VW 是为了确保尺寸相对于窗口保持不变,这样无论窗口的尺寸如何,以 VW 单位指定大小的对象都会保持不变相对相同。我无法弄清楚如何使控制面板在所有窗口大小的第一张图像中看起来都一样,所以任何帮助将不胜感激,谢谢!

0 投票
1 回答
1527 浏览

jquery - bxslider 仅适用于垂直滚动,而不适用于水平滚动

我正在尝试在网站侧边栏上实现一个 bxslider,但由于某种原因,当我将模式设置为“水平”时,它只有在我将模式设置为“垂直”时才有效,这应该是默认设置,或者什么都不放对于模式,滑块过渡不起作用。我正在尝试完成一个滑块,一次显示一张幻灯片并自动转换到下一张幻灯片,但即使垂直滚动工作,我仍然必须手动点击寻呼机才能到达下一张幻灯片。我很好奇这个问题。

我的 jQuery

0 投票
0 回答
247 浏览

jquery - 实现特定 CSS 和/或 JQuery 滑块布局效果的首选方法

我有一个正在构建的线框。

在此处输入图像描述

我一直在寻找实现这种滑块格式的方法,但我的搜索仅限于看起来与我正在构建的不同的轮播滑块。

我遇到的一些链接看起来很有用: 显然我需要 10 个声望来共享超过 2 个链接,所以我从链接中删除了前缀......

-css3.bradshawenterprises.com/sliding/

-jqueryrain.com/2014/12/bee3d-slider-touch-enabled-pure-js-plugin/

-cssslider.com/carousel-slider-17.html

-jqueryrain.com/demo/3d-slider-carousel/

-codepen.io/Rowno/pen/Afykb

-desandro.github.io/3dtransforms/docs/card-flip.html

要注意:

该站点主要使用 Bootstrap 构建,但 Bootstrap 似乎没有实现这种滑块格式的方法。

我已经尝试过其中的一些方法,例如jquery 的.carousel() 和 .carouselSlider() 但即使加载了 jQuery,我也收到错误消息说这些不是函数并且无法呈现与旋转木马。

到现在为止,我回到了第一方,发现自己使用自定义 position:absolute、top:、left: 和 z-index: CSS 值从头开始构建它,这似乎非常低效,因为我必须解决动画方面的问题幻灯片,此自定义 CSS 目前不支持。

此外,目前这可能不太重要,虽然我只是想找到最好和最有效的方法来构建它,但这些幻灯片应该是按顺序进行的,以便逐步形成过程。(即:用户在完成当前表单/幻灯片之前不能转到下一张幻灯片)。

几个问题:

-描述我的设计的最合适/相关的搜索词是什么?

  • “轮播滑块”是正确的术语还是我应该寻找动画/过渡

我当前的代码:

结论:

- 所以,是的,我现在的代码显然效率低下,在尝试集成自定义 JS/JQuery 代码以使实际滑块动画/功能正常工作时,这将是一个主要问题。有几种方法可以做到这一点,但在我投入大量时间到我最终发现客观上缺乏选择的一套方法之前,四处询问似乎是最好的举措。

0 投票
1 回答
463 浏览

jquery - 可编辑范围滑块

我想根据我输入的值更改滑块的值。(可编辑滑块)

0 投票
0 回答
47 浏览

javascript - 导航和 bx 滑块不起作用

我正在一个网站上工作,当您单击顶部的特定导航时,下面的切片会更改其中的信息。该片段内部的信息是一个特色视频和一个用于切换该特色视频的侧滑块,以及它下方的一个水平滑块展示产品。

有人可以看看我的代码并告诉我它有什么问题。我已经解决了大约 2 周的问题,但似乎找不到解决方案:/

非常感谢

HTML:

这是我的代码笔 http://codepen.io/anon/pen/EgZAGG

0 投票
1 回答
336 浏览

javascript - 将值设置为滑块输入的正确方法是什么?(量角器自动化)

我在 html 代码中有这个滑块输入:

在此处输入图像描述

在此处输入图像描述

(对不起,这是一张图片,我无法访问页面的代码,我只需要测试它)。

我正在尝试这段代码:

例如,“价值”为“100”。

终端没有显示任何错误,但我没有看到滑块做任何事情..

我尝试了几件事,例如使用不同的选择器,但仍然相同。

有人可以帮我吗?

0 投票
1 回答
3091 浏览

javascript - swiper api - 如何阻止幻灯片过度滚动

我正在使用 iDangerous Swiper。默认情况下,如果您触摸并向右拖动第一张幻灯片,它允许您将其强制向右移动,类似于 iphone 浏览器的工作方式,它有点弹性并且只允许您拖动一点。是否有一个参数来防止这种情况?我还希望最后一张幻灯片不能向左滑动更多,因为它会显示下面的内容。

0 投票
1 回答
67 浏览

php - 编辑滑块图像和链接的最佳方式

我在索引页面中有一个滑块,它有 3 张图片,并且这些图片有链接。更改图片和链接的最佳方法是什么:制作数据库表滑块:

并使用它,或在 config->settings.php 中制作如下内容:

并像这样使用它:

?

0 投票
1 回答
810 浏览

d3.js - 如何移动或设置 d3.js 滑块手柄

我有一个 d3.js 滑块句柄,当对单击事件执行计算时,我需要将其移动到适当的刻度线。现在,这是它在页面加载时的样子:

在此处输入图像描述

然后我使用 javascript 执行计算,得到这个值:

var sl1 = (100 * ((ec 1 .value + ec[3].value / ec[0].value)).toFixed(0);

现在,我想移动手柄以匹配 sl1 计算值。我正在使用以下内容:

问题是,每次用户点击时,它都会不断添加一个新句柄。如下所示:

在此处输入图像描述

如何使句柄“刷新”或仅显示单个句柄而不是不断添加新句柄?

感谢任何回应。

0 投票
1 回答
96 浏览

sliders - JSXGraph:如何在框外创建滑块

我正在将 JSXGraph 库用于应用程序。我知道如何使用库附带的默认滑块。但是,我想知道的是如何使用我自己创建的滑块,这些滑块位于电路板之外以链接到图表。

谢谢,

奥马尔