Slideshow arrow placement?

[BedfordWriter]

Can anyone suggest a way to keep slideshow arrows away from the text and images in a slide?

I know I can disable the arrows and use the dots instead, but people seem to have trouble with those. Ideally, I'd like to set margins for the slide content so that text stays between the arrows instead of running below them. Just can't quite get the right combination with the CSS.

[DaveMags]

So I just started testing out some slideshows in one of my projects. When I was building it I was able to put some padding on the slide content to keep it off the edges and away from the left/right arrows. But to help control some of the styling on my slides and the content in it, I placed a <div> around the slide content on each slide and gave it a class so that I can control that <div> and the content within it more easily with CSS.

So first, in my topic looking at the code in the Text Editor view, the slideshow portion looks something like this:

Code: Select all

<MadCap:slideshow>
           <MadCap:slide>
                    <div class="slide-content-wrapper">
                         <p>Your first slide content. Text, images, whatever.</p>
                    </div>
           </MadCap:slide>
           <MadCap:slide>
                    <div class="slide-content-wrapper">
                         <p>Your second slide content. Text, images, whatever.</p>
                    </div>
           </MadCap:slide>
</MadCap:slideshow>

Then I added left and right padding to my css file. Change the 30px to whatever size works for your content.

Code: Select all

.slide-content-wrapper
{
   padding-left: 30px;
   padding-right: 30px;
}

Depending on your slideshow - where it is on the page, the content inside, what's around it, etc. - margin might work better for you. For me, the right amount of padding kept the arrows off the content regardless of the width on the browser. But the key for me was adding that <div> in the topic to wrap the slide content.

Hope this helps.