positioning images over image

Question

I am creating a slider (carousel) and i am successful so far yet but i am stuck at one place here is my code

the script

$(document).ready(function() {

//rotation speed and timer
var speed = 5000;
var run = setInterval('rotate()', speed);

//grab the width and calculate left value
var item_width = $('.slides li').outerWidth(); 
var left_value = item_width * (-1); 

//move the last item before first item, just in case user click prev button
$('.slides li:first').before($('.slides li:last'));

//set the default item to the correct position 
$('.slides ul').css({'left' : left_value});

//if user clicked on prev button
$('.prev').click(function() {

    //get the right position            
    var left_indent = parseInt($('.slides ul').css('left')) + item_width;

    //slide the item            
    $('.slides ul:not(:animated)').animate({'left' : left_indent}, 1000,function(){    

        //move the last item and put it as first item               
        $('.slides li:first').before($('.slides li:last'));           

        //set the default item to correct position
        $('.slides ul').css({'left' : left_value});

    });

    //cancel the link behavior            
    return false;

});


//if user clicked on next button
$('.next').click(function() {

    //get the right position
    var left_indent = parseInt($('.slides ul').css('left')) - item_width;

    //slide the item
    $('.slides ul:not(:animated)').animate({'left' : left_indent}, 1000, function () {

        //move the first item and put it as last item
        $('.slides li:last').after($('.slides li:first'));                  

        //set the default item to correct position
        $('.slides ul').css({'left' : left_value});

    });

    //cancel the link behavior
    return false;

});        

//if mouse hover, pause the auto rotation, otherwise rotate it
$('.slides').hover(

    function() {
        clearInterval(run);
    }, 
    function() {
        run = setInterval('rotate()', speed);   
    }
); 

});

   //a simple function to click next link
  //a timer will call this function, and the rotation will begin
  function rotate() {
$('.next').click();
   }



   </script>

And the css is

 <style>
 .carousel {
margin:0 auto;
overflow:hidden;
            }

  .slides {
overflow:hidden;
/* fix ie overflow issue */
position:relative;
width:735px;
height:198px;
padding-bottom:13px;
         }

    /* remove the list styles, width : item width * total items */  
    .slides ul {
left:0;
top:0;
list-style:none;
margin:0;
padding:0;  
width:3000px;
float:left;
position:absolute;
               }

    /* width of the item, in this case I put 250x250x gif */
    .slides li {
float:left;
list-style:none;
width:735px;
               }

    .slides li img {
padding:0;
                   }

    /* Styling for prev and next buttons */
    .slides ul li.buttons {
display:block;  
position:relative;

    }

    .buttons a {
display:block;
width:22px; 
height:46px;
text-indent:-999em;
float:left;
               }

     a.prev {
background:url(Wireframes_Carousels/sprite/sprite.png) 0px -100px no-repeat;
            }

    a.prev:hover {
background:url(Wireframes_Carousels/sprite/sprite.png) -60px -100px no-repeat;
                 }

    a.next {
background:url(Wireframes_Carousels/sprite/sprite.png) -30px -100px no-repeat;

          }

    a.next:hover {
background:url(Wireframes_Carousels/sprite/sprite.png) -90px -100px no-repeat;
                 }


    .txt{
float:left;
text-align:left;
position:absolute;
margin-top:26px;
margin-bottom:19px;
}

    .txt h1{
margin-left:34px;
display:inline;
font: "Trebuchet MS", bold, 25px;
color:#003399;


}

    .txt p{
margin-left:34px;
font:Verdana,Reg.,18px;
color:#444;
line-height:23px;
}
    .learn_btn
    {
margin-left:32px;
display:block;
background:url(Wireframes_Carousels/sprite/sprite.png) 0px 0px no-repeat;
width:133px;
height:42px;
margin-bottom:-13px;

    }
    .learn_btn:hover
    {
background:url(Wireframes_Carousels/sprite/sprite.png) 0 -50px no-repeat;


}

    .slide_pos
    {
padding-left:300px;
margin-bottom:15px;



}
    .slide_pos ul li img
    {
    }
    </style>

And HTML is:

     <body>

     <div class="carousel">

 <div class="slides"> 


    <ul>

        <li>                
                <span class="buttons">
                <a href="#" class="prev">prev</a>
                </span>
                <span class="buttons" style="float:right">
                <a href="#" class="next">next</a>
                </span>
            <span class="txt">



                    <h1>New to Intuit App Center?</h1>
                    <p>Discover the right apps <br/> for QuickBooks</p>
                    <a class="learn_btn" href="#"></a>




            </span>

            <img src="Wireframes_Carousels/sprite/hero-banner1.jpg"  alt="Slide 1"/>


        </li>

        <li>


            <span class="txt">
                    <h1>New to Intuit App Center?</h1>
                    <p>Discover the right apps <br/> for QuickBooks</p>
                    <a class="learn_btn" href="#"></a>                                                




            </span>


            <img src="Wireframes_Carousels/sprite/hero-banner2.jpg" alt="Slide 2"/>

        </li>

        <li>


            <span class="txt">
                    <h1>New to Intuit App Center?</h1>
                    <p>Discover the right apps <br/> for QuickBooks</p>
                    <a class="learn_btn" href="#"></a>                                                




            </span>


            <img src="Wireframes_Carousels/sprite/hero-banner3.jpg" alt="Slide 3"/>

        </li>

        <li>


            <span class="txt">
                    <h1>New to Intuit App Center?</h1>
                    <p>Discover the right apps <br/> for QuickBooks</p>
                    <a class="learn_btn" href="#"></a>                                                




            </span>


            <img src="Wireframes_Carousels/sprite/hero-banner4.jpg" alt="Slide 4"/>

        </li>


    </ul>

</div>

    </div>

    </body>

i want my navigation buttons prev and next on left and right side of the sliding images respectively but i am unable to do that...i have tried changing the position to absolute etc but i dont know what to do as it seems to be does not working...these buttons should not slide with the images...plssssssss help me out...thanks

Answer 1

If I undersand correctly you only want the next and prev buttons on top of everything else and to be fixed so they don't slide with each slide? In which case it isn't so much a jquery or javascript problem but only your CSS. I would try this.

Take them out of the spans and add the class buttons to each <a> as well as left and right .

.buttons{position:absolute; z-index:999;}
.left{left:20px; bottom:20px;}
.right{right:20px; bottom 20px;}

Obviously change the above if you want it you need them in different locations.

You also need to take them out of the <li> tag and put them directly in the slider holder container which should have a position of relative .

Answer 2

You need to first make sure that the container surrounding the buttons is styled with position: relative; and that the buttons are both styled with position: absolute; . This allows for the buttons inside the container to be positioned anywhere inside the relative container using styles known as top , bottom , left , right followed by a percentage or pixel.

jsfiddle: http://jsfiddle.net/hZ9f4/

-- or --

example:

.buttons {
    position: absolute;
    z-index: 99999; /* to insure the buttons stay above the images at all times */
}
#prev {
    top:0;
    left:0;
}
#next {
    top:0;
    right:0;
}