Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:27Length:3 hours
Crs 107011
  • Overview
  • Transcript

4.9 CSS: Homepage Slider

Welcome back. In this lesson, I'll begin styling the slider. So, let's jump back to the code editor, and we're gonna close the header here. And I'm gonna add import banner.less. We'll go ahead and create that file, CSS less banner.less. Now, our slider uses the following structure. It has the cycle slideshow as the parent element, and then, each slide has a class of slide, with a different ID for each one, so, let's start with the individual slides, actually. So, slide one, background color. I'm going to do a fold back color here, so I'm going to say color dark b g. And I'm using this in case the image cannot be found. I'm going to use URL, images, slide one, bg.jpg, zero, zero, and no repeat. Let's do the same for the other two slides. This is slide two and slide three. Now, you'll notice that these slides don't show up, and that's because we haven't loaded jQuery or our cycle plugin. So, let's do that. Go to cycle. Go to download, and you can simply click on download the Production Version, which is the smallest, and copy this link right here. Now go to index.html. All the way down. I'm going to say js script source will be that one. Now, I need jQuery, so go to jQuery.com, click on download. Grab version two. The compressed production version. Copy this link. [BLANK_AUDIO] And paste it right here. So, it's important that you load jQuery first, and then the cycle plugin. Now, you'll notice that we have a functioning slider. If you click on the Previous and Next buttons, the slider works. But we still have no images. And that's because I did a small mistake here. I put background color instead of simple background. So, now, there is the slides. Now, lets add some dimensions to them. Target the slide class. I'm going to set a min-height of 600 pixels, which is the height of this image right here. The slide background. And a width of 100%. Okay, now it's starting to look like something. Let's align the text to the center, and let's push the content inside the slides further down. So, I'm going to set a padding-top. Let's look in the PSD's. Let's look at the actual grid lines. So, one, two, three, four, five, six. So, I'm going to do baseline times, whoops, times six. Okay, so now, the content is exactly where it should be. Now, let's finish with the overall functionality of our slider and then we'll move onto its contents. So let's see about this slider navigation here. The classes that I'm using are cycle next and cycle prev, and each one has an anchor tag inside it. Cycle next, cycle prev, so I'm gonna target both of these to start with, and I'm gonna set a position-absolute because I need to position them on the right, and on the left of my slide. Now, in order for this to work, I also need to target the parent element, which is the div with a class of slideshow. Because, as you can see here, these are direct descendants. So, cycle slideshow. I'm gonna set position to relative. Okay, let's refresh and now, they are right here. So, let's set the top to 50%, and now they moved up, but we can't see them because they are hidden by this image. So, let's go ahead and set a z-index of about 1,000. So now, here they are. Now, I'm gonna target the anchor tag, and I'm gonna set the color to semi-transparent white, which is RGBA 255, 255, 255. And, let's see, these are 50% in opacity. So, 0.5. Okay. Let's increase the font size to about 3 ems, should do the trick. And now, I'm gonna do a hover state. And I'm gonna say color. Full white. Now, I'm going to target each one of these individually. And set its correct position, so cycle-pref should be on the left side. So, I'm going to say left about three ems, which is this. And then, cycle-next should be on the right side, so I'm going to set right to 3 ems. And there we go. Now, one last change here. Both of these have the top to 50%. But the top actually starts from the top of the actual element. So, we need to move them down by half of their height to align with the background image properly. So, that can be easily done by setting the margin-top to minus half their height which is 1.5 em. And now, they are positioned correctly. All right let me just check something real quick. So, we have slide one, slide one, I forgot to change the ID here. So, this is slide two, actually, and let's do another slide. Slide three. Okay, there we go. So that is a fully functional slider. Now, in the next lesson, I'll take care of the slider contents, as well as the banners for the portfolio and about pages. And as you can see, these aren't styled yet, because I didn't load the proper CSS into them so, see you next time

Back to the top