This forum is now read-only. Please use our new forums at discuss.codecademy.com.
Changing the slide to auto?
Hello everyone, i just completed this course and i was wondering, if i wanted the slide to go automatically without clicking on the arrow, how can i do that? cheers!
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if(nextSlide.length == 0) {
nextSlide=$('.slide').first();
nextDot = $('.dot').first();
};
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if(prevSlide.length == 0) {
prevSlide=$('.slide').last();
prevDot = $('.dot').last();
};
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);
Since we already have a function to advance the carousel, (the arrow-next click event handler) all we need is a timed event to trigger that event at intervals.
var int = self.setInterval(function(){
$('.arrow-next').trigger('click');
},5000);
That should start the carousel, in theory. But now we need a way to stop it. It cannot under the current circumstances be part of the click event handler because the timer is triggering it so we need another event, such as a click on the '.active-slide', for instance.
$('.active-slide').click(function(){
window.clearInterval(int);
return false;
});
Again, in theory. I can sense that this won't work. Rather than wait until I have a working solution, I'll post this so we can all dig in to it. Keep us posted!
This selector rule was added to the style sheet to make things more transparent:
.dot {
cursor: pointer;
}
Now we get a hand that suggests we can click this and get some form of response. Because of the five second delay it's not immediately obvious, but we do get something when we click. No more carousel, or more carousel. We just have to wait the five seconds to see it happen. More than five seconds with nothing happening means, it's stopped.
8 Comments
This has been fun. So glad this question came up! Thank you, @ mrRyuk.
LOL, thank YOU, how much time you've been coding?
On this post, about two hours. In JS, about forever, but I forget as fast as I learn so trip over the same rock repeatedly. I never give up, that's the key.
Actually I started applying JS to my HTML pages about 8 years ago. I learned what I needed to learn to solve each problem, very seat of the pants. It was only when I finally took up learning the language as a whole (here at CC) that I was able to find all the things I was doing wrong. Still, I'm no expert, just a die hard hobbyist, which gives me the time to help out around here.
Hey Roy, do You have portfolio site or blog? :D
Nothing that's a going concern and my production sites that are going concerns I don't promote... Their owners do, so no links from me. Sorry.
@Roy
I'm no expert, just a die hard hobbyist
I always thought you were a full time professional programmer of some sort!
This is my exercise 12 submission, which exceeds the lesson requirements, but spells out what we are working toward:
var int;
function rotate(){
function next(){
$('.arrow-next').trigger('click');
}
int = self.setInterval(next,5000);
}
function freeze(){
window.clearInterval(int);
return false;
}
function arrowNext() {
var currentSlide = $('.active-slide');
var nextSlide, nextDot;
var currentDot = $('.active-dot');
if ($('.slide').last().hasClass('active-slide')){
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
} else {
nextSlide = currentSlide.next();
nextDot = currentDot.next();
}
currentSlide.slideUp(600).removeClass('active-slide');
nextSlide.slideDown(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
}
function arrowPrev() {
var currentSlide = $('.active-slide');
var prevSlide, prevDot;
var currentDot = $('.active-dot');
if ($('.slide').first().hasClass('active-slide')){
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
} else {
prevSlide = currentSlide.prev();
prevDot = currentDot.prev();
}
currentSlide.slideUp(600).removeClass('active-slide');
prevSlide.slideDown(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
}
function dropDown(){
var currMen = $(this).siblings('.dropdown-menu');
$('.dropdown-menu').not(currMen).hide();
currMen.toggle();
}
var main = function(){
$(document)
.on('click','.dropdown-toggle',dropDown)
.on('click','.arrow-next',arrowNext)
.on('click','.arrow-prev',arrowPrev);
$('.slider-dots')
.on('click','.dot',freeze)
.on('click','.active-dot',rotate);
rotate();
};
$(document).ready(main);
3 Comments
and if the user would be happy to stop all these activity what will be the code? Just curious. And this is very interesting about your experience in the past.
Not sure I understand the question. 'stop all these activity'. clicking on a dot freezes the current pane.
I meant to ask how the user can stop the auto-movement of the slides. Sorry for my bad english. I think you guessed right.
So far this seems like a nice working solution. The code below is from the bottom of the existing code inside the main function. The closing RBRACE for main() is indicated.
$('.slider-dots')
.on('click','.dot',freeze)
.on('click','.active-dot',rotate);
rotate();
} // end of main()
var int;
function rotate(){
function next(){
$('.arrow-next').trigger('click');
}
int = self.setInterval(next,5000);
}
function freeze(){
window.clearInterval(int);
return false;
}
$(document).ready(main);
The carousel is triggered when main() has been read in and all the event listeners are registered. Note the rotate()
at the last line of the function.
The two functions we use for this are both in window scope, outside of the function. The .on()
listeners for '.slider-dots' delegate two ways. Click a grayed out dot and it stops the carousel. Click on the dark (active) dot and the carousel resumes.
It turned out to be something not that difficult, at all. Always love when a plan comes together.
1 Comment
$(main); kicks it off nicely.
Help me, please, to understand! Why $('.active-slide') is written with ".", but ...removeClass('active-slide'); - without "."
Thanks!)
1 Comment
removeClass() is a method specifically targeting class attributes. The argument for the method is simply the string value of the attribute in the DOM. 'active-slide' is not a selector, but a class name. '.active-slide' is a selector that denotes a class name.
2 Comments
I just dropped this code into the function and saw it go to work. And the click on the slide stopped the timer. We're on the right track. Now to figure how to restart the timer.
Buggy. Going to try clicking on '.dot' indiscriminately, see if that offers a better solution.