I'm trying to show half of the last slide and half of the first slide when a user sees the slider but when I try to slide to the next slide for a brief of second image from the 3rd slide appears.
What I'm doing is assigning a padding to the slick-list and remove it when the users slides to the next slide.
$(document).ready(function(){
$('.slider').on("init", function(event, slick,direction ) {
$( '.slick-list' ).addClass("half-slide");
});
$('.slider').on("beforeChange", function(event, slick,direction ) {
$( '.slick-list' ).removeClass("half-slide");
});
$('.slider').slick({
dots: false,
autoplay: false,
infinite: false,
speed: 500,
slide: 'div',
cssEase: 'linear'
});
});
example fiddle:
https://jsfiddle.net/02q1xuzc/
Related
I'm adding a slide to the slicks slider and when I move to the next slide I want to remove the first slide.
This causes one of the slides to be skipped (it can be seen when i move backwards it appears but not when I try to move forwards to the last slide).
Now I've tried to force slick to move to the next slide by using slick('slickGoTo') but this has no effect.
$(document).ready(function(){
var boolRemove = 0;
$('.slider').on("beforeChange", function(event, slick,currentSlide,nextSlide ) {
if(!boolRemove && currentSlide == 1) {
$(".slider").slick("removeSlide", 0);
boolRemove = 1;
}
});
$('.slider').slick({
dots: false,
autoplay: false,
infinite: false,
arrows: true,
speed: 0,
slide: 'div',
cssEase: 'linear'
});
$('.slider').slick('addSlide', $(".slick-slide:first-child").clone() , 0);
});
Fiddle link:
https://jsfiddle.net/fmxjL95p/
It appears that the problem is that because you are running your function on beforeChange, the index that Slick is keeping is still pointing to the the previous slide (the first slide, in this case). You can have your function remove the first slide at the correct time by removing slide 0 when the currentSlide === 0 (instead of 1, as in your code).
$('.slider').on("beforeChange", function(event, slick, currentSlide, nextSlide ) {
if(!boolRemove && currentSlide === 0) {
$(".slider").slick("removeSlide", 0);
boolRemove = true;
}
});
I've made a simple css3 animation (progress bar) and tried to put it inside my owl carousel slider, more particularly, to the buttons.
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
navigation : true,
pagination : true,
paginationSpeed : 400,
singleItem: true,
transitionStyle: "mask",
autoHeight: true,
autoPlay: 6000, //Set AutoPlay to 3 seconds
navigationText : false,
afterAction : syncPosition,
afterAction: function(current) {
current.find('video').get(0).play();
}
});
function syncPosition(el){
var current = this.currentItem;
// code for smooth transition
this.owl.owlItems.removeClass('turn-on');
$(this.owl.owlItems[this.owl.currentItem]).addClass('turn-on');
}
function top_align() {
$(window).scrollTop(0);
console.log('move');
}
});
When it detect currentItem (visible slider) it turn the class (turn-on) and starts animation.
The problem is that the progress-bar animation, but also transitionStyle: "mask" doesn't work with the script below which I use to start the video in the slider. Of course when I remove it, it works fine.
afterAction: function(current) {
current.find('video').get(0).play();
}
UPDATE: Here is the fiddle
Do have someone an idea how to solve it? Thx in advance.
I am using the slick slider to display images. At the moment i have it so you can click on the navigation and it changes the main image display.
I am trying to get it to set the currently selected navigation on a hover event or mouseover event.
This is my current code for the navigation and display:
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
autoplay: true,
//trigger after the slide appears
// i is current slide index
afterChange: function (slickSlider, i) {
//remove all active class
$('.slider-nav .slick-slide').removeClass('slick-active');
//set active class for current slide
$('.slider-nav .slick-slide').eq(i).addClass('slick-active');
}
});
$('.slider-nav .slick-slide').eq(0).addClass('slick-active');
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
autoplay: true,
dots: true,
centerMode: true,
focusOnSelect: true,
vertical: true
});
and this is my fiddle
Is it possible to bind a mouseover event to slick?
Should be possible. Never used slick before but on the first view it looks like a hover function is not implemented. I've created a fast basic approach how you could solve this with slick provided methods. See the fiddle.
You should optimize getting the slick object, it's just a starting point for you.
Also you should break the autoplay when hovering and restart it, just try around with the slick given methods.
$('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
var $currTarget = $(e.currentTarget),
index = $currTarget.data('slick-index'),
slickObj = $('.slider-for').slick('getSlick');
slickObj.slickGoTo(index);
});
Working fiddle
Using the above answer as a base, I was able to come up with this solution. This fixes the issue when quickly mousing over from navslide #1 to #3, and having the slider-for hangup on slide #2.
var slideTimer;
$('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
var $currTarget = $(e.currentTarget);
$('.slider-nav .slick-slide').removeClass('slick-current');
$currTarget.addClass('slick-current');
slideTimer = setTimeout(function () {
var index = $('.slider-nav').find('.slick-current').data('slick-index');
var slickObj = $('.slider-for').slick('getSlick');
slickObj.slickGoTo(index);
}, 500);
}).on('mouseleave', '.slick-slide', function (e) {
clearTimeout(slideTimer);
});
I'm using nivoSlider plugin to slideshow banners on client's website. I need to set different delay times for each slide. I found out this solution:
var nivoSliderDelays = [5000,2000,3500];
function setDelay() {
var currentSlide = $('#slider').data("nivo:vars").currentSlide;
setTimeout(function () {
$('#slider').find('a.nivo-nextNav').click()
}, window.nivoSliderDelays[currentSlide]);
}
$('#slider').nivoSlider({
pauseTime: 3000,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: false,
manualAdvance: true,
beforeChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){ setDelay() },
afterChange: function(){ setDelay() }
});
This seems to work fine as you can see on client's website. The problem is that if you navigate by a controlNav or directionNav, the script goes mad. All set delays seems to change to unexplainable short time and every slide has different timing.
Because client has ability to change timing of each slide by CMS, I had to set nivoSliderDealys as global JavaScript variable, do you think it could be the problem? Do I have any other opportunity to access variables stored in MySQL db from scripts.js?
Might be your problem was causing through controlNav properties, I have just updated some part of code in nivoSlider function, could you add and try.
$('#slider').nivoSlider({
animSpeed: 300, // Slide transition speed
pauseTime: 3000, // How long each slide will show
pauseOnHover: false, // Stop animation while hovering
manualAdvance: true, // Force manual transitions
prevText: '<', // Prev directionNav text
nextText: '>', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){ setDelay() },
afterChange: function(){ setDelay() }
});
And the problem were causing from the below properties:)
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4,
I am facing a silly problem with bxSlider plugin. My slider only shows 4 slides with auto sliding mode. But when someone clicks on a particular nav link I am appending another slide relates to that link. But I wanted to remove that new slide when someone clicks on prev/next control and reload the default slider with 4 slides. But it's not working for that prev/next controls.
Here is the code:
//Default Slider
var slider= $('.bxslider').bxSlider({
displaySlideQty : 4,
moveSlideQty : 4,
maxSlides: 4,
auto: true,
autoStart: true,
preloadImages: 'visible',
mode: 'fade',
pager: false,
});
//If someone clicks any link on navigation
$('#how').click(function(e){
e.preventDefault();
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
}
$('.bxslider').append('<li class="added"><a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/Jwjv7OLazVY?enablejsapi=1&wmode=opaque" title="Click to Watch The Vieo"><img src="img/video.jpg"/></a></li>');
slider.reloadSlider({
mode:'fade',
auto: false,
autoStart: false,
pager:false,
});
slider.goToSlide(4);
});
When the slide for #How tag is the current slide and then if I want to click any next/prev control I wanted to remove the slide 'li.added' and reload the default slider with 4 slides. That's I tried the following code
$('a.bx-next').click(function(e){
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
slider.reloadSlider({
mode:'fade',
auto: true,
autoStart: true,
pager:false,
});
}
});
but nothing happens! Can anyone please help me on this? What wrong I'm doing? Here is the Live testing site for you convenience.
I found that you need to bind the next button click function every time once you call reloadSlider, as it re-bind the next-previous control so it will lose the event binding if you do it at page load. So please rebind the click event every time you reload.
var bindNext = function(){
$('a.bx-next').click(function(e){
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
slider.reloadSlider({
mode:'fade',
auto: true,
autoStart: true,
pager:false,
});
}
});
}
and then when you call reloadSlider then call the bindNext() function after calling it.
$('#forSellers').click(function(e){
e.preventDefault();
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
}
$('.bxslider').append('<li class="added"><img src="img/seller.jpg" /></li>');
slider.reloadSlider({
auto: false,
autoStart: false,
pager:false,
mode:'fade',
});
slider.goToSlide(4);
bindNext();
});
Its working at my side.