Thread

This question may be related to a resolved thread.

Hello all,

I’m have troubles with my Nivo Slider. My images are displaying and I have some accompanying text I want to display for each featured item in the slider, as you can see it here: http://cl.ly/010K0d1u3H2N461H0p0o . Problem is the text flashes like it’s change but instead I just see the same title (which is the address) even though the image is changing.

Here my code:

<div id="featured">
       <div id="slider-wrapper">
        <div id="slider" class="nivoSlider">
        {exp:channel:entries channel="rental_properties" dynamic="no" status="featured property" disable="categories|member_data|category_fields|member_data|pagination"}
        <div id="portfolio" class="nivoSlider">
         <ol>
             {property_images} 
       <li>{exp:imgsizer:size src="{image}" alt="{title}" width="578px" height="316px" title="#htmlcaption"}</li>
       {/property_images}
      </ol>
        </div>
        
        <div id="htmlcaption" class="nivo-html-caption">
         <div class="property_info">
             <h5 class="red">{title}</h5>
             <ul>
              <li><strong>Location:</strong> West</li>
              <li><strong>Property Type:</strong> Apartment</li>
              <li><strong>Bedrooms:</strong> 1 - 3</li>
              <li><strong>Bathrooms:</strong> 1 - 2</li>
              <li><strong>Monthly Rent:</strong> $599.00 - $999.00</li>
             </ul>
      </div>
      <a href="http://%22class=%22learnmore" title="" class="learnmore"></a>
     </div>
     {/exp:channel:entries}
     </div>
    </div><!-- END SLIDER-WRAPPER -->
   </div><!-- END FEATURED -->

any ideas why it’s pulling the images that ‘featured property’ but not the title (address)?

This is a Nivo Slider problem. But my suggestion is to use BXslider (http://bxslider.com/) instead of Nivo!
Much better and easier to style.

With BXslider you’ll style everything in <li></li>.

So for your site the HTML would be something like:

<li>
<div class="photo">
    " alt=
</div><!-- /.photo -->

<div class="text">
 <h2>Title</h2>

<p><b>Location:</b> West</p>

<p><b>property Type:</b> West</p>

<p><b>Bedrooms:</b> West</p>

<p><b>Monthly rent:</b> West</p>

<p><br />
<a href="http://" title="">LEARN MORE</a><br />
</div><!-- /.text --><br />
</li>

Thanks Osze!

This was much much easy and quicker. So long Nivo!!!

Cool that you liked it.
I was thinking about the best CSS/HTML solution to get the background to work. (put the flag infront of the photo)

You’ve probably have a great solution for this but I’ll write my suggestion just because I love CSS. 😊

1. Cut out the middle of the entire background and use position: absolute; and z-index to put the background-image INFRONT the entire photo.

2. Just cut out the small part of the flag that is infront of the photo an just position and z-index to put it infront of the photo. And then have the rest of the background image like a normal background on the div - photo.

I think solution first is the coolest. 😊

Thanks man.

Yeah, I had it working with Nivo but I remember it took a bit of time and z-indexing to get it to work. For the interim, we’ll see what the client says, i’ve pushed over to the right above the property features. A little less elegant but it works: http://test.hallmarkrentals.com/

Yeah, It looks nice.

but I would go with the arrows in the picture. (maybe a bit more white and a small shadow to make it more visiable?)

- left: 38px;
- right: 345px;

What a great thread to see - thank you for all of the help!

Since this was about a particular slider and not EE, and has an active conversation, I’ve moved it down to Community Help so you can continue.

Thanks guys!