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
Anthony Gomez
Full Stack JavaScript Techdegree Student 10,089 PointsHow To Build A Background Img Slider Without Using Lists?
Hi, im looking for some course or tutorial that helps me out a bit to build a Background Img Slider Without Using Lists, most of the background img sliders that i see on the internet use list and are fixed positioned.
i would like to make one that only use divs with a background x with a background-size: cover.
Anthony Gomez
Full Stack JavaScript Techdegree Student 10,089 PointsI wanna build a slider like this one in this template, but without the position fix that i have seen in most full background img sliders, i want it to stay in the "Home" section.
2 Answers
Tim Rourke
12,151 PointsAnthony,
Check this CodePen I made out:
http://codepen.io/timothyrourke/pen/Dadte
Let me know if this bears further explanation. The basic idea is to wrap the elements in a div, set a timer to call a function, and then have that function target that div with jQuery to edit its css.
It's worth noting a couple things:
A) these kinds of background display properties don't have bulletproof browser support going back
B) I might be wrong, but I seem to recall that you can't use jQuery's .css() method to edit background-image parameters when using the totally shorthand background css syntax. Anyway, it's better to restrict that kind of style edit to only the part of the element's style you want to change. Anyway, because of how .css() works, you have to update the url AND include the linear-gradient overlay, because you can't just edit the url() of the background image with jQuery.
The other way to accomplish the different background images would be to write classes with new urls, and use javascript/jQuery to change the classes programmatically.
Holler if you have any questions.
Tim
Tim Rourke
12,151 PointsBy the way, this whole thing would look nicer if you used some sort of transition. jQuery offers myriad options to pull that sort of thing off. In a live setting, I would probably also slow down the timer - 2 seconds is probably too short a duration for a style change like that.
Anthony Gomez
Full Stack JavaScript Techdegree Student 10,089 PointsThanks looks fine, i'll check it and let you know, you've help me a lot with this.
Tim Rourke
12,151 PointsAh, gotcha! In that case a <div> is the best option, because the background in that case is purely presentational.
I'll try to put something together for you. You just want fading transitions?
Anthony Gomez
Full Stack JavaScript Techdegree Student 10,089 Pointsyeah basically. like you just said is pure presentational.
Tim Rourke
12,151 PointsTim Rourke
12,151 PointsJust my 2 cents: Why do you want to avoid using lists? I would recommend sticking with them if possible. Using list elements for this type of slider is semantically correct. The JavaScript for moving <li> elements won't really be different from moving <div>s. You may also see deeper browser support by avoiding background position and size properties.
Check out the w3 spec for the <ul> element:
http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-ul-element
Imagine what a background slider would look like if CSS and JavaScript were turned off. Ideally, the HTML markup would present the elements in a sequential order relevant to the content of each slide. It's also worth considering what a blind user might experience.
There might also be negative accessibility implications: <div> elements by themselves don't carry meaning, and a blind user encountering them with a screen reader might not get the contextual clue that the set of <div>s is related or has a sequence.
I might be misunderstanding your goal completely. Are you trying to keep the element that changes down to one single element? Describe your use case a bit and I can try to write an example.