Slick carousel - modified
by pradeep
HTML
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.2/slick-theme.css">
<div class="slider">
<div>
<input type="radio" name="slide-1" class="r-button"/>
<input type="radio" name="slide-1" class="r-button"/>
<input type="radio" name="slide-1" class="r-button"/>
Slide 1
</div>
<div>
<input type="radio" name="slide-2" class="r-button"/>
<input type="radio" name="slide-2" class="r-button"/>
<input type="radio" name="slide-2" class="r-button"/>
Slide 2
</div>
<div>
<input type="radio" name="slide-3" class="r-button"/>
<input type="radio" name="slide-3" class="r-button"/>
<input type="radio" name="slide-3" class="r-button"/>
Slide 3
</div>
</div>
CSS
body { background: #3498db; text-align: center; }
.slider { margin: 50px; background: white; }
.slider div { width 200px; height: 200px; margin-top: 40px; }
JavaScript
$(function(){
var slider = $('.slider').slick({
draggable: false,
touchMove: false,
fnCanGoNext: function(instance, currentSlide){
console.log("fnCanGoNext called");
var currentSlide = instance.$slides.eq(currentSlide);
var radios = currentSlide.find(".r-button");
if(radios.is(":checked")){
return true; // allow to go to next
} else {
return false; // cannot go to next
}
}
});
});
// Slick JS - modified by alan0xd7
/*
_ _ _ _
___| (_) ___| | __ (_)___
/ __| | |/ __| |/ / | / __|
\__ \ | | (__| < _ | \__ \
|___/_|_|\___|_|\_(_)/ |___/
|__/
Version: 1.5.2
Author: Ken Wheeler
Website: http://kenwheeler.github.io
Docs: http://kenwheeler.github.io/slick
Repo: http://github.com/kenwheeler/slick
Issues: http://github.com/kenwheeler/slick/issues
*/
/* global window, document, define, jQuery, setInterval, clearInterval */
(function(factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof exports !== 'undefined') {
module.exports = factory(require('jquery'));
} else {
factory(jQuery);
}
}(function($) {
'use strict';
var Slick = window.Slick || {};
Slick = (function() {
var instanceUid = 0;
function Slick(element, settings) {
var _ = this,
dataSettings, responsiveSettings, breakpoint;
_.defaults = {
accessibility: true,
adaptiveHeight: false,
appendArrows: $(element),
appendDots: $(element),
arrows: true,
asNavFor: null,
prevArrow: '<button type="button" data-role="none" class="slick-prev"...