Problems, need help? Have a tip or advice? Post it here.
3 posts Page 1 of 1
I am trying to create a carousel using cms:masterpage and not repeatable templates.

I successfully got my masonry and lightbox to display the images and line up neatly, but I can't get the carousel to work.

It works fine with static images. I want to use the masterpage method because I don't want to have to upload my images in two places and I already use the masterpage method elsewhere on the site.

The images just stack vertically instead of rotating. I'm not sure if I placed the masterpage and /page tags correctly, or if it just can't be done.

and here is the code
Code: Select all
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap-grid.css" rel="stylesheet">
<style>
.container {
padding: 10px;
margin: 0 auto;
}

.block {
display: inline-block;
width: 200px;
margin: 10px;
}

img {
width: 200px;
}

.mfp-close { cursor: pointer!important; }
</style>

</head>

<body>

<div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol><cms:pages masterpage='test.php' limit='3'>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="<cms:show carousel />">
       </div></cms:pages>

  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

<div>
<div class="container popup-gallery"><cms:pages masterpage='test.php'>
<a href="<cms:show image />" title="<cms:show k_page_title />" class="block"><img src="<cms:show thumb />"></a>
</cms:pages>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.1/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.bundle.js"></script>
<script>
$(window).on('load', function(){
$ ('div.container').masonry({
columnWidth: 'a.block',
itemSelector: 'a.block',
fitWidth: true
});
});
</script>
<script>
$(document).ready(function() {
   $('.popup-gallery').magnificPopup({
      delegate: 'a',
      type: 'image',
      tLoading: 'Loading image #%curr%...',
      mainClass: 'mfp-img-mobile',
      gallery: {
         enabled: true,
         navigateByImgClick: true,
         preload: [0,1] // Will preload 0 - before current, and 1 after the current image
      },
      image: {
         tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
         titleSrc: function(item) {
            return item.el.attr('title') + '<small>by Katie Cirone Spagnuolo</small>';
         }
      }
   });
});
</script>
  </body>
</html>
I had the same problem recently. If you have many "active" class in <div class="carousel-item active"> carousel will show all that active div-s .
rdamir82 wrote: I had the same problem recently. If you have many "active" class in <div class="carousel-item active"> carousel will show all that active div-s .

I believe this correction to line 40 above should address the problem:
Code: Select all
<div class="carousel-item<cms:if k_count == '1'> active</cms:if>">

Hope it helps.
3 posts Page 1 of 1