Forum

Thread tagged as: Question

Bootstrap Carousel

Hi there,

New to perch and so far so good. I had a quick look and googled a bit before posting but i am sorry if this question has been put forward already!

I have the following code that is cycling through each piece of content. Just wondering how to set this up in perch and how to add the class="active" to the items? Hope that makes sense!

<div class="jumbotron">
         <div class="container">

            <div class="testimonials">

               <h1>Testimonials</h1>

               <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

                  <ol class="carousel-indicators">
                     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                     <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                     <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                  </ol>

                  <div class="carousel-inner">
                     <div class="item active">
                        <p>“Before the classes I was always tired in the mornings, tired after work and tired at the weekends.  I now feel invigorated and it was really simple. I thought the postures were going to be difficult, but in fact, they were quite easy. Helen was great and made the whole thing really enjoyable.”</p>
                        <p class="testi-author">Paul, Business Advisor</p>
                     </div>

                     <div class="item">
                        <p>“Helen introduced me to yoga and i'm so glad that she did! I'd always put it off because i'm so unflexible, but after to just a few lessons I feel so much more confident and can't wait to continue practicing. Helen's a great teacher and made me feel completely at ease and I highly recommend her classes/lessons to anyone interested in yoga! X”</p>
                        <p class="testi-author">Chloe, Beauty Consultant</p>
                     </div>

                     <div class="item">
                        <p>“I have been to a handful of Helen's classes where she has continued to give full support to me post baby. Her unique teaching methods are easy to follow and along with her calming nature ensure the lessons have a comfortable energy. I was completely new to yoga when I first started  with Helen and now I find myself practising the postures in my own free time at home in between classes.”</p>
                        <p class="testi-author">Sophie, Bridal Consultant</p>
                     </div>
                  </div>

               </div>

            </div>

         </div>
      </div>

Martin
Martin Murphy

Martin Murphy 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

The way to approach this is to use two templates. The first is for the 'indicators', and the second is the 'items'.

Then you output the region twice, once with each template.
Martin Murphy

Martin Murphy 0 points

7 years ago

Thanks Drew, ye pretty simple now I have done it like that. Thanks!
Martin Murphy

Martin Murphy 0 points

7 years ago

Okay so now I have:

<div class="carousel-inner">
                     <?php perch_content('Testimonials'); ?>
</div>

With my template as:

<div class="item active">
    <p>“<perch:content id="testimonial" type="textarea" label="Testimonial" />”</p>
    <p class="testi-author"><perch:content id="author" type="text" label="Testimonial Author" />, <perch:content id="author_job" type="text" label="Author Job Title" /></p>
</div>

But what do i do about the active class? As obviously at the moment it is outputting the active class on each piece of content I enter?
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Which one should it be on? The first?
Martin Murphy

Martin Murphy 0 points

7 years ago

Yes it should start on the first.
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago 
<div class="item<perch:if exists="perch_item_first"> active</perch:if>">
Martin Murphy

Martin Murphy 0 points

7 years ago

I had tried that already but it seemed to be still outputting the class onto all 3 divs still :/
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Show us your template, and I'll take a look.
Martin Murphy

Martin Murphy 0 points

7 years ago

Hmmm, I think I may have a different problem that my template files aren't updating. Has this been encountered before? Just tried changing it a couple of times and its not updating at all. I have edited to static html on my site pages and that is refreshing and updating fine. Server issue?
Jonathan Elliman

Jonathan Elliman 27 points

7 years ago

I built one recently using this method. Something else I ran into with the bootstrap carousel is that you'll have to add a different way of counting through your Perch entries, as javascript counts from zero.

Using perch_item_zero_index worked for me (thanks to Drew's help as always). My indicator template reads like this:

<li data-target="#carousel-techniche" data-slide-to="<perch:content id="perch_item_zero_index" />"<perch:if id="perch_item_index" match="eq" value="1"> class="active"</perch:if>></li>
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Have you re-saved the content region since changing the template?