Search code examples
fullscreenflexslider

Full width flexSlider with centered direction arrows

I am using flexSlider in a full width mode
for a site that I'm building.see here:
http://clients.tipoos.com/glam/
notice that the site hasthis full width section for the slider but all other content is centered using a consistent class called: .main

What I'm trying to accomplish seems pretty easy but I can't make it work: I would like to keep the slider full width but center the arrows like so:

enter image description here

I tried writing small Jquery to wrap the arrows with div but it didn't work.
neither wrap nor wrapAll was working..

will appreciate any help
Thanks

Solution

  • Found a solution. hope it will help anyone here. in order to center the arrows but still having a full width slider I used the follwing CSS:

    .flexslider .flex-direction-nav {
  margin: 0 auto !important;
  max-width: 980px;
  position: relative;

}

    Explanation:

    margin: 0 auto !important;
    this centers the arrows container

    max-width: 980px;
    giving a fixed width to depending on your website width

    position: relative;
    this makes the magic. it allows the arrows to be positioned inside the main div

    I also added negative top position to my arrows but that's only in my case
    hope that helps anyone.