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! While you're at it, check out some resources Treehouse students have shared here.

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 Using jQuery Plugins Using a jQuery Carousel Changing the Appearance of the Carousel

geoffrey
geoffrey
28,736 Points
Posted by geoffrey
geoffrey
28,736 Points

display arrows slick plugin

Hey there, after watching the video, I wanted to display the left and right arrows alongside the carrousel.

If I check the slick documentation, It's written that by default arrows are displayed. However, these arrows don't appear, I try to set them to true, to be sure to see them this way.

 $('.slides').slick({
          autoplay:true,
          autoplaySpeed: 2000,
          arrows:true
        });

But they still don't appear, I have as well inspected the HTML, but I haven't found any html tags related to these arrows...

2 Answers

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

OK, I've checked again this morning, and It's because the default color of arrows is white, so we don't see it as the background of the body is also white.

if ever someone meets the same issue apply this css and you'll see them. Don't forget to zoom out as the slider takes all the width of the page, so you won't see the arrows if you don't do that.

.slick-prev:before, .slick-next:before { 
    color:red !important;
}
Ximena Castillo
Ximena Castillo
Courses Plus Student 1,921 Points

Or you can modify the left and right respectively to be inside of the wrap.

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Good catch! outline: 2px solid red is often a helpful way to highlight elements with CSS (particularly because the outline is unlikely to affect any other properties and doesn't take any space).