Demonstration

Images on a wall

This is just the image we have on the landing page.

A marvellous beach

With a great yellow sky.

Computers

You need them. Otherwise you can't see this page.

Deep, lush forests

Make sure you don't get lost.

Lastly

A marvellous landscape.

‹ ›

Source Code

Enter the following in the <head> tag.


                    <link rel="stylesheet" href="https://thegreatrazz.github.io/slidey/css/slidey.css">

                    <script src="https://thegreatrazz.github.io/slidey/slidey.js"></script>

Enter the following code to have your slideshow


                    <div class="slidey-container" style="height: 300px">


                        <div class="slidey-slide slidey-active" style="background-image: url('img/background.jpeg')">

                             <div class="slidey-info">

                                  <div class="slidey-title">Images on a wall</div>

                                  <div class="slidey-subtitle">This is just the image we have on the <a href=".">landing page</a>.</div>

                             </div>

                        </div>


                        <div class="slidey-slide slidey-next" style="background-image: url('img/beach.jpeg')">

                             <div class="slidey-info">

                                  <div class="slidey-title">A marvellous beach</div>

                                  <div class="slidey-subtitle">With a great yellow sky.</div>

                             </div>

                        </div>


                        <div class="slidey-slide slidey-prev" style="background-image: url('img/computers.jpeg')">

                             <div class="slidey-info">

                                  <div class="slidey-title">Computers</div>

                                  <div class="slidey-subtitle">You need them. Otherwise you can't see this page.</div>

                             </div>

                        </div>


                        <div class="slidey-slide" style="background-image: url('img/forest.jpg')">

                             <div class="slidey-info">

                                  <div class="slidey-title">Deep, lush forests</div>

                                  <div class="slidey-subtitle">Make sure you don't get lost.</div>

                             </div>

                        </div>


                        <div class="slidey-slide" style="background-image: url('img/lake.jpeg')">

                             <div class="slidey-info">

                                  <div class="slidey-title">Lastly</div>

                                  <div class="slidey-subtitle">A marvellous landscape.</div>

                             </div>

                        </div>



                        <div class="slidey-adjacent">

                             <a href="#" class="slidey-prev">‹</a>

                             <a href="#" class="slidey-next">›</a>

                        </div>



                        <div class="slidey-select">

                        </div>


                    </div>