jQuery Cycle Next/Previous Buttons inside “nav” div

SeemiaRes

New Member
EDIT: I added the HTML for where I am currently placing the images. The CSS is literally just a simple position:absolute; bottom:5px; and left/right depends on how many slides are up at the time.If this has been answered elsewhere, I couldn't find it. Would greatly appreciate some insight on this.Using jQuery Cycle and a relatively simple implementation at that. What I am trying to do is place a previous arrow image in front of the navigation bullets and a next arrow image at the end. Like this:<-- [] [] [] -->I have the bullets working fine, and I just absolutely positioned the arrows where I needed them to go at the time. This isn't what I want to do in the long run, however, since a client will be adding/removing content on this slider and there may be 4 or 5 slides one day and 2 slides the next (this is an extreme case, most likely won't happen). I want to make sure I get very little requests from the client to change things myself sO I'm trying to make it dynamic.\[code\]<div class="UI_Callout-content"> <div id="s4" class="pics"> <div><img src="http://stackoverflow.com/questions/15691523/#" alt="" width="" height="" /></div> <div><img src="http://stackoverflow.com/questions/15691523/#" alt="" width="" height="" /></div> <div><img src="http://stackoverflow.com/questions/15691523/#" alt="" width="" height="" /></div> </div></div><img id="UI_movePrev" src="http://stackoverflow.com/questions/15691523/img/UI_SlideShow-prev.png" alt="" width="10" height="12"><img id="UI_moveNext" src="http://stackoverflow.com/questions/15691523/img/UI_SlideShow-next.png" alt="" width="10" height="12">\[/code\]The JS:\[code\]$(window).load(function() { $('#s4') .before('<div id="nav">') .cycle({ fx: 'scrollLeft', speed: 'slow', pager: '#nav', next: '#UI_moveNext', prev: '#UI_movePrev', after: function(curr, next, opts) { var slide = opts.currSlide + 1; var slideCount = opts.slideCount; //tracking stuff } } });});\[/code\]The .before code piece was the jQuery cycle recommended way to include it the navigation. The plugin writes the navigation and I used CSS to make them bullets. I need to be able to place my #UI_movePrev before the bullets start and #UI_moveNext after the bullets end. I've tried a few different ways.By the way, I am using jQuery 1.6.2 (client requirements; intranet) and jquery.cycle.all.js (most recent; downloaded maybe 5 days ago?).Thanks for any of your help!
 
Back
Top