Develop Reference

React-Slick SlickGoTo implementation not working

I am using react-slick and I am trying to find the solution to go to initial slide on clicking the last slide
I have tried adding afterChange,beforeChange and added slickGoto(0) if nextslide is equal to last-slide-num.Actually nothing happens
I have gone through this... but that is not sufficient
const settings = {
dots: false,
infinite: false,
autoplay: false,
speed: 500,
arrows: true,
slidesToShow:2.7,
beforeChange:(current,next) => {
if(current === 2){
this.slider.slickGoTo(0);
}
},
}
This is the setting
Expected should go to initial slide

You can use this setting
infinite: true

Image Slider Swiper function

I am using swiper image slider and according to their API, i should be able to have a call back function but it is not working ..
what i am trying to do is that i have a container with text over my images with opacity: 0 and I have a css animation class that I want to be added to my container, so as soon as the page is loaded, I want the animation to kick in on the first slide, next slide same rule , starts without the css class , add the css class to it
here is my javascript code
var mySwiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
speed: 600,
effect: 'fade',
fade: {
crossFade: true
},
onSlideChangeStart: function (Swiper){
$('.slide-info').addClass('slider-text-animation ');
},
onSlideChangeEnd: function (Swiper){
$('.slide-info').removeClass('slider-text-animation ');
},
loop: true,
autoplay: 6500
});

Try this:
mySwiper.on('slideChangeStart', function () {
$('.slide-info').addClass('slider-text-animation ');
});
mySwiper.on('slideChangeEnd', function () {
$('.slide-info').removeClass('slider-text-animation ');
});
And also, take a look at their API.
http://www.idangero.us/swiper/api/

It's just simple with Swiper API, this would help you http://idangero.us/swiper/api/#parallax

how to show the caption div when current item is focused in owl carousel?

I need to show the caption div when current item is focused.
i am able to show the caption but when second last image focused with cation last image also show caption in loop.
In first loop all caption div show when image is focused but after first loop last image already comes with caption.
when i keep carousel option loop:True when i keep false i navigate prev and next then i won't get problem .
for Refrence: http://jsfiddle.net/ROHIT502/1qdurrLz/95/
Error Image when loop happen
Here is the jquery code:
$(document).ready(function () {
$('#slider').on('initialized.owl.carousel change.owl.carousel changed.owl.carousel ', function (e) {
if (!e.namespace || e.type != 'initialized' && e.property.name != 'position') return;
var current = e.relatedTarget.current()
var items = $(this).find('.owl-stage').children()
//alert(current);
var add = e.type == 'changed' || e.type == 'initialized'
items.eq(e.relatedTarget.normalize(current)).toggleClass('current', add)
}).owlCarousel({
items: 3,
margin: 10,
itemsDesktop : [1199,3],
itemsDesktopSmall: [979, 3],
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause: true,
//autoHeight: true,
responsive: true,
center: true,
dots:false,
nav: true,
loop: true
});
})

var elementStyle = document.getElementByClass("caja").hover.style;
elementStyle.position = "relative";
elementStyle.top = "20px";
This will shift the class caja down by 20px on hover
I am sorry but I don't know what's the matter with the last image's caption I have never used owl carousel. btw you can make way beautiful carousel yourself.

Slick Init - slickPause undefined

When trying to pause the slider within the init listener the slick('slickPause') method doesn't work with the error
Uncaught TypeError: Cannot read property 'slickPause' of undefined
An example piece of code is:
var opts = {
autoplay: true,
autoplaySpeed: 5000,
speed: 750,
fade: true,
arrows: false,
appendDots: $('.nav-wrap div'),
dots: true,
};
$(elem).on('init', function(event, slick){
var slider = slick.$slider;
slider.slick('slickPause');
});
$(elem).slick(opts);
It seems there should be a ready event but there isn't, any idea on how to get around this?
The purpose of needing this is to detect if the first slide is video, if so pause the slider and play the video and then continue.

I had a tough time with this, it seems something is wrong with init or perhaps I'm not understanding it fully but slick pause seems to work fine in other circumstances (such as "afterChange").
Perhaps bring this up as an issue to Ken Wheeler?
Based on what you said you're trying to do though, maybe you could try it a different way a little more outside of slick?
$(elem).each(function(){
var $this = $(this);
$this.slick(opts);
var iframe = $this.find('.slick-slide:first-child').find('iframe');
if(iframe.length > 0){
$this.slick('slickPause');
}
});
Codepen

For me it seems, the pause function is working, BUT, while leaving the slide area with the mouse the autoplay is re-activated again...
I solved this issue by increasing the autoplaySpeed - means, autoplay will still be on, but it will really take a long time till the next slide will come...
$sliderslickSetOption("autoplay",false,false);
$sliderslickSetOption("autoplaySpeed",10000000,false);

Above not working so that's why I am posting my solution
var slick_options = {
dots: false,
infinite: true,
speed: 800,
autoplaySpeed:800,
adaptiveHeight: true,
autoplay:true
};
$('.slick-slider').slick(slick_options);
$('.slick-slider-play-pause-btn').click(function() {
var this_play_pause_ele = $(this);
var is_has_play_class = this_play_pause_ele.hasClass('is-paused');
var slick_options;
$('.slick-slider').slick('unslick');
if(is_has_play_class==true){
this_play_pause_ele.removeClass('is-paused');
this_play_pause_ele.html('Pause');
slick_options = {
dots: false,
infinite: true,
speed: 800,
autoplaySpeed:800,
adaptiveHeight: true,
autoplay:true
};
$('.slick-slider').slick(slick_options);
} else {
this_play_pause_ele.addClass('is-paused');
this_play_pause_ele.html('Play');
slick_options = {
dots: false,
infinite: false,
speed: 300000000000,
autoplaySpeed:300000000000,
adaptiveHeight: true,
autoplay:false
};
$('.slick-slider').slick(slick_options);
}
});

jQuery cycle for text animation on a slideshow

I'm trying to find a way to animate the image title and caption for each slide of a slideshow and sync their animation effects with the ones of the slideshow. i.e. as soon as the slide transition effect has ended, the title goes from right to left and the caption from top to bottom, and when the slide transition effect kicks in, the whole text would fade out at the same time the slide fades out, and let the new slide and text fade in.
I figured out how to make my image title and caption move using .animate ( http://jsfiddle.net/S8F9Y/ ) :
var $j = jQuery.noConflict();
$j(document).ready(function() {
// Get the slideshow options
var $slidespeed = parseInt( meteorslidessettings.meteorslideshowspeed );
var $slidetimeout = parseInt( meteorslidessettings.meteorslideshowduration );
var $slideheight = parseInt( meteorslidessettings.meteorslideshowheight );
var $slidewidth = parseInt( meteorslidessettings.meteorslideshowwidth );
var $slidetransition = meteorslidessettings.meteorslideshowtransition;
var $captionduration = $slidetimeout - ($slidespeed*2);
$j('.meteor-slides h1').delay($slidespeed).animate({left: '30',opacity: 1}, 600, function(){/*Animation complete.*/});
$j('.meteor-slides p').delay($slidespeed + 200).animate({top: '70',opacity: 1}, 600, function(){/*Animation complete.*/});
$j('.meteor-slides h1').delay($captionduration).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});
$j('.meteor-slides p').delay($captionduration - 200).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});
// Setup jQuery Cycle
$j('.meteor-slides').cycle({
cleartypeNoBg: true,
fit: 1,
fx: $slidetransition,
height: $slideheight,
next: '#meteor-next',
pager: '#meteor-buttons',
pagerEvent: 'click',
pause: 1,
prev: '#meteor-prev',
slideExpr: '.mslide',
speed: $slidespeed,
timeout: $slidetimeout,
width: $slidewidth
});
// Setup jQuery TouchWipe
$j('.meteor-slides').touchwipe({
wipeLeft: function() {
$j('.meteor-slides').cycle('next');
},
wipeRight: function() {
$j('.meteor-slides').cycle('prev');
},
preventDefaultEvents: false
});
// Add class to hide and show prev/next nav on hover
$j('.meteor-slides').hover(function () {
$j(this).addClass('navhover');
}, function () {
$j(this).removeClass('navhover');
});
// Set a fixed height for prev/next nav in IE6
if(typeof document.body.style.maxWidth === 'undefined') {
$j('.meteor-nav a').height($slideheight);
}
// Add align class if set in metadata
$j('.meteor-slides').each(function () {
meteormetadata = $j(this).metadata();
if (meteormetadata.align == 'left') {
$j(this).addClass('meteor-left');
} else if (meteormetadata.align == 'right') {
$j(this).addClass('meteor-right');
} else if (meteormetadata.align == 'center') {
$j(this).addClass('meteor-center');
}
});
});
The 1st problem is that there's no cycle so the text animation only
plays once,
the 2nd problem is that text effects are not in sync with slide effects,
the 3rd problem is that there's no slide transition for the first slide so if this is the first slide, the text animation should start right away for h1 and +200ms for p, with no additional delay ($slidespeed).
Thanks in advance,
Kim

Use the callback of each slide instead of trying to sync them by time.
$j('.meteor-slides').cycle({
after: function (currSlideElement) {
// Place all your animations here
// Example:
$j(currSlideElement).find('h1').animate();
// ...
},
cleartypeNoBg: true,
fit: 1,
fx: $slidetransition,
height: $slideheight,
next: '#meteor-next',
pager: '#meteor-buttons',
pagerEvent: 'click',
pause: 1,
prev: '#meteor-prev',
slideExpr: '.mslide',
speed: $slidespeed,
timeout: $slidetimeout,
width: $slidewidth
});
Place any captions and animations where it says // Place all your animations here and they will show after each slide has loaded.
You can also use before depending on what's best suited for your slideshow.
Demo here
Find more about how they are used here.