slider 相关问题

Jquery 滑块无法正常工作我的网页我的 HTML 代码是我的 Jquery 代码是 <question vote="-2"> <p><strong>Jquery 滑块无法正常工作我的网页</strong></p> <p>我的<em><pre><code>HTML</code></pre></em>代码是</p> <pre><code><div id="sl"></div> </code></pre> <p>我的<em><pre><code>Jquery</code></pre></em>代码是</p> <pre><code><script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $( "#sl" ).slider(); }); </script> </code></pre> </question> <answer tick="false" vote="1"> <p>这是你的演示，它的工作人员..</p> <pre><code>$(function() { $( "#sl" ).slider(); }); </code></pre> <p><a href="http://jsfiddle.net/hjEnM/" rel="nofollow">演示</a></p> <p>有滑块及其工作..还有什么你想要的..？</p> </answer> <answer tick="false" vote="0"> <p>我无法解决您共享的代码。这是一个<a href="https://john-web-guide.blogspot.com/2024/08/simple-jquery-slider-for-web.html" rel="nofollow noreferrer">简单的 jQuery 滑块</a>，可以按照它来学习如何为网页制作自定义 jQuery 滑块。它可以与 WordPress Elementor 以及其他不同的开源软件一起使用。谢谢</p> </answer> </body></html>

jquery jquery-ui slider jquery-ui-widget

回答 0 投票 0

Javascript滑块添加计数器幻灯片编号

我有一个用 Javascript、CSS 和 HTML 构建的滑块，没有依赖项。滑块工作正常。如何在 div 元素 .gallery-counter 内的 Javascript 中显示计数器幻灯片编号？对于

javascript html slider counter

回答 1 投票 0

如何使 Vuetify 轮播图像具有响应能力，尤其是在移动屏幕上？

我也尝试过用 CSS 来实现这一点，但似乎不起作用，我知道 Vuetify 轮播响应不太灵敏，但我觉得 Veutify 团队现在应该已经解决了这个问题，或者是......

javascript vue.js slider vuetify.js carousel

回答 2 投票 0

如何通过@react-native-community/slider在android中创建垂直滑块？

如标题和图片，如何通过@react-native-community/slider在android中创建垂直滑块？我尝试创建一个类似以下的滑块：但它不起作用。

javascript android react-native slider vertical-alignment

回答 3 投票 0

如何在streamlit中使用选择滑块添加浮动数字范围

我有一个sqlite数据库，其经度值的范围在24.90000到24.99999之间。我正在尝试的代码是这样的： longi_range = np.arange(24.90000, 25.00000) long_range = st.select_slider(&q...

python sqlite slider streamlit

回答 1 投票 0

当每个视图的幻灯片超过 1 时，滑动滑块最初不会加载

我在我的网站中使用滑动滑块。例如，当我每个视图的幻灯片多于 1 个时，4 个幻灯片然后当我加载第 1 页幻灯片时显示，然后一段时间后它会在滑动滑块中调整为 5 张幻灯片。

javascript jquery slider swiper.js

回答 1 投票 0

keen-slider 不适用于 next.js

我正在尝试使用 eager-slider 将以下代码（如下面的屏幕截图所示）更改为滑块形式。 {！正在加载我... 我正在尝试使用 eager-slider 将以下代码更改为滑块形式，如下图所示。 <div className="card-con mt-6"> {!loadingImages && nftDataArr.map((ele, index) => { return ( <div className="lg:w-3/12 md:w-3/12 w-full" key={index}> <div className="card"> <div className="card__cover cursor-pointer"> <Image src = {ele.image} placeholder="/img/cover/cover5.jpg" className="card__image" width="auto" height="300" /> </div> </div> </div> ) } )}; </div> 所以我更改了以下代码： <div ref={sliderRef} className="keen-slider"> {!loadingImages && nftDataArr.map((ele, index) => { return ( <div className="keen-slider__slide"> <div className="w-full" key={index}> <div className="card"> <div className="card__cover cursor-pointer"> <Image src = {ele.image} placeholder="/img/cover/cover5.jpg" className="card__image" width="auto" height="300" /> </div> </div> </div> </div> ) } )}; </div> 但是敏锐的滑块不起作用，卡片显示如下图所示。请让我知道我做错了什么以及如何解决它。我也遇到了同样的问题。我设法通过制作来修复它 useKeenSlider() 的选项对象作为空状态对象。当我通过 useEffect() 获取我的物品时然后我用我需要的属性设置对象。它似乎这会触发参考更新，从而更新幻灯片。 const [options,setOptions] = useState({}); const [sliderRef, slider] = useKeenSlider(options); const [slides, setSlides] = React.useState([]); useEffect(()=>{ var data = getDataValues(); setSlides(data); setOptions({ slidesPerView: 1, mode: "free-snap", centered: true, loop: false, initial: 0, slideChanged(s) { setCurrentSlide(s.details().relativeSlide); }, }); }) Keen Slider 需要幻灯片在初始化时计算边界，创建后添加的任何幻灯片都不会被考虑在内，并且必须调用 slider.update()。但是，由于您只有 on 状态来表示图像是否被渲染，因此您可以将滑块作为整体包装在您的条件内： {!loadingImages && ( <div ref={sliderRef} className="keen-slider"> ... </div> )} 或者如之前提到的，当图像准备好时致电 slider.update()。为了避免闪烁，您可以相应地添加 visibility: hidden。您可以这样更新滑块： const [ref, internalSlider] = useKeenSlider({...}) useEffect(() => { internalSlider?.current?.update(); }, [elements]); 这就是我的解决方案。我在使用 eager-slider 时遇到的问题是，我的 API 调用会在滑块渲染后加载图像，而 eager-slider 不喜欢这样。我解决这个问题的方法是在父组件中运行 GQL 调用，然后加载完成后将结果传递给保存 eager-slider 的滑块子组件。除此之外，在加载时我只显示一个加载图标。我已经通过更新滑块解决了这个问题，如下所示： const [marqueeTopPlayers, setMarqueeTopPlayers] = useState([]); const [loading, setLoading] = useState(true); let { marqueeData } = props; const [sliderRef, slider] = useKeenSlider({ loop: true, mode: "free-snap", slides: { perView: 5 }, drag: true, }, ) useEffect(() => { hugeWinPlayes(); }, []) useEffect(() => { if (!loading && slider.current) { slider.current.update(); } }, [loading, slider]); const hugeWinPlayes = async () => { try { const response = await casinoService.casinoHugeWinByPlayers(); setMarqueeTopPlayers([...response.top_casino_wins, ...response.top_sportsbook_wins]); } catch (error) { console.error("Error fetching marquee huge win api data:", error); setMarqueeTopPlayers(dummyMarqueeData); } finally { setLoading(false); } }

reactjs slider next.js

回答 5 投票 0

为什么 SwiftUI Slider 不会触发小范围的更改？

我试图让滑块更新一个值（如果它发生变化）。在本例中，我正在寻找 0 到 4 范围内的下限和上限。如果最小值大于最大值，我想要 m...

ios swift swiftui slider visionos

回答 1 投票 0

如何在 SwiftUI 中创建绑定到 Int 类型属性的滑块？

我有一个带有名为“score”的 Int 属性的视图，我想用滑块进行调整。结构 IntSlider: 查看 { @State var 分数：Int = 0 var body: 一些视图 { VStack{...

swiftui slider

回答 4 投票 0

如何将滑块附加到 Compose 中的栏底部？

我想制作一个 Spotify 克隆应用程序，我正在尝试构建一个类似图像的底部栏，但我无法在没有填充的情况下将滑块附加到底部。 @可组合有趣的底部栏播放器（公关...

android kotlin android-jetpack-compose slider

回答 1 投票 0

如何使用 Jetpack Compose 画布创建半圆形滑块？

我是 Android Studio 的新手，需要制作一个滑块来查看 Arduino 通过 Wi-Fi 接收的数据（温度和光线）。我想要一个 SemicircularSlider.kt 可组合项来接收

android android-jetpack-compose slider android-jetpack-compose-canvas

回答 1 投票 0

我在 Android Studio 中创建滑块时遇到问题

我是 Android Studio 的新手，需要制作一个滑块来查看 Arduino 通过 Wi-Fi 接收的数据（温度和光线）。我想要一个 SemicircularSlider.kt 可组合项来接收

android android-jetpack-compose slider

回答 1 投票 0

具有多个 useState 的 Material-UI 滑块在单击时会重复

我正在尝试使用 Material-Ui 滑块和 useState 创建字体大小和字体粗细预览器，但是当我在单击第二个滑块后单击第一个滑块时，第一个滑块会被复制。这里...

javascript reactjs material-ui slider

回答 1 投票 0

如何使用输入字段更新 mui 滑块值？

MUI 滑块以最小值和最大值运行常量 minVal = 8;常量 maxVal = 255; MUI 滑块以最小值和最大值运行 const minVal = 8; const maxVal = 255; <Slider value={range} min={minVal} max={maxVal} onChange={handleSliderChange} valueLabelDisplay="auto" /> 同时，在输入字段中显示最小百分比和最大百分比的百分比结果。两个输入字段都有一个功能，可以通过在输入字段中输入百分比来更改范围位置，但这并不按预期工作。 <TextField label="Min Percentage" value={minInput} onChange={handleMinInputChange} variant="outlined" /> <TextField label="Max Percentage" value={maxInput} onChange={handleMaxInputChange} variant="outlined" /> 输入值时，不生效，这是当前代码的问题。演示：首先你必须像这样给文本字段赋予值。您必须传递与范围滑块中传递的相同值。像这样 <TextField label="Min Percentage" value={range[0]} onChange={handleMinInputChange} variant="outlined" /> <TextField label="Max Percentage" value={range[1]} onChange={handleMaxInputChange} variant="outlined" /> 此处范围 [0] 是滑块的最小值，范围 [1] 是最大值。现在 onChange const handleMinInputChange = (event) => { const newValue = Math.min(Number(event.target.value), range[1]); setRange([newValue, range[1]]); } const handleMaxInputChange= (event) => { const newValue = Math.min(Number(event.target.value), range[0]); setRange([range[0], newValue]); } 希望它对你有用

javascript reactjs material-ui slider percentage

回答 1 投票 0

slider 相关问题

最新问题