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
Related
I have a slick slider and on hover of the slider I want it to go to the second slide. I've managed to do this with mouseenter and mouseleave, however if you hover on/off the slider quickly the function doesn't work.
I'm presuming this is because it doesn't have enough time to complete each function but I'm not sure how to get around this. Any advice would be appreciated.
jsFiddle
JS:
$('.slider').on('mouseenter', function (e) {
$(this).slick('slickGoTo', 1);
});
$('.slider').on('mouseleave', function (e) {
$(this).slick('slickGoTo', 0);
});
In the function that you provided:
$(document).ready(function(){
$('.slider').slick({
dots: true,
speed: 1000,
infinite: true,
autoplay: false,
});
});
I see that you have set the speed very high. If you put speed to 10 etc. than it should work better.
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.
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
});
I'm using jcarousel lite to display an auto-scrolling carousel of brand logos on one of my sites. I tried to make it responsive (max 6 images on largest display) using the following javascript. The carousel works fine using the original code without me trying to modify how many images are visible.
<script>
function carouselLogic(){
if ($(window).width() > 959 ){
visible = 6;
changeCarousel(visible);
}
else if($(window).width() > 767){
visible = 4;
changeCarousel(visible);
}
else if($(window).width() > 599){
visible = 2;
changeCarousel(visible);
}
}
carouselLogic();
$(window).resize(function(){
carouselLogic();
});
/* original function for first page load
$(function() {
$(".logoCarousel").jCarouselLite({
auto: 2500,
speed: 1000,
visible: 6
});
});
*/
function changeCarousel(visible){
$(".logoCarousel").jCarouselLite({
auto: 2500,
speed: 1000,
visible: visible
});
}
</script>
Images appear inline with a 20px margin left/right.
This code is supposed to change the visible number of logos to ensure they still fit on the page with each responsive change.
The result is the carousels auto scroll goes all crazy. It bounces back and forth all over the place, and much quicker than the default.
Any suggestions on how to improve this code?
The original jCarouselLite has been forked here;
https://github.com/kswedberg/jquery-carousel-lite#responsive-carousels
It's not quite as Lite as it originally was but it has many more methods, and is touch screen scrollable and responsive. You can add the following options which are working for me;
function changeCarousel(visible){
$(".logoCarousel").jCarouselLite({
auto: true,
speed: 1000,
visible: visible,
autoWidth: true,
responsive: true
});
}
As pointed out here,
Run jCarouselLite again, after an AJAX request
You might want to end the original carousel as well in your carouselLogic() function
$(".logoCarousel").trigger("endCarousel");
This is old but in case it helps, i'm pretty sure you need to "reset" jcarousellite. Otherwise you are instantiating it again and again after each window resize.
To initialize it properly after it has already been initialized, you need to call a reset method. I don't remember the syntax off the top of my head, but if you search the jcarousellite.js source for "reset" you should find the correct syntax
I tried to integrate wootheme's Flexslider on my site and it looks/works great except for when it is loading.
When you refresh the page with the slider, before flexslider loads (about 1 second) the first slide appears very big and flashes to black then dissapears and then the carousel appears.
I think the image is loading faster than the jquery? How can I hide the image unti jquery loads (like on the demo website, even if i refresh 3 billion times, the problem is never repeated on their website, it all loads gracefully! - http://flexslider.woothemes.com/carousel-min-max.html )
I loaded the flexlisder.js right after jquery and copied the same html code from the demo (to match the .css file that is also loaded. And here is the init code I am using - from the demo site also:
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
You need to deal with the callback functions for the plugin you are using
hide all the images from CSS by using a class let's say flexImages
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4,
start: function(){
$('.flexImages').show();
},
});
});
Set the default style for "display" to "none". using show() will change this style value.
Also Found that the slides flash before loading and display stacked down the page with list item bullets.
Only for a second. Then it worked fine. I didn't realize I hadn't included the flexslider.css file because I had already turned of any navigation that would have shown broken nav img links.
Remember to Include the CSS!
… i had the same problem, tried the js solution above - it worked well but then i realized when js is disabled for some reason - that nothing will be shown up, so i decided to look for a non js solution:
i just put some thing like that for the specific slider:
.MySlider {
.flexslider .slides img {
max-height: 400px;
width: 940px;
}
}
worked well, even responsive. Hope that may help!
I experienced a similar issue when I forgot to include the flexslider.css
I just set in the CSS of the div that contains the slider: overflow:hidden ; height: the height of the images you use, then it works perfect!
update: this is not a responsive solution as the slider changes the size... what can I do??