天道酬勤,学无止境

jQuery UI Slider Interference with slick carousel

The drag gesture is interfering with the slider from jQuery UI and the slick carousel plugin (also jQuery). See my example here.

HTML

<div class="stack">
    <div class="boxes">
         <h1>1</h1>
         <div class="slider"></div>
    </div>
    <div class="boxes">
        <h1>2</h1>
    </div>
    ...
</div>

JS

$('.stack').slick({
    centerMode: true,
    centerPadding: '80px',
    arrows: false,
    variableWidth: true,
    dots: true,
    swipeToSlide: true,
    focusOnSelect: true
});

$('.slider').slider({
    max: 100,
    min: 0,
    value: 93
});

How can I resolve this issue?

评论

Since your <div class="slider"> is a children of <div class="stack"> you can try to stopPropagation() for the events in slider which propagates to slick carousel provoking it to swipe. This seems tricky however since there is no method to stops and start the slick it's an easy approach to achieve your goal. So you can use:

$(".slider").on("slide mouseenter mousedown",function(event){
    event.stopPropagation();
});

You can see the result in this working JSFIDDLE

Hope this helps,

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • jQuery UI 可在 Slick-slider 中拖动(jQuery UI draggable inside Slick-slider)
    问题 我需要在 Slick-slider 中有一个 jQuery UI 可拖动元素。 我知道 jQuery UI 有 handles 选项 http://jqueryui.com/draggable/#handle 但我不确定如何将它应用到 slick-slider。 我发现了这个问题:jQuery UI Slider Interference with slick carousel 但它使用的是 jQuery UI 的slider选项。 当我在我的例子中做了类似的事情时,我能够禁用光滑的滑块拖动......但我的可拖动元素仍然不可拖动。 JSfiddle:http://jsfiddle.net/NateW/u1burczm/ 仅当 Slick-slider 位于我的draggable元素之一内并且仍然可以draggable元素时,我如何禁用拖动? HTML: <div class="wrapper-slider"> <div> <div id="draggable" class="ui-widget-content"> <p>Drag me around</p> </div> <div id="draggable" class="ui-widget-content"> <p>and me!</p> </div> </div> <div><h3>1</h3><h3>1</h3>
  • jQuery UI draggable inside Slick-slider
    I need to have a jQuery UI draggable element inside a Slick-slider. I know that jQuery UI has the handles option http://jqueryui.com/draggable/#handle but I'm not sure how to apply this to the slick-slider. I found this SO question: jQuery UI Slider Interference with slick carousel but it's using jQuery UI's slider option. When I did something similar on my example I was able to disable the slick-slider dragging... But my draggable elements still aren't draggable. JSfiddle: http://jsfiddle.net/NateW/u1burczm/ How do I disable dragging on the Slick-slider only when it's inside one of my
  • 成功调用ajax后重新初始化Slick js(Reinitialize Slick js after successful ajax call)
    问题 我正在使用 Slick 进行轮播实现,页面加载时一切正常。我想要实现的是,当我进行 Ajax 调用以检索新数据时,我仍然想要 slick 轮播实现,但此刻我失去了它。 我已经把对 slick 的调用放到了一个函数中 function slickCarousel() { $('.skills_section').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 1 }); } 然后我在成功回调中调用该函数 $.ajax({ type: 'get', url: '/public/index', dataType: 'script', data: data_send, success: function() { slickCarousel(); } }); 但是没有调用该函数。 我怎样才能重新初始化这个js? 回答1 你应该使用 unslick 方法: function getSliderSettings(){ return { infinite: true, slidesToShow: 3, slidesToScroll: 1 } } $.ajax({ type: 'get', url: '/public/index', dataType: 'script', data: data_send, success
  • 在光滑的轮播中为视频添加自动播放(add autoplay for video in slick carousel)
    问题 我在我的页面上使用了 slick carousel http://kenwheeler.github.io/slick/,现在我需要添加带有自动播放功能的视频。 我用这个代码 HTML <div class="main-slider" id="main-slider"> <div> <div class="video-wrapper"> <video autoplay loop class="pageBackground-video"> <source src="/Content/video/332145276.mp4" type="video/mp4"> </video> </div> </div> <div> <div class="video-wrapper"> <video autoplay loop class="pageBackground-video"> <source src="/Content/video/332145276.mp4" type="video/mp4"> </video> </div> </div> </div> 和脚本 $('#main-slider').slick({ slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 30000, dots: true
  • Slick-carousel 如何在通过 youtube api 打开视频时停止自动播放(Slick-carousel how to stop autoplay when video is on via youtube api)
    问题 嗨,当我在滑块内使用 youtube 剪辑时,我无法让圆滑的轮播 (http://kenwheeler.github.io/slick/) 停止自动播放。 有人说我可以使用 onAfterChange 但仍然不知道如何在视频打开时关闭自动播放(请注意这是鼠标不在视频上时) 这是我正在使用的任何帮助的代码:) $("#slider").slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, dots: true, autoplay: true, autoplaySpeed: 7000, infinite: true }); /* **************************************** * * Youtube API * Create player * **************************************** */ var player; window.onYouTubePlayerAPIReady = function() { $("#player").hide(); var player_id = 'player'; var $player = jQuery('#'+player_id); var parent = $player.parent(); player
  • 调整窗口大小时,光滑的滑块没有响应(Slick slider not being responsive when resizing the window)
    问题 我使用光滑的滑块在 WordPress 中创建了一个图像滑块。 我正在使用中心模式我想要一张图像居中,每边一个稍微显示。 但是我遇到了一些问题。 首先,当我调整窗口滑动滑块的大小时,在与滑块交互之前不会计算新的图像宽度,这是演示中不存在的问题。 其次,每一侧的图像都没有像他们应该的那样显示。 https://codepen.io/Reece_Dev/pen/xLQwEb $('.carousel').slick({ centerMode: true, centerPadding: '0px', slidesToShow: 1, }); #container{ width: 100%; } .slick-slide img{ width: 80%; height: auto; max-width: 2000px; } <script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> <link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
  • 带有 Angular 2 的光滑旋转木马(Slick Carousel with Angular 2)
    问题 嗨,我从 Angular 2 开始,并试图让这个旋转木马插件工作:slick 一段时间后,我设法让它像这样的组件一样工作: import { Component, Input, ElementRef, AfterViewInit, AfterContentInit} from '@angular/core'; declare var jQuery: any; @Component({ selector: 'slick-slider', template: ` <ng-content></ng-content> ` }) export class SlickSliderComponent implements AfterContentInit{ @Input() options: any; $element: any; defaultOptions: any = {}; constructor(private el: ElementRef) { } ngAfterContentInit() { for (var key in this.options) { this.defaultOptions[key] = this.options[key]; } this.$element = jQuery(this.el.nativeElement).slick(this
  • Slick Slider - Implement using php causes background-image bug
    Good day all, I have made a rather cute slick-slider. It works a treat before I make it utilise PHP and host it on my site. $(function() { //console.log( "ready!" ); // SLIDER console.clear(); var carousels = $('.funky-slider'); var config = { dots: true, arrows: false, infinite: true, speed: 700, autoplay: false, autoplaySpeed: 5000, slidesToShow: 3, slidesToScroll: 1, swipeToSlide: true, pauseOnHover: false, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 2 } }, { breakpoint: 767, settings: { slidesToShow: 1 } } ] }; carousels.slick(config); carousels.on('breakpoint', function
  • Slick Carousel Uncaught TypeError:$(…).slick不是一个函数(Slick Carousel Uncaught TypeError: $(…).slick is not a function)
    问题 我无法以某种方式正确使用光滑轮播(http://kenwheeler.github.io/slick/)。 我收到以下错误: Uncaught TypeError: $(...).slick is not a function 我在我的javascript文件中运行以下代码: function initSlider(){ $('.references').slick({ dots: false, infinite: true, speed: 300, slidesToShow: 1, autoplay: true, prevArrow: '<div class="slick-prev"><i class="fa fa-chevron-left"></i></div>', nextArrow: '<div class="slick-next"><i class="fa fa-chevron-right"></i></div>' }); } 我在凉亭中包含了最新的jQuery版本(2.1.4)。 我还尝试将jQuery CDN包含在布局模板文件的头部,但这也无法解决任何问题。 唯一奇怪的是,当我不使用函数调用滑块时,它确实可以工作,但是却给我错误: Uncaught TypeError: Cannot read property 'add' of null
  • Slick Carousel with Angular 2
    Hi I'm starting with Angular 2 and trying to make this carousel plugin to work: slick After a while I managed to make it work like a Component like this: import { Component, Input, ElementRef, AfterViewInit, AfterContentInit} from '@angular/core'; declare var jQuery: any; @Component({ selector: 'slick-slider', template: ` <ng-content></ng-content> ` }) export class SlickSliderComponent implements AfterContentInit{ @Input() options: any; $element: any; defaultOptions: any = {}; constructor(private el: ElementRef) { } ngAfterContentInit() { for (var key in this.options) { this.defaultOptions[key
  • 圆滑的轮播缓动示例(Slick Carousel Easing Examples)
    问题 我正在使用 Slick Carousel (http://kenwheeler.github.io/slick/),但不知道如何合并不同的幻灯片过渡。 有人有例子可以分享吗? 这是我目前拥有的: $('.slider1').slick({ autoplay:true, autoplaySpeed: 4500, arrows:false, slide:'.slider-pic', slidesToShow:1, slidesToScroll:1, dots:false, easing: 'easeOutElastic', responsive: [ { breakpoint: 1024, settings: { dots: false } }] }); 现场 - http://lantecctc.businesscatalyst.com/ 回答1 使用cssEase而不是 easing - 这是slick 上详述的符号。 不确定是否允许使用“easeOutElastic”; 据我所知,slick 使用标准的 CSS3 动画,且 easeOutElastic 不是支持的值之一。 您最接近的选择可能是缓出:http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp 从有用的评论更新:
  • 如何在Slick轮播项目之间添加空格(How add spaces between Slick carousel item)
    问题 我想在两个光滑的轮播项目之间添加空间,但不希望使用填充空间,因为这会减小我的元素大小(我也不想那样)。 $('.single-item').slick({ initialSlide: 3, infinite: false }); .slick-slider { margin:0 -15px; } .slick-slide { padding:10px; background-color:red; text-align:center; margin-right:15px; margin-left:15px; } <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script> <link href="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css"
  • 光滑的旋转木马 - 强制幻灯片具有相同的高度(Slick carousel - force slides to have the same height)
    问题 我在使用具有不同高度的多个slidesToShow的 Slick carousel JS 插件时遇到了问题。 我需要幻灯片具有相同的高度,但是使用 CSS flex-box 它不起作用,因为幻灯片具有冲突的 CSS 定义。 另外,我在论坛和网络上没有找到任何有用的东西。 HTML <div class="slider"> <div class="slide"> <p>Lorem ipsum.</p> </div> <div class="slide"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p> </div> <div class="slide"> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <div class="slide"> <p
  • Uncaught TypeError: jQuery(...).slickLightbox is not a function
    I'm trying to add a Lightbox to my slick slider. But when I implement it, Console puts out that there is no function slickLightbox. Uncaught TypeError: jQuery(...).slickLightbox is not a function How can I solve this? Please see my Code below. I'm using shopify. The CSS files are included in the <head> and should be fine. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.css"/> <link rel="stylesheet" type=
  • 未捕获的类型错误:jQuery(...).slickLightbox 不是函数(Uncaught TypeError: jQuery(...).slickLightbox is not a function)
    问题 我正在尝试为我的光滑滑块添加一个灯箱。 但是当我实现它时,Console 显示没有函数 slickLightbox。 未捕获的类型错误:jQuery(...).slickLightbox 不是函数 我该如何解决这个问题? 请在下面查看我的代码。 我正在使用shopify。 CSS 文件包含在<head> ,应该没问题。 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.css"/> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" /> <div class="slider-for" style="margin-bottom: 30px;"> {% for
  • 引导列内的光滑滑块自定义点(Slick slider custom dots inside bootstrap columns)
    问题 我有 6 个引导程序列,其中包含每张幻灯片的简短描述。 是否可以用这些列替换默认的光滑滑块点? 最重要的部分是我想保留现有的布局,而不是像默认点那样将它们全部内联。 jsfiddle 演示 例如,当幻灯片 4 处于活动状态( autoplay: true )时,第 4 列将具有红色背景色。 如果幻灯片 5 处于活动状态,则第 5 列将具有红色背景,依此类推。 HTML <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js"><
  • Slick-carousel how to stop autoplay when video is on via youtube api
    Hi i'm having trouble to get slick carousel (http://kenwheeler.github.io/slick/) to stop the autoplay when I'm using a youtube clip inside the slider.. Someone said that I can use onAfterChange but still dont know how to turn off the autoplay when video is on (mind that this is when mouse in NOT on the video) Here is the code I'm using any help would be nice :) $("#slider").slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, dots: true, autoplay: true, autoplaySpeed: 7000, infinite: true }); /* **************************************** * * Youtube API * Create player * ******************
  • Slick slider custom dots inside bootstrap columns
    I have 6 bootstrap columns that contain a short description for each slick slide. Is it possible to replace the default slick slider dots with these columns? The most important part is that I want to keep the existent layout and not having them all inline like the default dots. jsfiddle demo As an example, when the slide 4 is active ( autoplay: true ), column 4 will have a red background color. If slide 5 is active, column 5 will have a red background and so on. HTML <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <link href=
  • Slick slider not being responsive when resizing the window
    I have created a image slider in WordPress using slick slider. I am using center mode I want one image centered with one on each side slightly showing. But I am having a few problems. Firstly when I resize the window slick slider doesn't calculate the new image widths until I interact with the slider, this is problem is not present in the demo. Secondly the images on each side aren't showing like they should. https://codepen.io/Reece_Dev/pen/xLQwEb $('.carousel').slick({ centerMode: true, centerPadding: '0px', slidesToShow: 1, }); #container{ width: 100%; } .slick-slide img{ width: 80%; height
  • How add spaces between Slick carousel item
    I want to add space between two slick carousel items, but not want the space with padding, because it's reducing my element size(and I don't want that). $('.single-item').slick({ initialSlide: 3, infinite: false }); .slick-slider { margin:0 -15px; } .slick-slide { padding:10px; background-color:red; text-align:center; margin-right:15px; margin-left:15px; } <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="http://cdn.jsdelivr.net/jquery