We Keep Coding

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

Pause all instances of mb.YTPlayer element on single button click

Using a jquery plugin for Youtube backgrounds (https://github.com/pupunzi/jquery.mb.YTPlayer/wiki)
I am trying to pause all the background videos with a single pause button, not sure for which reason it only pauses the first video, no matter the length of divs with background video.
I set up a jsfiddle explaining what I am trying to achieve.
The codes are as follow:
$('.vid').each(function() {
var vid = $(this).data('video');
$(this).YTPlayer({
videoURL: vid,
stopMovieOnBlur: false,
mute: true,
ratio: 'auto',
quality: 'default',
loop: true,
showYTLogo: false,
showControls: false,
containment: 'self'
});
});
$('.pauseit').on('click', function() {
$('.vid').YTPPause()
});
Thanks for any help on this.

Converting comment to answer.
Make sure the button is a button: type="button"
use .each again to pause the videos:
Like this:
$('.pauseit').on('click', function() {
$('.vid').each(function() { $(this).YTPPause(); });
});
https://jsfiddle.net/mplungjan/swnj2bcg/

Take a look here. I modified the jsfiddle:
update
Chnage it like this:
$('.pauseit').on('click', function() {
$('.vid').each(function() {
$( this ).YTPPause();
})
});

Jquery cycle plugin customization

I am struggling to customize jquery cycle plugin. What I want is when the slider reaches last slide it will stop sliding to first slide again.This is working fine.
But the problem is when I am on first slide and then click the third slide then it's not ending there rather it goes back to first slide.
My jquery code is here:
jQuery(document).ready(function($) {
$('.slider1 ul.horizontal').cycle({
fx: 'scrollHorz',
speed: 500,
pause: 1,
pauseOnPagerHover: true,
width: "100%",
easeOut: 'easeOutBack',
cleartypeNoBg: true,
pager: 'ul.pager',
autostop: 2,
autostopCount:3,
startingSlide: 0,
after: onAfter,
pagerAnchorBuilder: function(idx, slide) {
return '<li></li>';
}
});
function onAfter()
{
if ($('.slider_content').css('display') == 'block')
{
if ($('li#lastslide').css('display') == 'block') {
$('.slider1 ul.horizontal').cycle('pause');
$('.controlbutton').stop().fadeIn(500);
}
else
{
if($('.question_slide').css('right') != '0px')
{
$('.controlbutton').fadeOut(100);
}
}
}
}
});
I think there should be some pagination click event.I have checked the plugin options reference page but can't under stand how to tell the plugin that this is the last slide and don't go back to the first slide.
Any idea please. Thanks in advance.

Remove stop button in slides.js?

slides.js has virtually no documentation. I've got it set to automatically change the slide, and have the prev/next buttons hidden. Is there a way to also hide the "stop/play" button?

$(function () {
$("#slides").slidesjs({
play: {
active: false, /* this hides the stop/play button */
auto: true,
interval: 5000,
swap: true
}
});
});

use display none property of css
for example if your play button class is ".play" then put in css
.play
{
display:none;
}

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.