We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Bootstrap Carousel - how to edit this the right way?

    • 42101
    • 125 Posts
    ad2003 Reply #1, 13 years, 10 months ago
    Hi!

    I am totally new to modx - I am using migx and like it very much!

    I want to have a Gallery using migx. The set up was simple and all is working great. But the Bootstrap Carousel makes always the first item in the Carousel a "active item" - so it gets an "active" class. If it's turned off, the image is not loading probably.

    Here is my code:

                   <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
[[!getImageList? 
    &tvname=`carousel_images`
    &tpl=`@CODE:  


 <div class="item active">
                    <img src="[[+img]]" alt="+title">
                    <div class="carousel-caption">
<h4>[[+title]]</h4>
 <p>[[+description]]</p>
 
 </div>
 
     </div>

  `]]
...


    How could I do this right? Only one image at time should be "item active" - not all.

    Thank you!

    AD

      • 28042 ☆ A M B ☆
      • 24,524 Posts
      sottwell Reply #2, 13 years, 10 months ago
      I would presume that it's the job of the Javascript of the carousel to add the "active" classname to the image. It should have an initialization parameter to set the first item as active or not.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 6038
        • 228 Posts
        christianhanvey Reply #3, 13 years, 10 months ago
        change 
        <div class="item active">
        to 
        <div class="item">
          • 4172
          • 5,888 Posts
          Bruno17 Reply #4, 13 years, 10 months ago
          If that doesn't help,
          you can create a chunk 'caruselimage'

          use &tpl=`caruselimage`

          with this:

          <div class="item [[+idx:is=`1`:then=`active`:else=``]]">
  <img src="[[+img]]" alt="[[+title]]" />
  <div class="carousel-caption">
    <h4>[[+title]]</h4>
    <p>[[+description]]</p>
  </div>
</div>


          (not sure if the output-filter would work with @CODE:)
            -------------------------------

            you can buy me a beer, if you like MIGX

            http://webcmsolutions.de/migx.html

            Thanks!
            • 42101
            • 125 Posts
            ad2003 Reply #5, 13 years, 10 months ago
            Hi! And thank you for your replies!

            @sottwell
            thanks - Tried it before - could be a solution, but I'd like to learn a bit more handling the code from modx this time smiley.

            @christianhanvey

            thanks - I tried this before, but than the Slider is broken - two images are shown at the same time.

            @bruno17
            thank you! I think this could be the right way with some conditional stuff. But this is not working inside the chunk. It's not getting the "active" at all. I also tried it with a new chunk as you suggested in your post....

            But no problem - in the meanwhile I just put a "active" Picture manually - than it shows correctly. Dirty solution, but it works.

            I think I should dig more into the conditional stuff though.
            thank you!

            AD