Using a slick slider with even number of slides to show - javascript

I'm using a slick slider on Center Mode where the number of slidesToShow is an even number.
The requirement i have is for the active slides to be at opacity 1 and the rest at opacity 0.5.
Slick js has a slick-active class that is applied to it automatically. Unfortunately the number of slides being even makes the implenetation wrong.
As seen in the picture the first half inactive slide on the left is at half opacity. I want the same for the 5th slide with 'slide-active' class. Somehow the nth-child and last-child selectors aren't working as I assumed.
What could be a work around?

try adding reduced opacity to slick-slide class and then apply full opacity to active slides.
$('.accom-slider').slick({
centerMode: true,
slidesToShow: 3
});

I've made something like this for my use, hope it can help:
http://test.woolet.co/slick-slider-centered/
$('.center').slick({
speed: 500,
arrows: false,
centerMode: true,
centerPadding: '0px',
slidesToShow: 3
});

Related

Slick Slide Carousel showing parts of neighbor images

I have a portfolio website (http://viktorjorneryd.com/?pid=4) where on mobile devices I have the slick slide carousel limited down to one image showing. If it's a wide picture it is shown on its own, and if it's a vertical one they are previewed two at a time. On the computer (and when resizing) it's fine, but on mobile devices it shows a small portion of the vertical photos next to the wide one, which breaks the design.
https://www.dropbox.com/s/wpsjavhxlbp67if/Screenshot_20190311-175421_Chrome.jpg?dl=0
Here is a picture of how it looks. I've tried to make the picture wider to match two vertical photos next to each other - to no avail. I'm out of the ideas and I'm not even sure why it causes this..
Here is the slick slide config.
$(document).ready(function(){
$('.slider_image_wrap_mobile').slick({
infinite: true,
speed: 100,
fade: false,
cssEase: 'linear',
arrows: true,
nextArrow: "<img class='slider_control_right' src='images/webinterface/arrow_png.png'>",
prevArrow: "<img class='slider_control_left' src='images/webinterface/arrow_png.png'>"
});
});
I would take a look into the responsive aspect
http://kenwheeler.github.io/slick/
You can define breakpoints and limit the slides that are shown.
responsive: [
{
breakpoint: 1024, // The media breakpoint
settings: {
slidesToShow: 3, // how many images you want to show in your case 1
slidesToScroll: 3,
infinite: true,
dots: true
}
},
I took a further look into this and it seems this fixed it.
.slider_image_single {
...
padding: 1px; /* this one */

Slick slider next and prev slides css

I have slick slider and I want to add some styles to the next and prev slides, but I don't know how.
Here is js
$('.works-slider').slick({
centerMode: true,
centerPadding: '200px',
slidesToScroll: 1,
slidesToShow: 1
})
There are some mothods to get prev and next slides, but it is not what I want.
https://github.com/kenwheeler/slick
ANd here is an old issue, but I can't make the same now
https://github.com/kenwheeler/slick/issues/317
Slick adds the class slick-center to the centered element, so if you just want to style the other elements, you could achieve this in CSS with this selector:
.slick-slide:not(.slick-center){
/* your custom style */
}
This will have an effect on all slider-elements except the center one. Since you have slidesToShow set to 1 that should work for the previous and next slide.

Center active slide with showing 3 slides in slick.js

I'm using slick.js plugin and I want to make something like on their website. Here is DEMO.
Problem is, that first active slide 1 is not centered. I know I can use
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true,
centerMode: true
});
but then there are not 3 slides, but also parts of another 2 slides, see HERE
Well, this is so embarrassing. All it needs to have is set option centerPadding to 0 (beside setting centerMode to true). I don't know why I haven't seen this before. Anyway, here is my 1-month update:
WORKING DEMO
If I'm understanding your question correctly, you're going to have to programmatically hide the partial slides. It would have been great if this functionality existed natively, but it doesn't. Maybe in a future release.
Please read the comments for a brief outline of what I'm doing:
function setSlideVisibility() {
//Find the visible slides i.e. where aria-hidden="false"
var visibleSlides = $('.slider-nav > .slick-list > .slick-track > .slick-slide[aria-hidden="false"]');
//Make sure all of the visible slides have an opacity of 1
$(visibleSlides).each(function() {
$(this).css('opacity', 1);
console.log($(this).html());
});
//Set the opacity of the first and last partial slides.
$(visibleSlides).first().prev().css('opacity', 0);
$(visibleSlides).last().next().css('opacity', 0);
}
//Execute the function to apply the visibility on dom ready.
$(setSlideVisibility());
//Re-apply the visibility in the beforeChange event.
$('.slider-nav').on('beforeChange', function() {
$('.slick-slide').each(function() {
$(this).css('opacity', 1);
});
});
//After the slide change has completed, call the setSlideVisibility to hide the partial slides.
$('.slider-nav').on('afterChange', function() {
setSlideVisibility();
});
Fiddle Demo

Slick Slider slidesToScroll modification

I use the slick slider on my site. And no matter how much I was pulling the slider to the left or to the right, it just runs only on the number of slides that is specified in the property slidesToScroll. Is it possible to do something with slick slider that it worked like this slider http://www.owlcarousel.owlgraphic.com/demos/mousewheel.html. How much do you pulling - it scroll the same distance. Sorry for my english. Thanks you.
There is my code for init slick slide:
$('.slider-wrapper-2').slick({
slidesToShow: 4,
slidesToScroll: 4,
rows: 1
});
Just add the swipeToSlide setting, which enables swiping to any slide irrespectively to slidesToScroll
Your initializing script should look like this:
$('.slider-wrapper-2').slick({
slidesToShow: 4,
slidesToScroll: 4,
rows: 1,
swipeToSlide: true
});
In case it doesn't work, remove the slidesToScroll option. Please comment how it worked so I can edit my answer.
swipeToSlide: true
Adding swipeToSlide option does the job, even with slidesToScroll enabled. No need to disable slidesToScroll.

nivo slider force next slide on navigation click

I have the nivo slider working perfectly on a few sites.
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade',
animSpeed: 1000,
pauseTime: 8000,
controlNav: true,
manualAdvance: false
directionNav: false,
controlNavThumbs: false
});
});
Very happy, except for one thing...
When the slide transition is in process. I have to wait for it to complete before I can go to the next slide. This is a bad user experience if i have my slide transaition on 1 second. as it feels like a long wait if i want to click through quickly.
On other carousel banners, I can click through the nav buttons very quickly back and forth and the effect keeps up and dynamically changes direction.
Can't find anyone else asking this or a fix so assume I am missing something. How can I have this effect with nivo slider?
You can see the same issue exists on the nivo slider demo http://demo.dev7studios.com/nivo-slider/ although it's difficult to notice as the images change shape so the navigation moves.
Thanks
EDIT: Added JSFiddle. http://jsfiddle.net/micjam/Bq3nT/

Categories