Tag: slick.js

如何使用光滑的大宽度滑块制作块: 我有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 […]

光滑的滑块转到第一张幻灯片: “滑动”滑块设置为自动播放。在播放时，幻灯片从左到右或从头到尾。当最后一张幻灯片到达滑块时，它会从最后一张幻灯片开始自动播放，然后向后滑动。我想在最后一张幻灯片到达滑块时从第一张幻灯片而不是最后一张幻灯片播放滑块。最初当无限滚动为’真’时，一切都运行正常。但由于要求，我必须将无限滚动设置为’false’。当无限滚动设置为’false’时，会出现上述问题。当滑块到达最后一张幻灯片时，我设法显示警告。我想要做的是当滑块到达最后一张幻灯片时，我想转到第一张幻灯片而不是显示警告。这是小提琴。 $(document).ready(function() { var slider2 = $(‘.slider-2’).slick({ dots: true, infinite: false, autoplay: true, autoplaySpeed: 1000, pauseOnFocus: false, pauseOnHover: false, pauseOnDotsHover: false, slidesToShow: 1, slidesToScroll: 1, fade: true, cssEase: ‘linear’ }); slider2.on(‘afterChange’, function(event, slick, currentSlide){ // slick – is a slider object with a lot of […]

选项卡面板可以在移动视图中滑动？: 我有一个标签式菜单，我希望在移动视图中可以滑动选项卡式菜单（ ul class=”tabs” ）。编辑：我发现使用Slick JS的片段，我从来不知道这个JS，但我希望它在我当前的选项卡式菜单上应用这个codepen 。如何正确地结合我当前的标签菜单？我试图将它组合起来，但我的选项卡式菜单的当前UI设计变得混乱了。这是我的选项卡式菜单 Tab 1 Tab 2 Tab 3

滑动更改时，滑动滑块暂停youtubevideo: 我使用Jquery Slick Slider创建了一个图像滑块，它也有youtubevideo剪辑。当页面加载youtubevideo设置为滑块的第一张幻灯片时，它是自动播放并开始播放。我想，当我将滑块更改为下一张幻灯片时，youtubevideo停止播放。我看看其他stackoverflow的答案，但找不到任何东西。我试过这个 – 这是我的div结构 – 我用JS – $(“#mainSlider”).slick({ dots: true, autoplay: false, autoplaySpeed: 7000, speed: 500, pauseOnHover: true, responsive: [ { breakpoint: 1025, settings: { arrows: true, dots: false } } ] }) .on(‘afterChange’, function( e, slick, currentSlide ) { $(‘.bumper’).css(‘display’, ‘block’); playpausevideo($currentSlide.eq(e).data(‘youtubeplayer’), ‘pause’) }); Youtube JS – function onYouTubeIframeAPIReady(){ […]

Slick Slider slickGoTo方法打破了旋转木马: 我正在制作一个新闻文章页面，其中还有一个图像库。我正在使用光滑的滑块来显示图库上的缩略图。图库中的每个图片都有自己的url，用于广告查看目的（不是很好但我无能为力），例如our-url.com/category/articlewithgallery1,2或3等… 我正在使用这样的响应断点： $(‘.gallery-thumbs’).slick({ slidesToShow: 5, slidesToScroll: 5, dots: false, infinite: false, speed: 300, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 5, slidesToScroll: 5 } }, { breakpoint: 600, settings: { slidesToShow: 4, slidesToScroll: 4 } }, { breakpoint: 438, settings: { slidesToShow: 3, slidesToScroll: 3 } }, { breakpoint: 270, settings: { […]

Slick.js删除图像周围的蓝色高光: 我正在使用Slick.js在模态中构建旋转木马。一切都很完美，直到我点击图像。出现蓝色边框，遗憾的是我无法弄清楚如何让它停止这样做。我试过大纲：没有和边界：没有，但没有成功。这是我的代码 HTML： X CSS： /* Slider */ .slick-slider { margin: 110px 35px 0 0; position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; […]

光滑在桌面上显示2行，6个项目，在移动设备上显示1行，1个项目: 有人可以帮我弄清楚为什么我的代码不起作用？我想在全宽上完成2行和6个项目，在移动设备上尝试1个项目。 $(‘.your-class’).slick({ slidesToShow: 1, rows:2, slidesPerRow: 3, responsive: [{ breakpoint: 500, settings: { arrows: true, infinite: false, rows:1, slidesPerRow: 1, slidesToShow: 1, } }] }); your content your content your content your content your content your content http://codepen.io/Kibs/pen/aNzvBG 谢谢

在同位素（砖石）网格中使用带有背景图像的Slick Carousel – 幻灯片的高度变为1px: 我正在使用同位素来生成块的动态网格。有些街区内可以有旋转木马。我正在使用Slick Carousel（ http://kenwheeler.github.io/slick/ ）来做到这一点。这是一个例子> http://jsfiddle.net/9dja3omp/1/ $(function () { var $container = $(‘.grid’).imagesLoaded( function() { $container.isotope({ itemSelector: ‘.block’, gutter: 0, transitionDuration: 0 }); }); setTimeout(function(){ var carousel = $(“.carousel__container”); carousel.slick({ speed: 700, arrows: false, adaptiveHeight: true }); console.log(“load carousel”); }, 3000); }); 在我初始化同位素后，我初始化旋转木马，然后它将幻灯片的高度更改为1px。我怎么解决这个问题？

slick.js出错：“未捕获的TypeError：无法读取属性’添加’为null”: 我使用光滑的js来获取图像的滑块视图。这是我的代码。 image_form %> “drop_down_link even img_prev” %> “none”,:onchange=>”readURL(this);” , :accept => ‘image/jpeg , image/png’ %> “add_pic” ,:class=>”js-add-slide”, :style=>”display: none;”%> function silder(){ slideIndex = 0; $(‘.add-remove’).slick({ slidesToShow: 2, slidesToScroll: 2 }); $(‘.js-add-slide’).on(‘click’, function() { $(‘.add-remove’).slick(‘slickAdd’); }); $(‘.js-remove-slide’).on(‘click’, function() { $(‘.add-remove’).slick(‘slickRemove’); }); }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); […]

成功调用ajax后重新初始化Slick js: 我正在使用Slick进行轮播实现，当页面加载时一切正常。我想要实现的是当我进行Ajax调用以检索新数据时，我仍然需要光滑的轮播实现，此刻我失去了它。我把光滑的调用放到了一个函数中 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(); } }); 但是这个function没有被调用。我怎样才能重新初始化这个js？