1
jsfiddleでコードが動作しないようです。私が左のコントロールまたは右のコントロールをクリックすると、何も起こりません。外部のスクリプト（ブートストラップとjQuery）とスタイルシート（ブートストラップ）を外部リソースに追加しました。 htmlエディタでもスクリプトを参照する必要がありますか？ fiddlejsfiddleでコードが機能しない
HTML
<div class="carousel fade" id="carousel">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel"></li>
<li data-slide-to="1" data-target="#carousel"></li>
<li data-slide-to="2" data-target="#carousel"></li>
</ol>
<div class="carousel-inner">
<div class="active item">
<div class="container">
<h3>Header 1</h3>
<h1 class="col-md-9">Some text </h1>
</div><img class="main-image" src="data:image/jpeg;base64,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">
</div>
<div class="item">
<div class="container">
<h3>Header 2</h3>
<h1 class="col-md-9">Some text </h1> <a class="q-arrow-link text-white various fancybox.iframe" href="https://www.youtube.com/embed/JeZQ7f58TsM?autoplay=1"> watch video 1 </a>
</div><img class="main-image" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ8NDQ0NFREWFhURExMYHSggGBolGxMVITEhJSkrLjo6Fx8zODMtNyg5LisBCgoKDQ0NDw8NDzcZFRkrKysrLS0rLS03KzcrKy0rKzctNy0tKysrNy0rLSsrNystKystLS0tKysrKysrKysrK//AABEIAKgBLAMBIgACEQEDEQH/xAAbAAEBAQEBAQEBAAAAAAAAAAADAgABBAUHBv/EABkQAQEBAQEBAAAAAAAAAAAAAAACARIRA//EABkBAQEBAQEBAAAAAAAAAAAAAAMCAQQABf/EABgRAQEBAQEAAAAAAAAAAAAAAAABAhES/9oADAMBAAIRAxEAPwD8edxsVmPsyOSu4qXMwk4uItdzFZjuSvJXBWtkrzGzCTKpB2uTJZhUySZXBa0mZJMqmSTCg3SMheQvJXkqHdDyVZBZheQ3iLsOQvINkKyG8RdiyFZBclXLeIuw8NyfluHuJ9ByHeD5CuHuMu3nyG4enhOw9xnt59hOy9OyjZZxU082yOpeqpFUpsJNPNsjqXpqR1KbC5081SPceipHsjsNNA3Ebh6xG4iwkoNxOybcRuIsJK+RmEnHJkkyyOy13MXONGEnFQVrZi8xswkyuDtcmTRLTJIlcDrTsyTJdmVzK4G6acJMuzJJlotaTMkmFzJZhUgdbRMLyCZCshfBXY8heQTIXkt4i6FkO8l5bl7ifQuVZBclcw3ibsWQrg+Q2y9xHt5+HOXo4Tsvcb6efYHUvVUiqWcXnTy1g6l6akdSmmzp5awVY9VyGsRYbNeesRuH3EbiKWV56wdY9FYOsRYWUG4jcNuI3EWFlfJnCTjk4WcHHZqtmLzGzCTi4K1pk045OEnFwOq7kknGnCTJIG1pksy04aJVA605MmmGiSzKpAa00yWZaZLOLkDrSZleSrMXkqgrpHLvi8x3ManqPHcleSSYeTdImC5C5gmSrgrsPLcm2XOXuM9B5c2T8p2WNmnmqRXj11IalJM6eXZFWPVWCvE02dPJeBrHpvA1iK6c0G4jcPuD3E2FlBWDrD1g6xNLmgrEbhaxG4Owsr5Mlwc4WQx26VOFnEThpwkDquzhZxElnFwWqucLOInDRJIDVVEniUxJpxcc+tOzJZxycLOKgNV2ZJkuThZxQbWzFZjZi8aO1OS7kqzFzjU2uTJYlok0yoWtJmVcryXfHhXQ+W4Jkty896FsorD7iKx5Urz1gqx6KwVYkua89YC8em8BeMp815rwO4exbiK6c0W4OsNWDrE2FlDWCrD0KkU2aGsHuGoeosLK+ROEnESWQR3aXOFnESWcJA6qpws4iSxi4HVJGHiRxh4wkc+quMNOInCxi459Vc4WcTOEnFwGqqcJmJzF40VruYrHMXONRa7mEmXJk0y2C1pUSTJacXmNBa543i/HfGp6jxvF+OPM6isFRtFTF5DWDrDbgrxhs157x5/o9FvPaa6cPPQ9NWD3EujItHWFrEUmllBWDo1YKkU2Q6PcLSNTSx8aSzg5LLmjv0WMLODk0rgNLnDRg4w8YWA1SRhpwcYecXHNqrjCziJws4uA1SSTESvFhq8VKMXLR1clnERh5xotVUSaZTGFnFA1XcxTY748KtivHMU8muJ1eop56IoerpGvFg6DZaDesLkH00Fm+gLZXVgVI0mo1J4Kh0WsHWJpIGg0ew0inyLUaukamlj40lgUlhyR9DRpNIpLJI59H+ZpDBoJHPs0HgMmhcc+iyWRTpJ1cBosqweLzVQVJhZwUmhUHosYaMHGHnFOfVXJMRi81oKrHXM13GoVjvrjMYyK12tHutVI5qK1WjrXiSIvQXpL0N6w+YK9DRK0VJdGUanV6jWFiKFRKFSaTI6DRqFSKbIaxGkoepNHxZLAYNDjj6OjyWRQWSRz6NB5BBpJHPo8GkE6WdXAahs1c6LNXmrgbDZpJDOmlUFosHgEY9HzXAbNBpDJJ1Tn0bFYPNVmtFYvNVmjzVetTYv1zdT6mqeekd2k7qd1zdeXI7uirXa0daxeYi9BekvQVrK6MRFanXd1KaaOaPVbqN1lXIjdHS6HSaXI6HS9HSKbI9Hq6RrCx8ONLII00uKPp6j0Rpp155006SOfUPGmnXnnTTRJQaj0TpJ0E6vNVKCx6J0k6886WNXKLUPJ4eeD/PVwGnog0Aks6SObR80maGdXmqDYXNVmiylzrUWFzXfR+ttPJ4vaTtD2nPWtmV+ubqfU7TFSNWjqm2hVTxM5Tei3Xaoe6k+Y2p3W3U7qSSNo6Vuo3WLkTQ9VWjrUlkTWirV1oq1FLmJoeqpG6w0fBjTS886adcMr6eoedNOvNOljSSh1HpnSzrzzS5pcoNR6Zok08uaWaXKLWXqnSxrzRp40kBqPTGnh5o08aSObUemdJOvPOkzVwFj0ZSs0GUvKUKw+avNDmqymjsL65tI6c2ms8q9d6H63ryuL2kbSdpFU82ZdqhVTlUOqYbOW3Ubrm0n1JZHd1zdc9TusVI1ajdbdRupXI1aOtdrR1qaWRNaOtVuo1NLImtHur0Vai0uY/n50s06z5+a+rqEmizTjElDqFmiTTMuUVi8os0zElDqGinoimYsrn3DxRppmLHNqGmlzTMuUNi5ok0zKHYvKVlszR2O9uduM17jvTm0zPPcRVjq2Zi5B1Q6pmT0sid1z1mT1bm6ndZmdbIjdRuszLSQe6itZk2kiN1G6zItJB1oqpmHqmzH/2Q==">
</div>
<div class="item">
<div class="container">
<h3>Header 3</h3>
<h1 class="col-md-9">Some text </h1> <a class="q-arrow-link text-white various fancybox.iframe" href="https://www.youtube.com/embed/-NSvbGxzpKk?autoplay=1"> watch video 2 </a>
</div><img class="main-image" src="data:image/jpeg;base64,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">
</div>
</div>
</div><a class="carousel-control left" data-slide="prev" href="#carousel"></a> <a class="carousel-control right" data-slide="next" href="#carousel"></a>
CSS
.carousel.fade {
opacity: 5;
}
.carousel.fade .item {
transition: opacity ease-in 1s;
left: 0;
opacity: 0; /* hide all slides */
top: 0;
position: absolute;
width: 100%;
display: block;
}
.carousel.fade .item h3.text-white.title {
transition: opacity ease-in 3s
}
.carousel.fade .item:first-child {
top: auto;
opacity: 0; /* show first slide */
position: relative;
}
.carousel.fade .item.active {
opacity: 1;
}
jsFiddleが動作していない場所をポイントできますか？これはあなたの設定を見るのに役立ちます。 – Dale
ブートストラップの前にJqueryを呼び出す必要があります –
jqueryの前にブートストラップをロードしています。 –