slick.js

Is it possible to use slick.js with html5 self hosted videos, to play and pause a video without user interaction? I currently have the following code to have a dual slider with a vertical slick slideshow and a main section where the large image and video will appear and scroll automatically. This will be hosted on a television so there will be no user interaction. WelcomeTV Screen Site How can I have the slide containing video play completely once it appears and once it finishes, continue the slideshow and repeat indefinitely. The videos may contain various lengths so it would need to detect

How do I apply custom prev and next buttons to slick carousel? I have tried a background image on the .slick-prev and .slick-next css classes. I have also tried adding a new class as per the documentation but the arrows disappeared completely: <script type="text/javascript"> $('.big-image').slick({ dots: false, infinite: true, speed: 300, slidesToShow: 1, centerMode: true, variableWidth: true, nextArrow: '.next_caro', prevArrow: '.previous_caro' }); </script> Any pointers would be appreciated. tallgirltaadaa I know this is an old question, but maybe I can be of help to someone, bc this also

Somehow I'm unable to use slick carousel ( http://kenwheeler.github.io/slick/ ) correctly. I'm getting the following error: Uncaught TypeError: $(...).slick is not a function I'm running the following code in my javascript file: 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>' }); } I've included the latest jQuery version (2.1.4) with bower. I've also tried including

I'm a newbie of ionic 2, i create project and need to jquery plugin link colorbox, slick-carousel... I've run the command in a terminal npm install jquery slick-carousel typings install jquery --ambient --save typings install slick-carousel --ambient --save I have imported the JQuery: import * as JQuery from 'jquery'; import * as slick from 'slick-carousel'; Then ionic error is: Can not find module 'slick-carousel'. Please help me solve this problem, or have examples ready so I can refer to. Thanks all! Since slick-carousel doesn't have any exported modules (it just adds chainable functions

I used slick js for slider view of image. Here is my code. <div class="slider_wrap add-remove"> <%= f.fields_for :images do |image_form| %> <%#= render 'images_fields', :f => image_form %> <div> <%= image_tag image_form.object.picture.url,:class=>"drop_down_link even img_prev" %> </div> <div class="image_upload_div"> <div class="image-upload"> <label> <i class="fa fa-cloud-upload"> <%= image_form.file_field :picture ,:'data-role'=>"none",:onchange=>"readURL(this);" , :accept => 'image/jpeg , image/png' %> </i> </label> </div> </div> <% end %> <%= f.link_to_add "Add a picture", :images ,:id=>

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

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

Using Slick.js - how does one get current and total slides (ie. 3/5) as a simpler alternative to the dots? I've been told I can use the customPaging callback using the callback argument objects, but what does that mean exactly? $('.slideshow').slick({ slide: 'img', autoplay: true, dots: true, customPaging: function (slider, i) { return slider.slickCurrentSlide + '/' + (i + 1); } }); http://jsfiddle.net/frank_o/cpdqhdwy/1/ The slider object contains a variable that is containing the slide count. Slick < 1.5 $('.slideshow').slick({ slide: 'img', autoplay: true, dots: true, dotsClass: 'custom

I am using Slick carousel in one of my AngularJS application. For that I have created directive as follows: myApp.directive('slickSlider',function(){ return { restrict: 'A', link: function(scope,element,attrs) { $(element).slick(scope.$eval(attrs.slickSlider)); } } }); Here is my code in view file: <div class="clearfix" slick-slider="{dots: false, arrows: true, draggable: false, slidesToShow:3, infinite:false}"> <div class="my-slide"> <a><img ng-src="assets/img/img1.png"/></a> </div> <div class="my-slide"> <a><img ng-src="assets/img/img1.png"/></a> </div> <div class="my-slide"> <a><img ng-src=