0
So im Versuch, ein Karussell Vollbild für eine Präsentation zu machen. Ich bin kein Programmierer in einer Phase des Lernens. Ich habe diesen Code und ich habe wie Sie sehen können und Fehler und das Karussell ist alles kaputt und ich weiß nicht warum. Ich könnte eine Anleitung oder Hilfe schätzen.JavaScript Karussell funktioniert nicht
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.height($wHeight);
$item.addClass('full-screen');
var $numberofSlides = $('.item').length;
var $currentSlide = Math.floor((Math.random() * $numberofSlides));
$('.carousel-indicators li').each(function(){
var $slideValue = $(this).attr('data-slide-to');
if($currentSlide == $slideValue) {
$(this).addClass('active');
$item.eq($slideValue).addClass('active');
} else {
$(this).removeClass('active');
$item.eq($slideValue).removeClass('active');
}
});
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function(){
$wHeight = $(window).height();
$item.height($wHeight);
});
$('.carousel').carousel({
interval: 6000,
pause: "false"
});h3 {
display: inline-block;
padding: 10px;
background: #B9121B;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.full-screen {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}<!DOCTYPE html>
<html>
<head>
<script src="sliderjava.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="sliderstyle.css"> \t
</head>
<body>
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<!-- Indicadores -->
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
<li data-target="#mycarousel" data-slide-to="4"></li>
</ol>
<!-- Slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image">
<div class="carousel-caption">
<h3>First Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image">
<div class="carousel-caption">
<h3>Second Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image">
<div class="carousel-caption">
<h3>Third Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image">
<div class="carousel-caption">
<h3>Fourth Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image">
<div class="carousel-caption">
<h3>Fifth Image</h3>
</div>
</div>
</div>
<!-- Controlos -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
_I wissen auch nicht, was Sie doing_ – Tushar
sind Versuchen Sie, mit einem ausdrucks Titel kommen, bitte. – Bugfinger
Ihr Titel ist so eingängig, dass jeder diese Frage markieren wird. Bitte versuchen Sie es zu bearbeiten und restrukturieren Sie es nur mit relevanten Details. – Rohit416