Jump to content


This topic is now archived and is closed to further replies.


iSlider change position of arrows

Recommended Posts




I am using the iSlider to display pictures on each page.  I have adjusted my images to a 2000X600 px dimension (I know recommended is 2000X800px but I wanted to make more of the image visible).  I would just like to adjust the arrows to be more centered now.  I am thinking I need to add custom CSS to:


.section-islider .flex-direction-nav a { }


Is this the correct class to manipulate and what would I change the position to?  The current attribute is position: absolute;


If it is not the correct class to manipulate, what would it be and what would the CSS need to be?



Thanks so much for any help.


Share this post

Link to post
Share on other sites



The best way to find the correct class is to inspect it via Chromes dev tools. Which should give you the following:


For the left navigation arrow - .flex-prev

For the right navigation arrow - .flex-next


Which you can use to change their positions such as this:


#site .flex-prev {
left: 50px;
top: 100px;
#site .flex-next {
right: -100px;
top: 100px;
On the right navigation arrow CSS, use negative values.


Please search our forums, before posting!

Share this post

Link to post
Share on other sites

No problem.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

  • Similar Content

    • flourishdesignstudio
      By flourishdesignstudio+
      I am working on a website that uses the normal Pagelines content section for the individual post pages. At the bottom of the pages there is built-in functionality that shows the title of the previous and next post so that users can navigate more easily.
      However, I would love to to change this and either make it say:
      << Post Title       add            Post Title >>
      <<Previous        and           Next >>
      Is this possible? What would I need to do to accomplish this?
      Thanks so much for the help!
    • dario
      By dario
      For some reason I am unable to target an iSlider link's text.
      Chrome inspector shows this:
      .section-islider .content.element-dark h2, .section-islider .content.element-dark p, .section-islider .content.element-dark a { color: #333; } But I cannot seem to change the link's color, even when I specify the particular instance of the iSlider section.
      Caching is off, Cloudflare is in dev mode, server Cache is clear, viewing in Chrome incognito mode, etc.
      What am I missing?
    • Toolshed
      By Toolshed+
      >>@Toolshed Please dont comment on year old threads, unless it has something to do with the original post authors problem, your last support request to the desk was +10 months ago, unless you are using another account?
      >>Your site, the slide seems to work exactly as it should.
      >>If you still have an issue please start a new topic.
      Hello Simon - I did actually email you directly about this on Nov 22 from my email [email protected], got no response from you. So I looked for a thread directly related (iSlider not sliding) and found the other one. Apologies, but it seemed the right way to proceed.
      To the current point: I'm not seeing the slider "working exactly as it should". It does not auto-advance (and it used to) on the most recent Safari or Chrome browsers on Mac OS. Are you using the same browser and OS that I am? The opening image stays on the slider and does not change unless I manually advance it.
      My website URL is: http://www.toolshed.biz
    • norbert
      By norbert
      i have a problem that my pictures are cut off (the bottom part is missing) when I use Islider in the desktop size. When i decrease the width of my browser to mobile device size, the complete pictures is shown again. 
      How can it modified so I can always see the complete picture?
    • brady
      By brady+
      can't upload images to the islider images are 2000 x 800 jpg. smaller than 2mbs. what else to i have to check?