Creazione slide-show

Esempio di un sezione home con slide show

<section id="home" class="section-slide">
    <ul id="slideshow" class="list-unstyled">
        <li>
            <div class="full-screen" style="background-image: url(http://unsplash.it/1600/900/?image=255)">
                <header class="home-header">
                    <div class="container">
                        <h1>Grande Mostra</h1>
                        <h2>dal 20 aprile al 30 giungno</h2>
                        <p>Palazzo pepoli</p>
                    </div>
                </header>
            </div>
        </li>
        <li>
            <div class="full-screen" style="background-image: url(http://unsplash.it/1600/900/?image=256)">
                <header class="home-header">
                    <div class="container">
                        <h1>Visioni...</h1>
                        <h2>...parole...</h2>
                        <p>sogni</p>
                    </div>
                </header>
            </div>
        </li>
        <li>
            <div class="full-screen" style="background-image: url(http://unsplash.it/1600/900/?image=257)">
                <header class="home-header">
                    <div class="container">
                        <h1>Un pittore visionario...</h1>
                        <h2>...riscoperto solo ora</h2>
                        <p>Bologna sogna</p>
                    </div>
                </header>
            </div>
        </li>
    </ul>
</section>

codice javascvipt da inserire in un  tag script in fondo alla pagina o in un file separato

$(document).ready(function(){
  $('#slideshow').mbSlider(
    {
      auto: true,
      pager: false,
      controls: false,
      mode: "fade"
    }
  );
})

Lo stesso esempio dal vivo modificabile su Code Pen cliccando Edit on Code Pen

See the Pen Esempio1 by Bruno Migliaretti (@magicbruno) on CodePen.