I have several instances of the Slick Carousel gallery set up and working properly. However, I cannot successfully call the Methods as described in the documentation.
Whenever I try to execute a method after initialization is complete,the method did not perform. I'm trying to automatically goto the first slide after the slick is initiated.(the mothod "onInit " and "onReInit " is not perform.)
this is my code:
$("body #slick").slick({
slidesToShow: 3,
centerPadding: "20px",
draggable:false,
onInit:function(){
console.log("onInit");
$("body #slick").slick("slickGoTo",0);
},
onReInit:function(){
console.log("onReInit");
$("body #slick").slick("slickGoTo",0);
}
});
thanks for help me.
According to the release notes here:
All callback methods are now deprecated. They have been replaced with event triggers. I added a few helpful ones too. So onAfterChange is now:
$('.your-element').on('afterChange', function(){
// do stuff
});
So, in your case:
$("body #slick").on('init', function() {
console.log("onInit");
$("body #slick").slick("slickGoTo",0);
});
$("body #slick").on('reInit', function() {
console.log("onReInit");
$("body #slick").slick("slickGoTo",0);
});
$("body #slick").slick({
slidesToShow: 3,
centerPadding: "20px",
draggable:false
});
Please note that all event handlers should be declared before calling slick({...}).
Related
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();
})
});
I am having issues with dynamically updating content with bxslider. I am able to successfully load the content by entering the li items in HTML. When I attempt to append or replace the ul html with new li content from my database, it fails to reload the slider. Here is the important markups from my script. Is there any reason why I get no errors in the console.log and no images or slides?
var url = 'image/picture.jpg';
updateSlider('<li><img src=\''+url+'\'></li>');
var slider, sliderConfig = {
pager: true,
pagerType: 'short',
auto: true,
slideWidth: screen.width,
onSliderLoad: function(){
$('.bx-viewport').css({'height':'100% !important'});}}
$(function(){
slider = $('.bxslider').bxSlider(sliderConfig);
});
function updateSlider(data){
$('.bxslider').html(data);
slider.reloadSlider(sliderConfig);
}
I found the answer, thank you for your suggestions.
The issue lies with the CSS. Once i reloaded the slider, the CSS was setting to 0 on the .bx-wrapper, .bx-viewport, .bxslider and .bxslider li elements. Once i reset them to the necessary heights it resolved my issue.
$(".bx-wrapper,.bx-viewport,.bxslider,.bxslider li").css("height",newHeight);
Try like this, means call the updateSlider('<li><img src=\''+url+'\'></li>'); only after you are having data using any delayed function like as ajax. I have put on document ready but you need to run after successful ajax request:
var url = 'image/picture.jpg';
var slider, sliderConfig = {
pager: true,
pagerType: 'short',
auto: true,
slideWidth: screen.width,
onSliderLoad: function () {
$('.bx-viewport').css({'height': '100% !important'});
}
}
function updateSlider(data) {
$('.bxslider').html(data);
}
$(function () {
slider = $('.bxslider').bxSlider(sliderConfig);
//update slider on load or after any ajax call success
updateSlider('<li><img src=\'' + url + '\'></li>');
});
$('document').on('click', 'a', function () {
slider.reloadSlider(sliderConfig);
});
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 need to start scroll when user hover. I take a function reference from the question this and this. I notice that even the callback function is not working with initCallback option. Am I missing something or I forgot something to put in the code. Here is example of code fiddle
function mycarousel_initCallback(carousel)
{
carousel.clip.hover(function() {
carousel.startAuto();
}, function() {
carousel.stopAuto();
});
};
You should use jcarouselAutoscroll plugin for that
Check this updated fiddle
INIT CODE
A(".example").jcarousel({
auto: 1,
wrap: "last"
}).jcarouselAutoscroll({
interval: 1000,
target: '+=1',
autostart: false
});
Code for hovering
$(".example li").hover(function () {
$(".example").jcarouselAutoscroll('start');
},function () {
$(".example").jcarouselAutoscroll('stop');
})
My jquery code is like this
$(document).ready(function() {
$(".slideshow").css("overflow","hidden");
$("ul#slides").cycle({
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
And i want to know ,is there any slide change event in jquery for this...i mean i need to get the slide number when each slide changes
Thank you
Your question is about Cycle specifically, not general jQuery. The documentation on options for Cycle can be found here.
It looks like there is an event called onPrevNextEvent:
onPrevNextEvent: null,// callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
The second parameter passed into a function you define for that event will be zeroBasedSlideIndex. That's your current slide number, with the first slide starting at 0.
So your code might look something like:
$(document).ready(function() {
$(".slideshow").css("overflow","hidden");
$("ul#slides").cycle({
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next',
onPrevNextEvent: function(isNext, slideNum) {
alert("This is slide "+ slideNum);
}
});