We Keep Coding

Slickjs removing one of the slides causes to skip slide

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;
}
});

Owl Carrousel scroll issue

I am using owl carousel and I am trying to swap a slide to the next slide on clicking a button named "Vote Now" in owl carousel" but there is one issue when I click on 2nd DOT and click on 4th position of "Vote Now" button it swap to 3rd position of slide, its ok. But 4th position of slide goes hidden I want to its just scroll one slide backward and also visible 4th position of slide.
Here is my fiddle link Can anyone help me?
$(window).load(function(){
var animating = false;
$('#container').on('click', '.click', function() {
var clickedDiv = $(this).closest('div.ddd'),
prevDiv = clickedDiv.prev(),
distance = clickedDiv.offset().left - prevDiv.offset().left;
if (prevDiv.length) {
animating = true;
$.when(clickedDiv.animate({
left: -distance
}, 1000),
prevDiv.animate({
left: distance
}, 1000)).done(function() {
prevDiv.css('left', '0px');
clickedDiv.css('left', '0px');
clickedDiv.insertBefore(prevDiv);
animating = false;
});
}
});
});

// owl carousel
$(document).ready(function() {
var slider = $('.owl-carousel');
slider.owlCarousel({
items: 4,
loop: false,
center: false,
margin: 10,
callbacks: true,
URLhashListener: true,
autoplayHoverPause: true,
startPosition: 'URLHash',
touchDrag: false,
mouseDrag: false
});
$(".swap").click(function() {
slider.trigger('prev.owl.carousel');
});
})

css3 animation inside owl carousel

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.

Javascript Nivo Slider different slide times

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,

Flexslider and mousewhell speed

I want to use flexslider with mousewheel here is the my example
$('#slider').flexslider({
animation: "slide",
mousewheel: true,
direction: "vertical",
slideshow: false
});
http://jsfiddle.net/VC4L3/
it's working but too fast. I'm using magic mouse by the way I'm trying touchpad too when I scroll down it's moving 2,3 sliders. I need each scrol down move 1 slide. How can I do that?

I couldn't find a simple solution for this so i have changed the source code of the flexslider, to disable scroll once the animation is started, here is what i did:
change bind for mousewheel to be like this.
slider.bind('mousewheel', function (event, delta, deltaX, deltaY) {
if (!slider.startedMouseWheel) {
slider.startedMouseWheel = true;
event.preventDefault();
var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
slider.flexAnimate(target, slider.vars.pauseOnAction);
}
});
find call of the vars after function
and insert this code before it:
slider.startedMouseWheel = false;
to have
slider.startedMouseWheel = false;
slider.vars.after(slider); //This is call of the vars after function
this way you will disable triggering new events on mouse scroll until animation is finnished.

Try adding animationSpeed into the flexslider.
Demo: http://jsfiddle.net/lotusgodkk/VC4L3/1/
$('#slider').flexslider({
animation: "slide",
mousewheel: true,
direction: "vertical",
slideshow: false,
animationSpeed: 4000,
});