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
Boris Kamp
16,660 Pointstop value of .nav-next & .nav-prev div's
I implemented this great slider in Wordpress for dynamic content loading, everything works great but im struggling with the position of the .nav-next & .nav-prev div's
Here's my current situation:
Here's the css I used:
.owl-carousel .owl-controls .owl-nav .owl-next {
right: 0px;
}
.owl-carousel .owl-controls .owl-nav .owl-prev {
left: 0px;
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next {
top: 0;
position: absolute;
padding: 0!important;
background: rgba(255,255,255,.8)!important;
}
and the Javascript:
navText: [
"<span class='glyphicon glyphicon-chevron-left'></span>",
"<span class='glyphicon glyphicon-chevron-right'></span>"
],
As you can see in the screenshot, the next and prev div's are located at the top with some margin of 2px. I would like to set the 'top' value to 50% of the ".owl-stage-outer" div. That's the div wrapping all the items. I can't set it to a fixed value because my carousel is responsive....
Would be great if somebody could help me out with this! Thanks!
1 Answer
Markus Ylisiurunen
15,034 PointsHi Boris!
It would be easier to solve this problem if you could provide a html code for the slider.
But I'll try to help you. You should have a parent element for .nav-next and .nav-prev which has a height of 100%. Then set its position to 'relative'. Then set .nav-next's and .nav-prev's position to absolute and set their top property to '50%'. This will make their top part to be at the vertical center point of their parent element. To solve this you should set their margin-top to the negative half of their height.
So to make this a little simpler and easier to understand I try to demonstrate it with a little code.
.buttons-parent {
position: relative;
}
.nav-next,
.nav-prev {
position: absolute;
top: 50%;
margin-top: -xxx px;
/* This value should be a negative half of the height of these elements!
For example if their heights are 50px this value should be -25px.
*/
}
Boris Kamp
16,660 PointsBoris Kamp
16,660 PointsThis works great! thanks! however, when viewed on iPhone or iPad, the icons get pulled to the footer of the page! very strange and I have no idea how to troubleshoot this, do you have any idea? here is the working website: http://www.awf-management.com/
Thanks!
Markus Ylisiurunen
15,034 PointsMarkus Ylisiurunen
15,034 PointsI don't own iPad or iPhone right now, but when I resize the browser window it works just fine. I don't see any weird behavior.
Boris Kamp
16,660 PointsBoris Kamp
16,660 Pointsyeah thats the strange thing about it, resizing on desktops/laptops etc works fine, testing it at screenfly or something works fine as well, but trust me, when viewed on iPad or iPhone (tested it on both) the icons get pulled to the bottom of the body container. it appears in the footer. The buttons still work though but that makes sense.
Does anybody else have any idea?
Markus Ylisiurunen
15,034 PointsMarkus Ylisiurunen
15,034 PointsThat sounds like some kind of media query problem to me. I'm not sure. It's really weird because it only appears on iPhone and iPad. My best advice would be to play with your responsive design (media queries) and try to debug the problem. Do you have some kind of media query which only targets to mobile and tablets? Maybe some kind of pixel density property which targets it...
I'm sorry but that's pretty much all I can do because I don't have tablets.