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!
Related
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.
I am currently creating my webpage using HTML/CSS with the addition of Javascript slick slider. I am currently using the regular slider code for my gallery tab, however, my previous arrow button (.slick-prev:before) is submerged behind my div class "slider_1", with my .slick-next:before arrow working how it should be comfortably sitting outside of the div.
I have added margin and padding to .slick-prev:before however it only pushes the arrow further out of sight within the div.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<link href="styles.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
}
.slick-slide
{
margin: 0px 0px 0px 60px;
}
.slick-prev:before,
.slick-next:before
{
color: black;
}
</style>
</head>`
`<div class="slider_1">
<div><img src="twitter.png" width="400px" height="400px">Photo1</div>
<div><img src="twitter.png" width="400px" height="400px">Photo2</div>
<div><img src="twitter.png" width="400px" height="400px">Photo3</div>
<div><img src="twitter.png" width="400px" height="400px">Photo4</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider_1').slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
I would like to be able to have my previous arrow outside of the slider div to become operable. as currently the arrow simply sits behind my images inside the slider not serving any purpose.
Understanding:
Having read your question, I feel your experiencing layer problems, in that your next and previous buttons are hidden behind other web elements.
Solution:
We can write some CSS that tells it to alter the layer position to a higher layering number, to do this we use CSS using the Z-Index property and assign a high number such as 99 to ensure it sits above all other elements on the webpage.
To use z-index we must specify a position property with the value of fixed, absolute or relative.
In my example, I have used the relative value, so that it doesn't tamper with where the arrows were originally positioned.
Code to try:
.slick-prev, .slick-next{
position: relative;
z-index:99 !important;
}
However, if you find that the code only affects 1 of your sliders, then you might want to add an ID to the sliders HTML and write your CSS as follows:
#slider_1.slick-prev, #slider_1.slick-next{
position: relative;
z-index:99 !important;
}
Then alter the affected slider's HTML to have the ID in it also
<div class="slider1" id="slider1">
There's a few issues with video backgrounds in the Slick.js carousel that I am running into.
HTML:
<div id="mySlick">
<div class="item">
<img class="carousel-item-background" src="images/01.jpg">
</div>
<div class="item">
<img class="carousel-item-background" src="images/02.jpg">
</div>
<div class="item">
<img class="carousel-item-background" src="images/03.jpg">
</div>
<div class="item">
<div class="carousel-item-background">
<video class="bgVid" autoplay muted loop preload>
<source src="video.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
JS:
$("#mySlick").on('init', function(event. slick){
$(".carousel-item-background").each(function(){
$(this).find('.bgVid').get(0).play();
});
});
$("#mySlick").slick({
dots: false,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 10000,
arrows: true,
focusOnSelect: true
});
function reloadBGVid(){
$("video[class='bgVid']").each(function(){
var ve = $(this);
var $video = ve.get(0);
if ($video.paused){
$video.play();
}
});
};
Barring the CSS I excluded, the slider loads and appears fine. I can click next and previous through the slider all the way around. The first time I click NEXT all through the slider, when I arrive at the video slide, the video will start from the beginning, and the first time I click PREVIOUS to the video slide, even if I have waited a few seconds for the video to start playing, I can see during the transition between the FIRST slide and the LAST slide that the video has progressed, but when the transition ends, the video rewinds to the beginning and plays from there. I have NO afterChange calls in my script.
The second issue I have is responsive. I have a media query in the CSS, if the window is less than 768px wide, the video is set to display: none. I have a jQuery function, if the window is 768px or larger, the media query is nullified and the reloadBGVid() function is called. But no matter how I target the .bgVid, it simply will not play the video again.
The code you posted in your question contains errors and does not work at all.
I cannot find a reason to have both autoplay attribute in video tag and oninit event handler.
Also it is not clear where you're calling reloadBGVid function.
So I'm just leaving for you the snippet below in hope it helps:
$(document).ready(function() {
$("#mySlick").on('init', function(event) {
$(".carousel-item-background .bgVid").each(function(i, e) {
e.play();
});
});
$("#mySlick").slick({
dots: false,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 10000,
arrows: true,
focusOnSelect: true
});
function reloadBGVid() {
$("video.bgVid").each(function(i, e) {
if (e.paused) e.play();
});
}
});
body {background: #259}
#mySlick {width:436px; height:300px; margin: auto}
video {width:426px; height:240px; object-fit:cover}
<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet" />
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<div id="mySlick">
<div class="item">
<img class="carousel-item-background" src="https://picsum.photos/426/240?1">
</div>
<div class="item">
<img class="carousel-item-background" src="https://picsum.photos/426/240?2">
</div>
<div class="item">
<img class="carousel-item-background" src="https://picsum.photos/426/240?3">
</div>
<div class="item">
<div class="carousel-item-background">
<video class="bgVid" muted loop preload>
<source src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
That was probably the worst title above, but I'll try and explain my self a little better here.
At the moment I have a simple fading carousel which is powered by slick and that's working fine. It show's one slide, then fades to the next slide.
As well as that, I have a simple type writer plugin which types out the content within the slide.
The problem I'm facing is that when I trigger the typewriter function it triggers all of the content on all other carousel slides to start typewriting all at once when really I would like it to typewrite out the visible slide and then trigger again when the next slide is visible.
I've tried quite a few things but haven't had much luck. Do I have to destroy the typewriter function when it's done and then load it again on slide? If anyone could shed some light on it I'd be really appreciative.
Fiddle
$(function () {
$('#dashboard').slick({
fade : true,
autoplay: true,
autoplaySpeed: 3000,
arrows: false,
pauseOnHover: false
});
$('.panel').typeIt({});
});
If you need to use the typeit efffect for each visible slide in the slick carousel you can use the beforeChange event.
Using the last version of slick, the example is:
$('#dashboard').slick({
fade : true,
autoplay: true,
autoplaySpeed: 3000,
arrows: false,
pauseOnHover: false
});
$('.panel').eq(0).typeIt({loop: true}); // typeit on the first ele
$('#dashboard').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
//
// typeit the current slide if not yet initialized
//
// if ($('.panel').eq(nextSlide).find('.ti-placeholder').length == 0)
//
// or, you may test:
//
if ($('.panel').eq(nextSlide).tiSettings().is('.panel') == false) {
$('.panel').eq(nextSlide).typeIt({loop: true});
}
});
#nav {
margin-bottom: 10px;
}
.panel {
border: 10px solid #333;
background: #ccc;
height:200px;
margin: 10px;
font-size: 72px;
text-align: center;
line-height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/4.3.0/typeit.min.js"></script>
<div id="dashboard">
<div class="panel">This is a test 1</div>
<div class="panel">This is a test 2</div>
<div class="panel">This is a test 3</div>
<div class="panel">This is a test 4</div>
<div class="panel">This is a test 5</div>
<div class="panel">This is a test 6</div>
<div class="panel">This is a test 7</div>
</div>
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>