Jquery Slide Image Transition Error

Asked

Viewed 44 times

0

I’m setting up a website and the image slide is not working.. the image is static. What might be?

<!doctype html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="stylesheet" href="css/tema.css">
	
	<!-- JQuery -->
	<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
	
	<!-- Slide -->
	<script type="text/javascript">
		function slideSwitch() {
			var $active = $('#slideshow IMG.active');

			if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

			// use this to pull the images in the order they appear in the markup
			var $next =  $active.next().length ? $active.next()
				: $('#slideshow IMG:first');

			// uncomment the 3 lines below to pull the images in random order
			
			// var $sibs  = $active.siblings();
			// var rndNum = Math.floor(Math.random() * $sibs.length );
			// var $next  = $( $sibs[ rndNum ] );


			$active.addClass('last-active');

			$next.css({opacity: 0.0})
				.addClass('active')
				.animate({opacity: 1.0}, 1000, function() {
					$active.removeClass('active last-active');
				});
		}

		$(function() {
			setInterval( "slideSwitch()", 5000 );
		});
	</script>
	
    <title>Hello, world!</title>
  </head>
  <body>
	
	<!-- Menu -->
	
	<!-- Carrosel -->
	<div id="slideshow">
		<img src="img/1.jpg" alt="Slideshow Image 1" class="active" />
		<img src="img/image2.jpg" alt="Slideshow Image 2" />
		<img src="img/image3.jpg" alt="Slideshow Image 3" />
		<img src="img/image4.jpg" alt="Slideshow Image 4" />
	</div>
	
	<!-- Corpo do Site -->
	<div class='container-fluid'>
	

	</div>

	<!-- Rodapé -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

javascript html jquery

  • Remove the jquery-3.2.1.slim and use the "full" version. The slim does not come with the function animate

  • @Lucasfonseca, He managed to solve?

1 answer

1


You are already using the bootstrap, it has a component ready for it, just you implement the structure and assign the classes correctly

#slideshow {
  width: 100%;
  overflow-x: hidden;
}
<html lang="pt-br">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="css/tema.css">
  <title>Hello, world!</title>
</head>

<body>
  <!-- Menu -->

  <!-- Carrosel -->
  <div id="slideshow" class="carousel slide w-100" data-ride="carousel">
    <div class="carousel-item active">
      <img class="d-block w-100" src="http://i.imgur.com/SZPjHwz.jpg" alt="Slideshow Image 1" class="active" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://pbs.twimg.com/media/C8lePKsXcAAt5Fc.jpg" alt="Slideshow Image 2" />
    </div>
    <div class="carousel-item ">
      <img class="d-block w-50" src="https://pbs.twimg.com/media/DLeU9xCVwAAbjM8.jpg" alt="Slideshow Image 3" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://media1.tenor.com/images/88d89612db5eaacc6c9c6ac6bf6cd6e7/tenor.gif?itemid=7715402" alt="Slideshow Image 4" />
    </div>
  </div>

  <!-- Corpo do Site -->
  <div class='container-fluid'></div>

  <!-- Rodapé -->

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>

Reference

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.