问题描述:

I try to setup the full background slider: http://vegas.jaysalvat.com/

I've read the documentation and tried to set up. Unfortunately without success. Is there anyone who can show me basically how this works. I've set up a short js fiddle:

$("body").vegas({slides: [{ src: "http://lorempixel.com/1600/800/sports/1/" },{ src: "http://lorempixel.com/1600/800/sports/2/" },{ src: "http://lorempixel.com/1600/800/sports/3/" }]

});

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

<title>KlickDummy Halunke</title>

<link href="https://github.com/jaysalvat/vegas/blob/master/dist/vegas.css" rel="stylesheet"/>

</head>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://github.com/jaysalvat/vegas/blob/master/dist/vegas.js"></script>

</body>

</html>

网友答案:

Hope this helps...

Start with your HTML file in the 'root', your personal javascript file in the 'js' folder, your images in the 'images' folder, and the files from Vegas Slideshow in the 'js/vegas' folder.

  • index.html
  • js/scripts.js
  • js/vegas/vegas.min.js
  • js/vegas/vegas.min.css
  • images/img01.jpg
  • images/img02.jpg
  • images/img03.jpg
  • images/img04.jpg

I preferred not to attach the slideshow to the 'body' tag as it gives you less freedom to move it around. Thus, assign an ID to a DIV, make sure the DIV is the right size and then use javascript to initiate a collection of images and parameters for your slideshow.

See example below.

/* Javascript js/scripts.js */

/* Placing your script in the '(document).ready' function will automatically start your slideshow on page load*/ 
$(document).ready(function() 
  {
    var imagecollection = [
        {src: 'images/img01.jpg'},
        {src: 'images/img02.jpg'},
        {src: 'images/img03.jpg'},
        {src: 'images/img04.jpg'}
        /* Slideshow not working? Check your image links. */
    ];

    $("#ShowSlideShowHere").vegas({
        slides: imagecollection,
        transition: 'fade',
        preloadImage: true,
        timer: true,
        shuffle: true,
        delay: 5000,
        animation: 'kenburns',
        cover: true
    });
  });
<!-- HTML SECTION -->

<!DOCTYPE html>
<html>
<head>
  <!-- Note: both Vegas css and Vegas js files are in the 'js/vegas' folder -->
  <!-- Vegas CSS reference -->
  <link rel="stylesheet" href="js/vegas/vegas.min.css">
  <!-- Vegas javascript reference-->
  <script src="js/vegas/vegas.min.js"></script>
  <!-- Your javascript reference -->
  <script type="text/javascript" src="js/scripts.js"></script>
  <!-- jQuery reference-->
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<body>
  <!-- Note: Do not use percentages in the height because otherwise it won't work in Firefox -->
  <div style="height:100vh">
    <div id="ShowSlideShowHere" style="height:100vh"></div>
  </div>
相关阅读:
Top