Problem with background slideshow JQUERY

Navigation
1

Hello good day I have a problem with the installation of this plugin.

Here is the tutorial I'm using: vegas

And that's how I got it: 

$(document).ready(function() {
  var imagecollection = [{
      src: 'https://i.stack.imgur.com/oURrw.png'
    },
    {
      src: 'http://i.imgur.com/SZPjHwz.jpg'
    },
    {
      src: 'https://i.stack.imgur.com/oURrw.png'
    },
    {
      src: 'https://pbs.twimg.com/media/Cg0x8vnXEAEB2Le.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
  });
});
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.js"></script>
  <script type="text/javascript" src="js/scripts.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<body>
  <div style="height:100vh">
    <div id="ShowSlideShowHere" style="height:100vh">sadasdasdas</div>
  </div>

All the routes are correct since I tried 1 for 1 the libraries and the images and there is no case, the browser is blank: /

any help is appreciated.

    
asked by Juampi 15.03.2018 в 15:34
source

2 answers

1

Yap I think I already solved it.

In the html the bookstores are badly positioned
It turns out that for everything to work, you need that the libraries are ordered in a certain way the HTML has the grace to load from top to bottom.
First you have to go to the library of jquery , because it loads all the functions and dependencies that uses vegas, therefore you load vegas.min.js to make it work.
After you use the script or in this case my script in the html and load the functions and properties of vegas in the file vegas.min.js the css of vegas.min.css can go before because it only loads styles nothing more. I hope this explanation serves. Greetings. 

 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.js"></script>
<script>
$(document).ready(function() {
var imagecollection = [
    {src: 'https://i.imgflip.com/fmohn.jpg'},
    {src: 'https://i.imgflip.com/fmohn.jpg'},
    {src: 'https://i.imgflip.com/fmohn.jpg'},
    {src: 'https://i.imgflip.com/fmohn.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
  });
 });
</script>
</head>
<body>
	<div style="height:100vh">
		<div id="ShowSlideShowHere" style="height:100vh">sadasdasdas</div>
	</div>

</body>
</html>

working.

    
answered by 15.03.2018 в 16:36
0

Crazy truth eternally grateful, 1 week and I was still with this problem, I would never be able to solve it if it was not for you. many thanks and anything that can help you can count on me.

    
answered by 21.03.2018 в 21:21
Service does not work on android 7+ How do I translate something with quotation marks?