Bootstrap Carousel Isn't Sliding - Portfolio Project

1

Hi everyone!
I decided to add a carousel for my Portfolio project, and cannot get it to display the other projects besides the first one (no other ‘real’ projects so I added placeholders for now). Any idea why this isn’t working? I have enabled Bootstrap for CSS and Javascript in Codepen. THANK YOU!!

My project and the raw HTML are below:

  <div id="portfolioslides" class="carousel slide center-block" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#portfolioslides" data-slide-to="0" class="active"></li>
      <li data-target="#portfolioslides" data-slide-to="1"></li>
      <li data-target="#portfolioslides" data-slide-to="2"></li>
      <li data-target="#portfolioslides" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
      <div class="item active">
        <img src="http://res.cloudinary.com/jloconte/image/upload/c_scale,w_700/a_0/v1494286290/Screen_Shot_2017-05-08_at_6.29.57_PM_tdazeg.png" alt="Leslie Knope Tribute">
        <div class="carousel-caption">
          <h3>Leslie Knope Tribute Page</h3>
          <p>Parody tribute/campaign page for Leslie Knope from <em>Parks and Recreation</em>.</p>
          <p><i class="fa fa-html5"></i> HTML 5, <i class="fa fa-css3"></i> CSS3, & Bootstrap</p>
        </div>
      </div>
      <div class="item">
        <img src="https://system.netsuite.com/core/media/media.nl?id=3738002&c=589178&h=cd9e47a89ed774871723" alt="placeholder">
        <div class="carousel-caption">
          <h3>Wikipedia Viewer (placeholder)</h3>
          <p>framework a, framework b, framework c</p>
        </div>
      </div>
      <div class="item">
        <img src="https://system.netsuite.com/core/media/media.nl?id=3738002&c=589178&h=cd9e47a89ed774871723" alt="placeholder">
        <div class="carousel-caption">
          <h3>Wikipedia Viewer (placeholder)</h3>
          <p>framework a, framework b, framework c</p>
        </div>
      </div>
      <div class="item">
        <img src="https://system.netsuite.com/core/media/media.nl?id=3738002&c=589178&h=cd9e47a89ed774871723" alt="placeholder">
        <div class="carousel-caption">
          <h3>Wikipedia Viewer (placeholder)</h3>
          <p>framework a, framework b, framework c</p>
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#portfolio-slides" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#portfolio-slides" data-slides="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
2 Likes
2

Check your console (always a good idea). You are getting errors there. You need to include jQuery and Tether.js before Bootstrap. That’s a start anyway.

2 Likes
3

Hii…
you must need to call carousel function using jquery.
then only it will work.

thanks
AshishkrGoyal

4

Hi

I have taken a look at your page. I too, have used a bootstrap carousel in my page, so I know it can be tricky to make it work.

I found a couple of problems.

  1. copy these script links into the html head

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

2.) you have some typos! You named your slide data-target= "portfolioslides", then at the navigation you call them by using <a class="left carousel-control" href="#portfolio-slides" data-slide="prev"> This isn’t going to work. Also on the left control you have data-slides and data-slide on the right control.

After you correct these two things, it works perfectly. Good luck ! :slight_smile:

Otherwise a very nice portfolio page.

2 Likes
5

Thank you!! Works like a charm now. I really appreciate your help!

I tried adding Bootstrap within CodePen instead of in the header, not sure why it didn’t work. I’ll always add it into the header from now on.

That darn extra S was ruining my slide! :smile:

Can’t thank all of you enough!

1 Like
6

Just updating the solution to use Bootstrap 4, these are the URLs that could be used:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
4 Likes
7

For anyone who is still interested in this problem:
You don’t need to add external references at all.
Just go to the Pen Settings and use the quick add to add:
In CSS tab: Bootstrap 4
In JavaScript tab: jQuery and Bootstrap 4

Then, the Carousel will work without a problem!

8

haha it was the problem of my code. Everything were ok, I did not know I was using the wrong links! jaesus. Thank you…

9

Hi,
check the order of script tags.
I was using two script tags inside of body element, the first one I was using to call bootstrap.js
and the second one for calling jquery.js
but my carousel did not.
what I came up with, I changed the order of my call to scripts tags to as follow
first
second

10

Thank you so much stay blessed stay safe !