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 Carousel - Skips Past Images using Prev / Next

Our custom Owl Carousel isn't behaving as expected - while dragging and using keyboard arrows takes you to the next slide, the previous and next arrows jump 'over' the next slide to the one after.
The next slide does appear briefly but quickly flicks to the following slide.
I've tried a few things in the main.js settings but no dice. Any thoughts would be greatly appreciated as I'm a bit stumped.
main.js code is:
$(document).ready(function() {
// initialise owl
$(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items:1,
lazyLoad:true,
loop:true,
useMouseWheel: false,
nav: true,
center: true,
dots: false,
margin: 0,
stagePadding: 0,
URLhashListener: true,
startPosition: 'URLHash',
animateIn: 'fadeIn',
animateOut: 'fadeOut'
});
// click for next image
$(owl).click(function() {
owl.trigger('next.owl');
})
// add arrow keys to carousel navigation
$(document).on('keydown', function( event ) { //attach event listener
if(event.keyCode == 37) {
owl.trigger('prev.owl')
}
if(event.keyCode == 39) {
owl.trigger('next.owl')
}
});
// end arrow keys
}); // end owl
}); // end document ready
Happy to share any other parts of the code if it would be useful. Thanks in advance for any guidance!

With #Tiberiuscan pointing me in the right direction, I figured out a solution:
The click for next image part was targeting the entire owl carousel for clicks.
I modified this code to target the owl-item div and that resolved the issue, as below:
// click for next image
$('.owl-item').click(function() {
owl.trigger('next.owl');
})
Thanks again, #Tiberiuscan

How to use "stopAuto" function in bxslider?

I have a bx slider which has 6 images. I want to go through each of them once then stop for a second and then begin again, then stop for one second again etc. It's mentioned here (http://bxslider.com/options) but with no full example.
This is the code I have now. It doesn't stop navigation images.
<script>
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
speed: 1,
pause:200
});
</script>
Sorry for the lame question. I am a still a newbie to jQuery.

Set autoDelay option and onSlideAfter function
Demo: http://jsfiddle.net/3h0ewwz4/
var slider = $('.bxslider').bxSlider({
auto: true,
autoDelay:2000,
onSlideAfter: function (slide, oldIndex, newIndex) { // add this function to solve issue
if (newIndex === 5) { // remember, it's zero based indices with bxslider...5 is index of last image
slider.stopAuto();
setTimeout(function () {
slider.goToSlide(0);
slider.startAuto();
}, 2000);
}
},
autoControls: true,
speed: 1,
pause:200
});

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.

Remove a slider from bxSlider on Next/Prev control click event

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.