When I try to implement this Slick slider I get only a list of the numbers like in the image:
https://codepen.io/AntFArm/pen/JNEgJE
html code:
<div class="main">
<div class="slider slider-for">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class="slider slider-nav">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class="action">
go to slide 3
go to slide 4
go to slide 5
</div>
</div>
js code:
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider-nav').slick('slickGoTo', slideno - 1);
});
I get this:
I have the exact same code as on the codepen.io site..
Also I don't have any errors.
What am I doing wrong? THanks in advance.
My script includes:
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<script src="/js/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css"/>
<script type="text/javascript" src="/assets/slick/slick.min.js"></script>
<script>
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider-nav').slick('slickGoTo', slideno - 1);
});
</script>
I load the necessary files in head:
Javascript is run as it is seen. Seeing as your code doesn't work I have to assume that you are adding your script in the <head> or at least before where you define <div class="main">. The rendering engine has not yet rendered your relevant slider elements so it cannot find them and does... nothing.
Either wrap your script in an onload (or a $(function() {/* your code here */})) or put your script at the bottom of your page
Seems like slick default styles are not applied double check you have them and the path to them is correct.
<link rel="stylesheet" type="text/css" href="/assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css"/>
In your codepen, slick is not loaded so you get the default DOM display of your divs (one under each other). There must be something wrong with your loading of the scripts.
Related
My case is I'm showing some photos with variable width on a 100% div so it adjusts to the browser width. I set slick.js in centerMode and now I want to style the 'edge' images that are just partially visible.
For this I need to know which slides are visible or not.
I know if you use slidesToShow to the right number you can style the css of 'slick-active' but the problem is that my container total width depends on user screen size and also my slides have variable width so I can't know how many slides to show.
How can I calculate easily what slides are currently visible or not? (for me the partial visible should be marked as hidden)
Fiddle example
$(".slider").slick({
focusOnSelect: true,
centerMode: true,
centerPadding: '10%',
slidesToShow: 2,
arrows: false,
infinite: true,
variableWidth: true
});
.slider div {
padding: 0 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css">
<div class="slider">
<div><img src="https://via.placeholder.com/300x200"></div>
<div><img src="https://via.placeholder.com/400x200"></div>
<div><img src="https://via.placeholder.com/100x200"></div>
<div><img src="https://via.placeholder.com/250x200"></div>
<div><img src="https://via.placeholder.com/300x200"></div>
<div><img src="https://via.placeholder.com/400x200"></div>
</div>
I write code here to get current active(showing) slide list, and get count, and do some action when slide is change: Fiddle Demo
$(".slider").slick({
focusOnSelect: true,
centerMode: true,
centerPadding: '10%',
slidesToShow: 2,
arrows: false,
infinite: true,
variableWidth: true,
});
doMyAction($(".slider").slick('slickCurrentSlide'));
$(".slider").on('swipe', function(event, slick, direction){
doMyAction($(".slider").slick('slickCurrentSlide'));
});
function doMyAction(currentSlick){
// your acction for current slick
console.log('Current Slick:', currentSlick);
}
console.log(getActiveSlickLength());
function getActiveSlickLength()
{
return $('.slick-active').length;
}
console.log(getActiveSlickIndexList());
function getActiveSlickIndexList()
{
var indexes = [];
$.each($('.slick-active'), function(key, value){
indexes[key] = $(value).data('slick-index');
});
return indexes;
}
.slider div {
padding: 0 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css">
<div class="slider">
<div><img src="https://via.placeholder.com/300x200"></div>
<div><img src="https://via.placeholder.com/400x200"></div>
<div><img src="https://via.placeholder.com/100x200"></div>
<div><img src="https://via.placeholder.com/250x200"></div>
<div><img src="https://via.placeholder.com/300x200"></div>
<div><img src="https://via.placeholder.com/400x200"></div>
</div>
I use swipe event to do action when change active slick, so that you
detect or update list on every swipe to your action, and other option
can be access, or updated as you want dependence of swipe or any other
code idea.
Note: This solution will return current active slick slides as you want, but not make sure if its optimal solution with slick.js.
You can just make the right styling for the major breakpoints using slick.js responsive method. I had to do that recently and on some breakpoints I had to turn off the centerMode and change how many images are visible so you will control how many images are visible at all times. I hope that helps if you need to see an example of the code I used please let me know!
I have a slick slider with thumbnails as the dot navigation but the thumbs are coming up as undefined. Here is my code. Any help is greatly appreciated!
<section class="slider">
<div data-thumb="images/3white.svg?$staticlink$"><img src="images/cutaway3.png?$staticlink$"></div>
<div data-thumb="images/4white.svg?$staticlink$"><img src="images/cutaway4.png?$staticlink$"></div>
<div data-thumb="images/5white.svg?$staticlink$"><img src="images/cutaway5.png?$staticlink$"></div>
<div data-thumb="images/6white.svg?$staticlink$"><img src="images/cutaway6.png?$staticlink$"></div>
<div data-thumb="images/7white.svg?$staticlink$"><img src="images/cutaway7.png?$staticlink$"></div>
<div data-thumb="images/8gray.svg?$staticlink$"><img src="images/cutaway8.png?$staticlink$"></div>
<div data-thumb="images/9gray.svg?$staticlink$"><img src="images/cutaway9.png?$staticlink$"></div>
<div data-thumb="images/Pgray.svg?$staticlink$"><img src="images/cutawayP.png?$staticlink$"></div>
</section>
<script type="text/javascript">
$(".slider").slick({
autoplay: false,
dots: true,
customPaging : function(slider, i) {
var thumb = $(slider.$slides[i]).data('thumb');
return '<a><img src="'+thumb+'"></a>';
},
responsive: [{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2
}
}]
});
Here is an example which may help you:
$('.slider').slick({
autoplay: false,
dots: true,
customPaging: function(slider, i) {
var thumb = $(slider.$slides[i]).data('thumb');
return '<a><img width="20" src="' + thumb + '"></a>';
},
responsive: [{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2
}
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<section class="slider">
<div data-thumb="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"><img src="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"></div>
<div data-thumb="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"><img src="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"></div>
<div data-thumb="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"><img src="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"></div>
<div data-thumb="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"><img src="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"></div>
<div data-thumb="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"><img src="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"></div>
<div data-thumb="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"><img src="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"></div>
</section>
I am learning Web Design using many plugins. slippry.js is one of them but I could not figure what is wrong with my codes given bellow. I get nothing on page. Thank you
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/slippry.min.js"></script>
<link rel="stylesheet" href="css/slippry.css"/>
<script>
JQuery(document).ready(function() {
JQuery('#pictures-demo').slippry({
slippryWrapper: '<<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
}); });
</script>
HTML Code (index.html)
<div class="sy-box pictures-slider">
<div class="sy-slides-wrap">
<div class="sy-slides-crop">
<ul id="pictures-demo">
<li title="And this is some very long caption for slide 3. Yes, really long.">
<img src="images/MainBackground.png" alt="demo1_3">
</li>
<li title="And this is some very long caption for slide 4.">
<img src="images/MainBackground2.png" alt="demo1_4">
</li>
</ul>
</div>
</div>
You mistake is parameter of
slippryWrapper
hastwo
starting angular bracket
here :
<script>
JQuery(document).ready(function() {
JQuery('#pictures-demo').slippry({
slippryWrapper: '<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
}); });
</script>
There are some typos like "JQuery" (it must be: "jQuery") or a double < for the property slippryWrapper.
The updated code:
jQuery(document).ready(function () {
jQuery('#pictures-demo').slippry({
slippryWrapper: '<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/booncon/slippry/master/dist/slippry.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/booncon/slippry/master/dist/slippry.css"/>
<div class="sy-box pictures-slider">
<div class="sy-slides-crop">
<ul id="pictures-demo">
<li title="And this is some very long caption for slide 3. Yes, really long.">
<img src="http://slippry.com/assets/img/image-3.jpg" alt="demo1_3">
</li>
<li title="And this is some very long caption for slide 4.">
<img src="http://slippry.com/assets/img/image-4.jpg" alt="demo1_4">
</li>
</ul>
</div>
</div>
I am attempting to add animation to the text on my slides built with slick.js. I attempted to use some code form this post(Slick Carousel target active slide to add and remove animation classes) but it is not adding any classes.
I feel like there is something wrong with my callback functions since I do not see these classes being added. Anyone have an idea?
<script>
$(document).ready(function(){
$('.featured-wrap').slick({
infinite: true,
speed: 400,
autoplaySpeed: 6000,
autoplay: true,
fade: true,
slide: 'div',
cssEase: 'linear',
dots: true,
arrows: true,
pauseOnHover: false,
adaptiveHeight: true
});
});
</script>
<script>
$(document).ready(function(){
$('.featured-wrap').on('afterChange', function(event, slick, currentSlide){
$('.slick-active .display').removeClass('hidden');
$('.slick-active .display').addClass('animated fadeInDown');
});
$('.featured-wrap').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('.slick-active .display').removeClass('animated fadeInDown');
$('.slick-active .display').addClass('hidden');
});
});
</script>
html code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script src="app2.js"></script>
<style>
body {
background-color: lightblue;
}
#slickslide {
height: 200px;
background: lightgray;
}
#content {
margin: auto;
padding: 20px;
width: 80%;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<div id="demo"></div>
<div id=content>
<div id="slickslide" slick="">
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
<div><h1>4</h1></div>
<div><h1>5</h1></div>
</div>
</div>
</body>
</html>
JavaScript code
function myFunction() {
$(document).ready(function(){
$('#slickslide').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1
});
});
}
<link rel="stylesheet" type="text/css" href="jquery-tooltip/jquery.tooltip.css"/>
<script type="text/javascript" src="jquery-tooltip/jquery.tooltip.js"></script>
<div id="baby" title="My tootip">The text</div>
<script type="text/javascript">
$(function(){
$('#baby').tooltip({
track: true,
delay: 0,
showURL: false,
showBody: " - ",
extraClass: "pretty",
fixPNG: true,
opacity: 0.95,
left: -120
});
});
</script>
The files are found, and they are not 404.
Can't confirm your problem. Your code copy/pasted works just fine
Demo http://jsbin.com/iwojo3