Databases
StackOverflow2013
Postsdbo
PONumerous 100% Height/Width divs - carousel navigation?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONumerous 100% Height/Width divs - carousel navigation?
    text
    copied!<p>I have a webpage that uses 100% widths and heights to achieve a fullscreen image style. However, I would like these divs to be side-by-side, and when I click a button it shifts to the next or previous slide. How do you think I could achieve this?</p> <p>Here's the carousel code:</p> <pre><code>&lt;div class="page-carousel"&gt; &lt;div class="page page-01" style="background: url(images/01.jpg);"&gt; &lt;div class="page-text"&gt; &lt;h1&gt;Headline&lt;/h1&gt; &lt;h2&gt;Subheader&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="page page-02" style="background: url(images/02.jpg);"&gt; &lt;div class="post-text"&gt; &lt;h1&gt;Headline&lt;/h1&gt; &lt;h2&gt;Subheader&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And the CSS:</p> <pre><code>.page-carousel{ height: 100%; width: 100%; } .page{ height: 100%; width: 100%; background: no-repeat bottom center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; float: left; z-index:0; } </code></pre> <p>Thanks in advance!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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