Tag: slider

如何使用光滑的大宽度滑块制作块: 我有2个光滑的幻灯片。第一个是组件，第二个是（分组）选项。每个组件至少有一个或多个组。当用户单击某个组件时，我必须显示此组件选项（但已分组）。并且用户必须浏览以查看其所选组件的所有选项。我的幻灯片正在运行但问题是，当此组件中只有一组选项以及该组中的多个选项时，无法显示所有选项。只有第一个选项可见，其他选项位于组块的末尾，因此不可见。不可能滑动看其余的。另一个问题是，“下一步”按钮未被禁用。这里https://jsfiddle.net/odLmujfq/32/在第一个组件的唯一一组中可以看到4个选项。这是我的js： (function( $ ) { ‘use strict’; $(document).ready(function(){ var curCompIndex; var curComponent; initCompSlide(); initOptSlide(); function initCompSlide(){ $(‘#vpc-components .vpc-components’).not(‘.slick-initialized’).slick({ infinite: false, slidesToShow: 4, slidesToScroll: 4, prevArrow: $(‘#vpc-components button.vpc-arrow-prev’), nextArrow: $(‘#vpc-components button.vpc-arrow-next’), responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true […]

将滑块值传递给其他函数: 几天前我发布了一个类似的问题，并做了更多的研究和编码，现在我已经陷入了困境。我是一个完整的新手，需要更多的帮助。我目前在同一页面上成功渲染了一个滑块和两个图表。我想将滑块的值传递给两个图表函数，以便在移动滑块时刷新图表。滑块是使用jQuery UI函数生成的。图表由Highcharts函数生成。 jQuery Slider API中有一个名为“value（）”的“方法”，它将检索滑块的值，如下所示： var selection = $( “.selector” ).slider( “value” ); 目前，图表的值被硬编码为图表function代码中的数字。我想根据滑块的值动态更新图表的值。想法？谢谢，克里斯

当手风琴菜单关闭时，jquery停止图像滑块: http://jsbin.com/emoba5/3/edit点击此处查看演示如果所有菜单项都关闭，有人知道如何使图像滑块变为空白吗？如果只有一个图像，即姿势3，我们如何使它停在第一个图像上我难倒了？！

jQuery滑块：只有最后一个滑块在页面上工作，有多个滑块: 我正在制作一个包含多个滑块的页面，其中滑块的数量和选项因用户而异。我遇到了创建和显示所有滑块的问题，但只有最后一个滑块可以拖动。简单的jsfiddle来演示我在说什么： http ： //jsfiddle.net/2crev/3/ 我不确定这里的问题是什么。所有滑块的ID都是唯一的，我在html之后创建了滑块。有谁知道发生了什么事？谢谢！在FF 26，Chrome 31，IE 11上遇到问题。 HTML： CSS： div.slider { margin-top: 5px; margin-bottom: 30px; } JS： var numberOfSliders = Math.floor(Math.random()*5) + 2; for (var i=0; i < numberOfSliders; i++) { // Insert HTML var html = 'Slider ‘+i+” +”; document.getElementById(‘sliders’).innerHTML += html; // Create Slider $(‘#slider-‘+i).slider({ value: […]

光滑的jQuery：TypeError无法读取未定义的属性’unslick’: 我已经完成了一个ajax调用来检索数据，我想将这些图像放在一个Slick轮播中。问题是 – 我读过 – Slick只能看到静态数据，所以一旦图像在html中，我就要关闭开启Slick。它应该编码如下。 $(‘.slick-media’).slick(‘unslick’).slick(‘reinit’); 但我得到了这个错误： TypeError无法读取undefined属性’unslick’ 在我的代码中，我有2个光滑的旋转木马。一个是静态的，第二个是在ajax调用接收数据时通过jQuery构造的。如果我试图取消静态旋转木马，那么它的工作原理。但是我无法取消第二个轮播，这是动态构建的（我得到了错误）。你有什么主意吗？这是我宣布我的2个旋转木马的方式。 $(document).ready(function(){ $(‘.carousel’).slick({ //properties }); $(‘.product_carousel’).slick({ //properties }); });

找到当前的幻灯片div并添加Class: 我正在尝试将Class添加到Current Slider div，我正在使用Jssor Slider ，我已经尝试过将JS添加到当前幻灯片中，但是它没有用。我在Jssor Call中使用了这个JS。 // event fired when slider is “parked” jssor_slider1.$On( $JssorSlider$.$EVT_PARK, function(slideIndex){ var allImages = $(jssor_slider1.$Elmt).find(“img[u=image]”); var currentImage = allImages.eq(slideIndex); var currentDiv = currentImage.parent(“div”); currentDiv.addClass(“current”); }); // event fired when slider starts moving jssor_slider1.$On( $JssorSlider$.$EVT_POSITION_CHANGE, function(position){ // remove ‘current’ class from all slides $(jssor_slider1.$Elmt).find(“.current”).removeClass(“current”); }); 下面的Jssor电话： jQuery(document).ready(function($) { //Define an […]

使用Video.js暂停jQuery Cycle: 我有一个jquery循环滑块，我需要在播放video或达到显示video的幻灯片时暂停。（这些选项中的任何一个都没问题，但我无法弄清楚如何暂停具有特定类或ID的幻灯片。）我正在使用video.js来显示video。发生的事情是当我按下播放video开始播放时，但当我将鼠标移开video时它会自动转到下一张幻灯片。如果我点击寻呼机缩略图它会暂停，但如果幻灯片正常进行并按下播放，它将遵循周期’超时’设置的规则。我正在寻找的是一种在播放video时暂停幻灯片放映的方法 – 通过在video开始播放时调用事件，或者在到达video幻灯片时完全暂停幻灯片放映。我头脑中有这个： jQuery(document).ready(function($) { $(“.project_slides”).cycle({ fx:’fade’, timeout: 5000, prev : ‘#prev’, next : ‘#next’, pager : ‘#pager’, pause: 1, pagerAnchorBuilder: function(idx, slide) { return ‘#pager li:eq(‘ + (idx) + ‘) a’; } }); $(‘#pager a’).click(function() { $(‘.project_slides’).cycle(‘pause’); }); function pauseitall() { $(‘.project_slides’).cycle(‘pause’); } }); 并在身体： $(function() { _V_(“video_11”).ready(function() { […]

在JQuery Slider上添加-webkit-linear-gradient时，-moz-linear-gradient break: TL; DR -webkit-linear-gradient正在破坏-moz-linear-gradient 所以听到这个难题，我正在使用带有两个手柄的Jquery Slider插件，我有一个渐变作为背景颜色，以给外部范围一些颜色。我想要做的是在滑块移动时更新渐变的百分比。它适用于Chrome / Safari，但在使用-moz和-webkit标记时不适用于Firefox。该值是从第一个滑块的位置拉出的。当我只有-moz-linear-gradient标签时，它可以工作，但是只要我添加-webkit-linear-gradient标签就会中断Firefox。这是代码 HTML： Traffic Allocation Change by dragging handles right or left and applying changes Control: JavaScript的： $(function() { $( ‘.slider’ ).slider({ range: true, values: [35, 70], min: 0, max: 100, step: 5, slide: function( e, ui ) { //Derive calling (class selector) element’s ID […]

Slider在jQuery选项卡中不起作用: 我想在jQuery选项卡中使用2个jQuery Flexsliders。选项卡1上的滑块工作正常，但它在选项卡2中不起作用。以下是JSFiddle代码的完整演示：演示： http://jsfiddle.net/vH5DT/ jQuery代码： $(document).ready(function() { $(‘#tabvanilla’).tabs({ hide: “heightFade”, show: “heightFade”, collapsible: true }); $(‘#flexslider1’).flexslider({ animation: “slide”, slideshow: true, controlsContainer: “.flex-container1”, directionNav: true, controlNav: true }); $(‘#flexslider2’).flexslider({ animation: “slide”, slideshow: true, controlsContainer: “.flex-container2”, directionNav: true, controlNav: true }); }); HTML： Tab1 Tab2

fullpage.js添加滑块淡入效果: 我从未使用过fullpage.js。我尝试了很多滑块过渡效果。使用滑块效果滚动很好。它通过滚动从左向右移动但无法添加fadeIn和fadeOut效果。示例网站： http ： //www.mi.com/shouhuan/#clock我的代码： http ： //jewel-mahmud.com/demo-site/index.html var slideIndex = 1, sliding = false; $(document).ready(function() { $(‘#fullpage’).fullpage({ sectionsColor: [‘#1bbc9b’, ‘#4BBFC3’, ‘#7BAABE’, ‘whitesmoke’, ‘#ccddff’], scrollingSpeed:1000, css3: true, onLeave: function(index, nextIndex, direction) { if(index == 2 && !sliding) { if(direction == ‘down’ && slideIndex 1) { sliding = true; $.fn.fullpage.moveSlideLeft(); slideIndex–; return false; […]