Deminer84 Deminer84 - 24 days ago 13
HTML Question

Adding vegas slider to div background

I've got one question with Vegas slider (http://vegas.jaysalvat.com/).

I want to add slider as this black background.

HTML code:

<div class="ui inverted vertical masthead center aligned segment" id="slider1">
<div class="ui container">
<div class="ui large secondary inverted pointing menu" style="border-style: none;">
<a class="toc item">
<i class="sidebar icon"></i>
</a>
<a class="active item">Home</a>
<a class="item" href="patron.php">Parton</a>
<a class="item" href="insygnia.php">Insygnia</a>
<a class="item" href="historia.php">Historia szkoły</a>
<a class="item" href="dokumenty.php">Dokumenty</a>
<a class="item" href="matura.php">Matura</a>
<a class="item" href="strony.php">Strony WWW</a>
<a class="item" href="galeria.php">Galeria</a>
<a class="item" href="kontakt.php">Kontakt</a>
</div>
</div>
<div class="ui text container">
<h1 class="ui inverted header">
Życie jest długie, jeżeli się umie z niego korzystać.
</h1>
<h2>
Senega
</h2>
</div>
</div>


Basic Vegas script to paste:

$("#example, body").vegas({
slides: [
{ src: "/img/slide1.jpg" },
{ src: "/img/slide2.jpg" },
{ src: "/img/slide3.jpg" },
{ src: "/img/slide4.jpg" }
]});


May anybody help me in implementing this script to html? I'm not a typical programmer, I don't know the JS language.

Thank you.

Answer

Just change the #example to #slider1 to match the container ID and replace the src values to point to images on your site. Here's an example I tested on your site in my browser console:

$("#slider1, body").vegas({
  slides: [
    { src: "http://i.imgur.com/Kf2zBCB.jpg" },
    { src: "http://i.imgur.com/OtjnTqO.jpg" },
    { src: "http://i.imgur.com/Sd44gRr.jpgg" },
    { src: "http://i.imgur.com/MXVqtDe.jpg" }
]});

Replace these with your own images, of course.