Develop Reference

Changing slick slider dots style depending on slick-active class?

For the past couple of days I've been Googling and searching for solutions and have read a ton of manuals, but I'm still struggling somewhere. And yes, I'm a beginner.
So what I want to achieve is to change Slick slider dots depending on the <li class="slick-active"> element class. I've tried many options and if I'm right I need to work with on('beforeChange', function(event, slick, currentSlide, nextSlide).
What it look right now
What I want it to look(1)
What I want it to look(2)
I want that when you load the page, the first slide (the active one having <li class="slick-active">) has an SVG circle with countdown in it while others have a fully colored circle without the countdown. The countdown timer is set the same as the slides' speed (autoplaySpeed: 4000), so when it goes from 00 to 04, the next slide displays.
jQuery(function ($) {
jQuery(document).ready(function () {
// Slider and slider dots
$(".banner-slider").slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
autoplay: true,
autoplaySpeed: 4000,
dots: true,
customPaging : function() {
if ($(".slick-dots > li.slick-active")) {
return '<a class="dot">' + '<div id="countdown"> <div id="countdown-number"></div> <svg> <circle r="18" cx="20" cy="20"></circle> </svg> </div>' + '</a>';
}
else {
return '<a class="dot">' + 'fully colored circle without timer in it' + '</a>';
}
}
});
var countdownNumberEl = document.getElementById('countdown-number');
var countdown = 0;
countdownNumberEl.textContent = countdown;
setInterval(function() {
countdown = ++countdown >= 4 ? 0 : countdown;
countdownNumberEl.textContent = '0' + countdown;
}, 1000); });
All those return statement tags are styled in an .scss file and <div class="banner-slider"></div> has PHP code in it.
If I run the function as it is written now, I get the countdown circles for all my slides. If i use if ($(".slick-dots > li").hasClass(".slick-active")), it returns false in console.log()
So, I'm guessing that I need to use the previously mentioned function on('beforeChange/afterChange', function(event, slick, currentSlide, nextSlide), but I can't figure how to get it to work.

$(selector).flexslider ({ before: function() }) issue - skips first slide

Trying to relocate captions on flexslider,thought I could do:
var myP = $('p.flex-caption').detach().appendTo(x);
where x would be whatever element I wanted the captions to appear after.
In practice it works ok - I get a dump of all of the captions instead of just the one associated with the active slide but that may be just a css thing -the bigger problem is this doesn't happen until the second slide. I am calling this inside of flexslider.js, (pasted below) inside of $(selector).flexslider and inside of 'before' - I'm guessing the problem has something to do with how things are loaded. In an alternate approach, instead of using detach() to just pluck the p off and re-locate it, I tried creating an element - captionDiv - inside of which another created element - caption - would get filled with the html returned from querying slider.slides[slider.animatingTo] but, again, the first caption wouldn't appear.
$(selector).flexslider( {
smoothHeight: options.h_responsive,
animation: options.animation,
direction: options.direction,
slideshow: options.slideshow,
slideshowSpeed: Number( options.cycle_speed ) * 1000,
animationSpeed: Number( options.animation_speed ) * 1000,
pauseOnHover: options.pause_on_hover,
controlNav: options.control_nav,
directionNav: options.direction_nav,
keyboard: options.keyboard_nav,
touch: options.touch_nav,
before: function( slider ) {
slider.removeClass('loading');
//added for outside caption
//var sgmCaption = $('p.flex-caption');
var tnh = $('div.flex-thumbnail-holder');
//sgmCaption.detach().appendTo(tnh);
if (!slider.captionDiv) {
slider.captionDiv = document.createElement("div");
slider.captionDiv.setAttribute("class", $(slider)[0].getAttribute("id") + "-caption flex-outside-caption");
//$(slider.captionDiv).insertAfter($(slider));
$(slider.captionDiv).insertAfter($(tnh));
}
var caption = slider.slides[slider.animatingTo].querySelector('.flex-caption');
slider.captionDiv.innerHTML = caption ? caption.innerHTML : "";
}
});
Thank you for your help.

Per documentation:
$(selector).flexslider({
// Callback: function(slider) - Fires when the slider loads the first slide
start: function(){},
// Callback: function(slider) - Fires asynchronously with each slider animation
before: function(){}
});
before callback is fired only when animation between slides starts. You need to prepare the caption of the first slide yourself - after hooking up or in the start callback.

How to evenly time fading transitions?

so I'm trying to create a simple slide show from scratch, and so far I was able to get full screen images to fade out and fade in infinetly, but for some odd reason using setInterval(function(){fade(var)}, 3500);didn't work, maybe someone can explain why the first and last images took way longer than 3,5 seconds to fade. Meanwhile, I was trying to solve that problem by implementing a callback function in the fade(). My example has four images, and they start fading out until it reaches image one, then don't fade out image one and start fading back in image two until image 4, and do this forever, here is my recent attempt to implement a callback function:
var i = 4;
$(document).ready(function(){
fade(i, fade);
});
var fadeIN = false;
function fade(objectID, callbackfn){
var fadeTime = 3500;
if(!fadeIN){
$("#slide-"+objectID).fadeOut(fadeTime);
i--;
if(i === 1) {
fadeIN = true;
}
}
else{
i++;
$("#slide-"+objectID).fadeIn(fadeTime);
if(i === 4){
fadeIN = false;
}
}
if(arguments[1]){
callbackfn(i);
}
}
But that is not working, it fades out image 4, image 3 and stops on image 2. Maybe there is a way to evenly time the fading transitions using the setIntervel(), if so can someone tell me how? Appreciate any help.
Here is a JSFiddle to the code: http://jsfiddle.net/8kgc0chq/ it is not working tho.

Here is the doc for .fadeOut()
There is an optional argument complete:
A function to call once the animation is complete.
Put the next animation in there, they too take a complete (callback) function.
$("#id").fadeOut(fadeTime, function() {
// code to execute after animation complete
});

You need to do it properly with javascript. Easy way fails after last element.
So here is my solution. Can it be improved further, I think yes.. But it does work now. And is future proof to some extent.
I cleaned up css and changed html structure a little.
Demo: http://jsfiddle.net/8kgc0chq/3/
$(document).ready(function () {
$(window).resize(function () {
realTimeHeight();
});
realTimeHeight();
startSlides();
});
function startSlides() {
var fadeTime = 1000,
delay = 1300,
i = 0,
slides = $("#hero-slider > .slide"),
len = slides.length;
slides.hide();
var pF = $('<div class="slide">'), pB = pF.clone();
pF.attr('id', slides.eq(i).attr('id'));
$('#hero-slider').prepend(pF).prepend(pB);
setInterval(fadeThisIn, fadeTime + delay);
function fadeThisIn() {
pB.attr('id', pF.attr('id'));
i = ++i % len;
pF.hide().attr('id', slides.eq(i).attr('id')).fadeIn(fadeTime);
}
}
function realTimeHeight() {
var altura = $(window).height();
$("#hero-slider").css("height", altura);
}

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.

Back button js slideshow

I'm not familiare with js and I am trying to make a slider witch contains html divs with animation. This is the js I use:
$(function(){
// find all slides
var slides = $('.main-slide');
// starting index
var i = 0;
// click listener
$('#main-slider-next').click(function(){
// find next index
// i + 1 or 0 if end of slides
i = ++i % slides.length;
// scroll to that index
$('.slider-wrapper').animate(
{'left' : -(slides.eq(i).position().left)},
1000
);
});
});
The code contains a next-slide button, but I am wondering how to make a previous-slide button with js. Does anyone have a clue how I can make that?

quite easy. try:
$('#main-slider-previous').click(function() {
$('.slider-wrapper').animate({
'left': '+=100%'
},1000);
});

You can always use some simple jQuery slider e.g http://www.basic-slider.com/ (or more advanced http://unslider.com/)
All you have to do is to change animation type settings:
animtype : 'fade',
to
animtype : 'slide',
And you're ready to go ;).