Note that there are some explanatory texts on larger screens.

plurals
  1. PONext/previous buttons working but not showing up
    primarykey
    data
    text
    <p>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:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="description" content="Beauchamp&amp;#39;s Corporate offers a unique service for clients wishing to design a special product for their business."&gt; &lt;title&gt;Beauchamp&amp;#39;s Corporate&lt;/title&gt; &lt;link rel="stylesheet" href="css/style.css" type="text/css" /&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(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' }); }); &lt;/script&gt; &lt;body&gt; &lt;div id="cycle-loader"&gt; &lt;/div&gt; &lt;div id="maximage"&gt; &lt;img src="images/boat1.jpg" alt="" /&gt; &lt;img src="images/car1.jpg" alt="" /&gt; &lt;img src="images/dock1.jpg" alt="" /&gt; &lt;img src="images/glass1.jpg" alt="" /&gt; &lt;img src="images/hotel1.jpg" alt="" /&gt; &lt;img src="images/table1.jpg" alt="" /&gt; &lt;/div&gt; &lt;a href="" id="arrow_left" class="button" title="Previous Photo"&gt;&lt;/a&gt; &lt;a href="" id="arrow_right" class="button" title="Next Photo"&gt;&lt;/a&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Css:</p> <pre><code>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; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload