We Keep Coding

How do I get this If statement to run once until it comes back round (the condition is constantly true until slide changes)

I've created a Flickity slider through Jquery and require a little assitance.
I'm using the selectedIndex as a condition to check what slider is visable. See code below:
$carousel.on( 'select.flickity', function() {
if (flkty.selectedIndex === 0) {
hideAllText();
text0.fadeIn('slow');
}
});
This is saying, when slider 0 (initial slide) fade in var text0.
I want to do this for 6 sliders but as the slide doesn't change until 4 seconds has been the if statement keeps running so it keeps hiding and showing text.
Any ideas how I can make this a one time run until the slide comes round again.
Thanks :)

This should result in the relevant code only being executed once:
text0Shown = false;
$carousel.on('select.flickity', function() {
if (!text0Shown && flkty.selectedIndex === 0) {
text0Shown = true;
hideAllText();
text0.fadeIn('slow');
}
});

Cycle through classes on Jquery to animate

enter image description here
I'm trying to create an animation where if you click the button the circles animate around the path and changes size. I'm not sure how i would cycle the classes on the next click ?
http://bluemoontesting.co.uk/bluemoon2016/people.html
I'm using an svg and have targeted the elements with this so far:
<script>
$(".animate-slider").click(function() {
$('.st7').toggleClass("top-left");
$('#XMLID_292_').toggleClass("left");
$('#XMLID_293_').toggleClass("center-right");
$('#XMLID_297_').toggleClass("top-right");
$('#XMLID_301_').toggleClass("top");
$('#XMLID_283_').toggleClass("top-center");
});
</script>
If anyone could help me i'd be very grateful :)
Thanks

I would take a little different approach. Instead of toggling classes, to get it to move to more than two positions, you will need to cycle the classes assigned to each element instead. Storing the class names in an array would allow you to move them in the array to cycle the position that each element moves to next. I created a simplified example.
$(document).ready(function () {
var steps = ['right', 'bottom-right', 'bottom-left', 'left', 'top'],
allClasses = steps.join(' ');
$('#go').click(function() {
$('#a').removeClass(allClasses).addClass(steps[0]);
$('#b').removeClass(allClasses).addClass(steps[1]);
$('#c').removeClass(allClasses).addClass(steps[2]);
$('#d').removeClass(allClasses).addClass(steps[3]);
$('#e').removeClass(allClasses).addClass(steps[4]);
steps.push(steps.shift()); // move first element to the end
// to cycle in the other direction you would pop and unshift instead
// steps.unshift(steps.pop()); // move last element to the beginning
});
});

You could just use setInterval like so:
var $st7 = $('.st7'); //class selectors can be expensive, so cache them
function rotate() {
$st7.toggleClass("top-left");
$('#XMLID_292_').toggleClass("left");
$('#XMLID_293_').toggleClass("center-right");
$('#XMLID_297_').toggleClass("top-right");
$('#XMLID_301_').toggleClass("top");
$('#XMLID_283_').toggleClass("top-center");
}
//2000 is milliseconds, so that's two seconds
var rotateIntervalId = setInterval(rotate, 2000);
//optionally consider stopping/starting the effect on mouse hover/exit
$('#Layer_1').on('hover', function() {
clearInterval(rotateIntervalId);
}).on('blur', function() {
rotateIntervalId = setInterval(rotate, 2000);
});

Why control buttons in jcarousel not working?

I would like use control buttons in JsCarousel slider.
In my code i make function for initialization carousel:
<script type="text/javascript">
function InitializationJsCarousel(obj){
var carousel = $(obj).jcarousel({
// Core configuration goes here
});
$(obj)
.on('jcarousel:create jcarousel:reload', function() {
var element = $(this),
width = element.innerWidth();
// This shows 1 item at a time.
// Divide `width` to the number of items you want to display,
// eg. `width = width / 3` to display 3 items at a time.
width = width / 3;
element.jcarousel('items').css('width', width + 'px');
})
.jcarousel({
// Core configuration goes here
});
$('.jcarousel-prev').jcarouselControl({
target: '-=1',
carousel: carousel
});
$('.jcarousel-next').jcarouselControl({
target: '+=1',
carousel: carousel
});
}
$(function(){
...
InitializationJsCarousel('.jcarousel');
...
});
</script>
But as i can see jcarouselControl not working. I see console,but errors not found. It problem becouse control buttons not working...
Tell me please why control buttons(jcarouselControl) not working and how make that theys work?

Code working for me.
First check that include jquery.jcarousel-control.js or jquery.jcarousel-control.min.js
Second check class name for control element (in your code it jcarousel-prev). Check name in js and in html.

Creating custom slider in jQuery

I'm trying to create a custom slider using jQuery only I'm unsure on the best practice for how ot make this work.
My slider has 3 slides and a controls section each relating to a slide (1, 2, 3).
When a control is clicked I've got my slide fading out only I'm unsure on how to say if X control was clicked, add the active class to the relevant slide?
Ive made a fiddle to explain which i hope helps, what i need however is an explanation of the best practice in doing this?
Sorry if the questions hard to understand!
What I'm using to fade out my current slide, but then once its gone I cant rely on the active class to say add a class to the next element?
$('.ctrl-one').click(function(){
$('.active .slide-img').animate({
'marginRight' : "-=350px"
}, 500, 'easeOutQuint', function(){
$('.active .description').fadeOut().promise().done(function(){
$(this).parent().removeClass('active');
});
});
});
http://jsfiddle.net/Esm97/

I guess this is what you need,try this code , but am sure you can find a lot different methods.
$('.controls a').click(function() {
var current = $(this).attr('class').replace('ctrl-', '');
if (!$('.sector-banner .' + current).hasClass('active')) {
$('.active').animate({
'marginRight': "-=350px"
}, 500, 'linear', function() {
$(this).fadeOut().promise().done(function() {
$(this).css('margin-right',0);
$(this).removeClass('active');
$('.sector-banner .' + current).addClass('active');
$('.sector-banner .' + current).fadeIn();
});
});
}
});

how to get the total number of slides in flexslider

I am using flexslider http://www.woothemes.com/flexslider/ , now I want to get the total number of the slides and the number of the sildes.
number of the slide/total number of the slides
for example if I have 5 slides and I am now in 2nd slide, so this will be the output below the slides.
2/5
if I click the "next nav" it will become
3/5
if "prev nav";
2/5
It is possible in flexslider? if yes, how to do it?

You can find the answer here:http://www.woothemes.com/flexslider.
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".flex-container",
start: function(slider) {
$('.total-slides').text(slider.count);
},
after: function(slider) {
$('.current-slide').text(slider.currentSlide);
}
});
});
</script>
If you want even the first slide to be counted you can add in the start function:
$('.current-slide').text(slider.currentSlide);
If you want the current-slide to begin with number 1 (not 0) you can do:
$('.current-slide').text(slider.currentSlide+1);

According to this website, you can do it with the callback API. http://www.woothemes.com/flexslider/. Write a Start and After callback method when you instantiate flexslider, and pass in the slider. Then use slider.count and slider.currentSlide to get what you need. In my code below, $slider_wrap, $current_slide and $total_slides are just variables assigned to jQuery objects where I wanted to display the slider count. I did slider.currentSlide+1 because the first slide is actually 0 in the array.
$slider_wrap.flexslider({
start: function(slider){
$current_slide.html(slider.currentSlide+1);
$total_slides.html(slider.count);
},
after: function(slider){
$current_slide.html(slider.currentSlide+1);
$total_slides.html(slider.count);
}
});

Base on the demo here
I notice the demo and others will generate the code like below :
<ol class="flex-control-nav flex-control-paging">
<li><a class="">1</a>
</li>
<li><a class="flex-active">2</a>
</li>
<li><a>3</a>
</li>
<li><a>4</a>
</li>
</ol>
So according this, you can get what you want using the code:
var index = $('li:has(.flex-active)').index('.flex-control-nav li')+1;
var total = $('.flex-control-nav li').length;

Based on the markup in that page you link you can get the number of slides like this:
$(".slides").find("li").length
And you can find the number of the active slide with:
$(".slides").find("li.flex-active-slide").index() + 1;
And if you want to change something when the slider changes, you can add something to the after callback.
$(".mybox").flexslider({
after: function() {
// update the count
}
});

I am currently doing exactly the same thing to generate the slide index (...though I'm using PHP to generate an integer for the number of images)
Try creating an element for the slide index...
<p class="slideIndex"></p>
...and use the after:function...
$('.flexslider').flexslider({
after: function(slider) {
slider.find('.slideIndex').html(slider.currentSlide + 1);
}
});

Get the slider and then use count:
$(yourslider).data('flexslider').count