草庐IT

p_slider

全部标签

jquery - 如何制作无限滚动的图像 slider ?

我几乎完成了一个工作客户的网站,该网站的主页上有一个宽大的动态slider。由于他们给出的规范很少,目前slider非常基本;它只是通过更改UL上的左侧CSS属性从左向右滚动。显然,正因为如此,它会在到达末尾时突然滚动回开头,这显然是客户不希望看到的。我不是jQuery专家,我想知道如何轻松更改此slider,使其无限滚动。它还使用了一个简单的导航,它有四张幻灯片,底部有一个小控件栏,上面有每个控件的标题,可以快速跳转到特定的幻灯片。它还有一个箭头指向最新的幻灯片。我找到了使其循环的解决方案,但我看不到任何看起来与导航兼容的解决方案。我真的很想不必从头开始,这可能吗?这是我目前使用的所

html - Bootstrap 轮播 slider 自定义箭头

好的我正在使用bootstraps轮播slider,但使用自定义图像而不是随附的字形。然而,它的问题是它们位于slider的边缘。左上箭头为左箭头,右上为右图像。我尝试过更改位置,这很有效,但在调整窗口大小时不会停留在它们的位置。而且我不知道将代码定位到哪里,以便代码忽略将鼠标悬停在箭头上时出现的阴影。这是html。我使用开发者工具来快速查看和测试不同的选项。绝对位置不起作用。有没有其他方法可以使它们出现在与原始字形相同的位置并也做出响应?带有建议修复的图像...到目前为止,在代码中所做的更改是在轮播控件本身的类中添加了css和img-responsive。------------横幅

html - Bootstrap 轮播 slider 自定义箭头

好的我正在使用bootstraps轮播slider,但使用自定义图像而不是随附的字形。然而,它的问题是它们位于slider的边缘。左上箭头为左箭头,右上为右图像。我尝试过更改位置,这很有效,但在调整窗口大小时不会停留在它们的位置。而且我不知道将代码定位到哪里,以便代码忽略将鼠标悬停在箭头上时出现的阴影。这是html。我使用开发者工具来快速查看和测试不同的选项。绝对位置不起作用。有没有其他方法可以使它们出现在与原始字形相同的位置并也做出响应?带有建议修复的图像...到目前为止,在代码中所做的更改是在轮播控件本身的类中添加了css和img-responsive。------------横幅

javascript - Slick Slider - 框阴影被切断

问题是光滑的sliderdiv有溢出:隐藏;所以幻灯片div的框阴影不断被切断。有人遇到过这个问题吗?这是一个演示问题的fiddle:https://jsfiddle.net/2zvcud0u/HTMLLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametCSS.row{margin:20px0;}.drop-shadow{box-shadow:0px0px43px0pxrgba(0,0,0,0.35);}.content{margin:10px;}JS$('.sl

javascript - Slick Slider - 框阴影被切断

问题是光滑的sliderdiv有溢出:隐藏;所以幻灯片div的框阴影不断被切断。有人遇到过这个问题吗?这是一个演示问题的fiddle:https://jsfiddle.net/2zvcud0u/HTMLLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametCSS.row{margin:20px0;}.drop-shadow{box-shadow:0px0px43px0pxrgba(0,0,0,0.35);}.content{margin:10px;}JS$('.sl

jquery - Slick Slider 自定义 HTML 分页

是否可以像BootstrapCarousel允许的那样,仅使用HTML为SlickSlider创建自定义分页点。Bootstrap分页示例我知道您可以像这样创建自定义点;customPaging:function(slider,i){varthumb=$(slider.$slides[i]).data('thumb');return'';}但是这种方法对我想要实现的目标不起作用。这是我希望能够用作我的分页导航的内容。jQuery(document).ready(function($){ $('.step').click(function(){ varelem=$(this); va

jquery - Slick Slider 自定义 HTML 分页

是否可以像BootstrapCarousel允许的那样,仅使用HTML为SlickSlider创建自定义分页点。Bootstrap分页示例我知道您可以像这样创建自定义点;customPaging:function(slider,i){varthumb=$(slider.$slides[i]).data('thumb');return'';}但是这种方法对我想要实现的目标不起作用。这是我希望能够用作我的分页导航的内容。jQuery(document).ready(function($){ $('.step').click(function(){ varelem=$(this); va

javascript - 高度未定义的图像 slider

我正在尝试创建一个图像slider(上一个/下一个),以便当我单击“上一个”时图像向左滑动,当我单击“下一个”时向右滑动,速度为0.5秒,因此需要一些动画。当我到达最后一张图像并单击“下一步”时,我希望图像“向后运行”到第一个图像,当我在第一个图像中并单击“上一个”时相同,所以它“向前运行”直到最后一个。我想要相同的行为thisJSFiddle显示。(但我不需要计时器自动移动图像,也不需要“触发”按钮,只需要“上一个”和“下一个”)。这里的问题是我的图像没有固定大小。我以百分比定义宽度,但无法定义高度,因为我采用响应式设计,图像会随着浏览器窗口大小的调整而调整。上一个/下一个Actio

javascript - 高度未定义的图像 slider

我正在尝试创建一个图像slider(上一个/下一个),以便当我单击“上一个”时图像向左滑动,当我单击“下一个”时向右滑动,速度为0.5秒,因此需要一些动画。当我到达最后一张图像并单击“下一步”时,我希望图像“向后运行”到第一个图像,当我在第一个图像中并单击“上一个”时相同,所以它“向前运行”直到最后一个。我想要相同的行为thisJSFiddle显示。(但我不需要计时器自动移动图像,也不需要“触发”按钮,只需要“上一个”和“下一个”)。这里的问题是我的图像没有固定大小。我以百分比定义宽度,但无法定义高度,因为我采用响应式设计,图像会随着浏览器窗口大小的调整而调整。上一个/下一个Actio

javascript - 响应式、多句柄 HTML 5 或 javascript 范围 slider

我目前正在开发一个响应式网站,并且想使用一个多handle范围slider。我曾使用过一些运行正常但没有响应的javascript解决方案。我已经考虑了两个html5范围输入的选项,它们可以优雅地降级为旧浏览器上的文本输入。但是,我想知道是否有人遇到过用于具有多个句柄的范围slider的javascript解决方案,它可以在响应式环境中工作。有什么想法或提示吗? 最佳答案 你可以看看noUiSlider.它支持在许多设备上进行触摸,并且与响应式设计配合得很好。不依赖于jQuery等。披露:我做到了。