Carousel controls doesn't work


#1

Hi,
The buttons (next and previous button) doesn’t work when I click on each one.
Any solution or idea ? Many thanks in advance.

Have a look at the picture


#2

If that’s the default block you’ve added it looks like it only has one image.Away from desk at moment so cannot see code in page to be sure.


#3

There are 3 images.
Create a blank document and try it, so you will see that the carousel doesn’t work.
Tested 100%

Maybe Pingendo Team can help us solve this problem.


#4

Just dragged a carousel in a blank doc.
It works for me and this is what i get

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="theme.css" type="text/css"> </head>

<body>
  <div class="py-5">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div id="carousel" class="carousel slide" data-ride="carousel" >
            <div class="carousel-inner">
              <div class="carousel-item">
                <img class="d-block img-fluid w-100" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg">
                <div class="carousel-caption">
                  <h3>First slide label</h3>
                  <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
              </div>
              <div class="carousel-item active">
                <img class="d-block img-fluid w-100" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg">
                <div class="carousel-caption">
                  <h3>Second slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
              </div>
            </div>
            <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
              <span class="carousel-control-next-icon"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <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>

#5

gseregni,
Your code works well, but the carousel shown in the above picture,
doesn’t work when I click the next or previous button.

I have tried several times and I can’t get it works :confused:
Any recommentation ? Thanks


#6

It looks like there’s a bad bug here. :frowning:
Basically, if you have more than one carousel on a page they each need to have a distinct id. The id has to be set for the carousel and it has to match in the prev/next controls. #1 pingendo doesn’t do this automatically #2 if you set the ids either in the GUI or in code, it will overwrite them #3 in the process of overwriting them it seems to ruin the carousel (ie: I just spent a bunch of time putting 7 slides in the carousel and now they’re all gone). No matter what I do in code, it doesn’t last - it seems to work, then it gets overwritten. I’m not sure what to do - I kind of need this to work tonight.

Rob


#7

Going to investigate it asap


#8

It was late last night and I can’t seem to recreate the problem where it was actually wiping out slides from my carousel. I did have to quit the app at some point because it was acting really strange - like the caching of the page was confused. This morning it’s working as it should, but I do believe that the original poster’s problem is related to the fact that multiple carousels all have the same id: “carousel” - which won’t work properly. Should be easy to try on your end.


#9

To be clear - I don’t know if the original poster had more than one carousel on one page, but that would do it. Unless one follows this procedure when making each of the carousels.

  1. Create the carousel
  2. Rename the id and href for that carousel (eg: mycarousel for the id and #mycarousel for the href)

It should work fine with multiple carousels at that point. Not a big deal, but it would be nice if Pingendo appended an auto-incremented number after each new carousel. Otherwise, it will cause confusion.