Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ivan Tomicic
Ivan Tomicic
3,873 Points

Rotating 6 divs

Ok, I'm really tired of trying to find solution, I need your help guys.

I have 6 full screen divs that I need to rotate one after each other at top of my home page. I need them to be divs because they have different content inside.

How can I do that? Please help me out

1 Answer

Ryan Duchene
PLUS
Ryan Duchene
Courses Plus Student 46,022 Points
Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

So, like a slider? There's a lot of jQuery sliders out there, but my personal favorite is SlidesJS.

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

There is a list of required properties that you have to specify, with the width and height of the slider being two of them. My trick has always been to use the following JavaScript:

// storage
var $win = $(window);

// Get the width and height of the window
var width = $win.width();
var height = $win.height();

// Does the exact same thing as above, but updates the variables on every resize
$win.resize(function() {
    width = $win.width();
    height = $win.height();
});

// Initialize the slider
$('#slider').slidesjs({
    width: width,
    height: height
    // more options here
});
Ivan Tomicic
Ivan Tomicic
3,873 Points

I am trying and trying and trying and can't get it to work... Can you please take a look at these files and let me know how to make these divs adjust to fullscreen? Please.

Files

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

I remember messing around with this, and I think it only works on a refresh. I also usually don't run my sliders on mobile devices.

Ivan Tomicic
Ivan Tomicic
3,873 Points

I have no idea what else to try... I'm gonna have to spend a lot of time with this script

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

You wrapped your slider in a div with the container class. Remove that container, use the width and height properties described in the SlidesJS documentation, and you should be good to go.