Code not working in jsfiddle

Question

My code does not seem to work in jsfiddle. When I click the control left or control right nothing happens.I have added the external scripts (bootstrap and jQuery) and stylesheet (bootstrap) to the external resources. Do I need to reference the scripts also in the html editor ? fiddle

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,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">
        </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;

}

Can you point to the jsFiddle where it isn't working. This would help us see your configuration. — Dale
– Dale, Commented May 16, 2016 at 13:40
The load order matters: jsfiddle.net/bsj0nsng/2 . If you use devTool to inspect, you'll see an error bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery , so you just need to change the load order, put boostrap.min.js after jquery.min.js — fuyushimoya
– fuyushimoya, Commented May 16, 2016 at 13:42

Gleb Kostyunin · Accepted Answer · 2016-05-16 13:47:11Z

1

In your jsfiddle the bootstrap.min.js is included before jquery, which it is dependant on. If you change the order so that jquery goes first, everything works just fine: http://jsfiddle.net/d55t7hfa/

answered May 16, 2016 at 13:47

Gleb Kostyunin

3,9032 gold badges22 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Velimir Tchatchevsky · Accepted Answer · 2016-05-16 13:44:56Z

1

Bootstrap's javascript requires jQuery to be loaded. You have it before the jQuery script, so it fires an error (that you can see in the console) - "Error: Bootstrap's JavaScript requires jQuery". Switch the places of those scripts (1. jQuery, 2. Bootstrap.js) and you'll be fine

answered May 16, 2016 at 13:44

Velimir Tchatchevsky

2,8401 gold badge18 silver badges21 bronze badges

Collectives™ on Stack Overflow

Code not working in jsfiddle

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related