0

I suppose I could consider my very experienced with ExpressionEngine.. But I've come across a stumper here and I know the answer is probably obvious.

Client has handed me a design to port over to expression engine and implement all the bells and whistles. They have included their slider of choice in the design.

   <div class="slider">
     <div class="shell">        
        <div class="slider-caption">
           <h3>Lorem ipsum</h3>

           <h2>Epsum factorial <br /> non deposit</h2>

           <div class="actions">
              <a href="#" class="link-more">read more</a>
           </div><!-- /.actions -->   
        </div><!-- /.slider-caption -->        
     </div><!-- /.shell -->
     <ul class="slides">
        <li class="slide">
           <img src="{images}/slide-01.jpg" alt="" />
        </li>

        <li class="slide">
           <img src="{images}/slide-02.jpg" alt="" />
        </li>

        <li class="slide">
           <img src="{images}/slide-01.jpg" alt="" />
        </li>

        <li class="slide">
           <img src="{images}/slide-02.jpg" alt="" />
        </li>
     </ul><!-- /.slides -->
     <div class="shell">
        <div class="slider-paging"></div><!-- /.slider-paging -->
     </div><!-- /.shell -->
  </div><!-- /.slider -->

^I'm sure you've seen the problem already. I cannot simply 'wrap' this section inside a channel tag, it would break the styling. Nor can I simply use two channel tags (unless I'm missing something) to populate both areas and keep them in sync with each other for each slide.

Here was my initial (lazy) attempt:

 <div class="slider">
     <div class="shell">        
         {exp:channel:entries channel="home_slider" limit="4" orderby="date" sort="desc" dynamic="no"}
          <div class="slider-caption">
           <h3>{title}</h3>

           <h2>{home_slider_text}</h2>

           {if home_slider_link !==''}
           <div class="actions">
              <a href="{home_slider_link}" class="link-more">read more</a>
           </div><!-- /.actions -->   
           {/if}
           </div><!-- /.slider-caption -->  
          {/exp:channel:entries}      
     </div><!-- /.shell -->
     <ul class="slides">
        {exp:channel:entries channel="home_slider" limit="4" orderby="date" sort="desc" dynamic="no"}
        <li class="slide">
           <img src="{home_slider_image}" alt="{title}" />
        </li>
        {/exp:channel:entries}
     </ul><!-- /.slides -->
     <div class="shell">
        <div class="slider-paging"></div><!-- /.slider-paging -->
     </div><!-- /.shell -->
  </div><!-- /.slider -->

I'm thinking the answer lies in being clever with an {if count} approach, but I'm scratching my head on this.

Any words of advice?

Note: To make this even more frustrating, a long time ago I dealt with a similar problem and fixed it.. But I don't have access (nor even remember the url) to that site.

Edit: Upon further investigation.. It seems that this slider they chose isn't actually transitioning\hiding the slide text- only the slide images themselves. Curious.

Seems the issue isn't with me per se but with their code.

1

I suggest that you do not use separate entry for each slider, but have one entry with 2 custom fields:

  • slider caption (text field)
  • slide images (Matrix or Grid field)

This way, you will simply loop over Grid/Matrix field while staying in same Channel entry.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.