ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

exp:channel and sliders. How to make it work

December 30, 2012 3:54pm

Subscribe [1]
  • #1 / Dec 30, 2012 3:54pm

    Hi,

    I’m relatively new to expressionengine, but have achieved some already on my short time. I’m trying to setup my second EE website, but I have some trouble getting my exp:channel to behave as intended together with my slider.

    I’ve tried to put my EE code in almost every line I can think of, but it still doesn’t make the slider work as intended. Could someone in here help me put the EE tags in their right positions?

    Here’s my slider code, together with my EE tags. Currently this stacks the images (slides) above each other, instead of displaying them one by one (like sliders are supposed to be displaying images).

    <!-- Main Slider Start -->
      <div class="container hidden-phone" id="slideshow">
       <section id="slider" class="row">
        <div class="span12 carousel-container">
         <!-- Begin Slider -->
         <div class="carousel slide" id="carouselslide">
          <!-- Begin Carousel Inner -->
          {exp:channel:entries channel="frontpage_slider" sort="desc" dynamic="no" limit="3" disable="member_data"}
          <div class="carousel-inner">
           <div class="slide-section item active">
            <a href="http://{path=nyheter}">{excerpt_image}</a>
            <div class="carousel-caption">
             <div class="carousel-item-category"><span class="icon awe-tags"></span><a href="#">{categories}</a></div> 
             <h3><a href="#">{title}</a></h3><p>         <br />
            </div><br />
           </div>   <br />
          </div><br />
          {/exp:channel:entries} <br />
          <!-- End Carousel Inner --><br />
          <!-- Carousel nav --><br />
          <a href="#carouselslide%22class=%22carousel-control" class="carousel-control left"><span class="icon awe-chevron-left"></span></a><br />
          <a href="#carouselslide%22class=%22carousel-control" class="carousel-control right"><span class="icon awe-chevron-right"></span></a><br />
         </div><br />
         <!-- End Slider --><br />
        </div><br />
       </section><br />
      </div><br />
      <!-- Main Slider End -->

    Thank you!

    Regards
    Kristoffer

  • #2 / Dec 30, 2012 10:30pm

    Chris Arasin

    26 posts

    Can’t really help without knowing what your desired resulting markup is. I’m guessing you may need to move your channel:entries tag one more div deeper. That is guessing that you want <div class=“carousel-inner”> to be a wrapper around a collection of <div class=“slide-section item active”>. If you post a desired static result I could be more specific.

  • #3 / Dec 31, 2012 5:04am

    Thank you.

    I found the solution. Had to change

    <div class="slide-section item active">
    to
    <div class="slide-section item">

    . Removing active from the class did the trick. Still a lot to learn about the twitter bootstrap framework 😛

  • #4 / Dec 31, 2012 7:39am

    Hmmm..

    Is there any EE tags I can use to tell EE to append “active” class to the first slide, but not on the rest?

  • #5 / Dec 31, 2012 8:29am

    Chris Arasin

    26 posts

    <div class="slide-section item {if count == 1}active{/if}">

    http://ellislab.com/expressionengine/user-guide/modules/channel/channel_entries.html#if-count

  • #6 / Dec 31, 2012 8:46am

    Great! Just what I needed. All working now. Thank you! 😊

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases