My Magento site features a custom-built slider that is both responsive and has unique touch behavior. The desired behavior for the slider is as follows:
- A three-image slider where the middle image has an opacity of 1.0, while the other two images have an opacity of 0.15.
- On smaller screens, only display two images. The right image should have an opacity of 1.0, and the left image should have an opacity of 0.15.
- For mobile devices, show just one image with an opacity of 1.0.
I was able to achieve this functionality using a mix of CSS and jQuery.
HTML
<ul class="more-views">
<li><a href="someURL"><img src=..... /></li>
<li class="active"><a href="someURL"><img src=..... /></li>
<li><a href="someURL"><img src=..... /></li>
<li><a href="someURL"><img src=..... /></li>
<li><a href="someURL"><img src=..... /></li>
</ul>
CSS .more-views ul li { opacity: .15; } .more-views ul li.active { opacity: 1.0; }
JAVASCRIPT
The JavaScript code is quite lengthy, so I recommend inspecting the element. Essentially, when you click the NEXT arrow, the first element in the list gets cloned, appended to the end of the list, then removed from its initial position. After that, the active class is transferred to the second <li> in the list.
<ul>
<li class="elem1"></li>
<li class="elem2 active"></li>
<li class="elem3"></li>
<li class="elem4"></li>
</ul>
STEP 1
<ul>
<li class="elem1"></li>
<li class="elem2 active"></li>
<li class="elem3"></li>
<li class="elem4"></li>
<li class="elem1"></li>
STEP 2
<ul>
<li class="elem2 active"></li>
<li class="elem3"></li>
<li class="elem4"></li>
<li class="elem1"></li>
STEP 3
<ul>
<li class="elem2"></li>
<li class="elem3 active"></li>
<li class="elem4"></li>
<li class="elem1"></li>
The current issue includes: 1. When clicking the right arrow (next arrow) once, the opacity of the first element remains at 1.0 (specifically in Chrome). 2. Upon inspection, it shows an opacity of 0.15. 3. Browser resizing causes the opacity to revert back to 0.15. 4. Enabling/disabling opacity in Firebug resolves the issue. 5. Clicking the next arrow twice eliminates the opacity error.
You can view a live example here: