Home/ Questions/Q 8505873
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T02:26:29+00:00

I have managed to make the next/previous buttons work but have failed to get

  • 0

I have managed to make the next/previous buttons work but have failed to get them to actually show, I have tried adding z-index but think I might be doing something wrong.
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Beauchamp&#39;s Corporate offers a unique service for clients wishing to design a special product for their business.">
<title>Beauchamp&#39;s Corporate</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#maximage').cycle({
        fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        speed: 1000,
        timeout: 7000,
        prev: '#arrow_left',
        next: '#arrow_right'
    });
});
</script>
<body>

        <div id="cycle-loader">
         </div>   

        <div id="maximage">
            <img src="images/boat1.jpg" alt="" />
            <img src="images/car1.jpg" alt="" />
            <img src="images/dock1.jpg" alt="" />
            <img src="images/glass1.jpg" alt="" />
            <img src="images/hotel1.jpg" alt="" />   
            <img src="images/table1.jpg" alt="" />         
        </div>

        <a href="" id="arrow_left" class="button" title="Previous Photo"></a>

        <a href="" id="arrow_right" class="button" title="Next Photo"></a>  

</body>
</html>

Css:

a.button {
    display:block;
    width:200px;
    height:200px;
    margin-top:200px;
    }

a#arrow_left{
    float:left;
    background: url('images/arrowleft.jpg') repeat;
    position: relative;
    z-index: 100;
}

a#arrow_right{
    float:right;
    background: url('images/arrowright.jpg') repeat;
    position: relative;
    z-index: 100;
}

#maximage { 
height: 100%; 
width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000; 
 }
#maximage img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000; 
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your images path is wrong background: url('images/arrowright.jpg') repeat; As your css file is inside a css folder, but your images are inside images folder.

    So you need to add ../ in background: url('images/arrowright.jpg') repeat;

    and in background: url('images/arrowleft.jpg') repeat;

    before images/arrowright.jpg

    So after adding ../ your css should look like as given below;

    a#arrow_left{
    float:left;
    background: url('../images/arrowleft.jpg') repeat;
    position: relative;
    z-index: 100;
}

a#arrow_right{
    float:right;
    background: url('../images/arrowright.jpg') repeat;
    position: relative;
    z-index: 100;
}
    • 0