REC & REC+

The default slider in REC is brought in with the following In the Admin > Templates > main/index.tpl file:

 {# Content slider will appear here if set #}
{% if page.show_content_slider %}
<div class="grid_24 alpha omega">
<!-- Content slider -->
{{ page.content_slider }}
</div>
{% endif %}

The above checks to see if a slider is enabled on the page, if so brings in a wrapper <div> and then all the html needed.

But we have another way in REC to do this that allows you to build in any slider you'd like, it's a JavaScript object we leak to the page called "WebSliders".

Try accessing it out for yourself in the web console on the front end of an REC store.

You should see its an object of each slider in admin, inside those is an object about the details of that slider and a panels property that contains an array of each slide. Each slide is also an object that contains data about that slide, such as the background colour the admin has selected and the background image uploaded.

We can make use of this on the page by accessing the currently selected slider name with the {{ page.content_slider_name }} template tag.

Putting this together is easy: WebSliders["{{ page.content_slider_name }}"].panels

This will return you the array of slides for the slider on the current page.

Here's an example where our slider will go into <ul id="demo1"></ul>

{% if page.show_content_slider %}




<ul id="demo1">
</ul>




<script id="each-slide" type="text/template">
<li class="sy-slide fade useCSS" style="transition-duration: 800ms; -webkit-transition-duration: 800ms; opacity: 0;">
<a href="#">
<img src="{{ image }}">
</a>
</li>
</script>




<script>
(function ($) {
var slides = WebSliders["{{ page.content_slider_name }}"].panels,
$slider = $('#demo1'),
html = '',
eachSlide = $('#each-slide').html();




// loop over the slides to add in each image
$.each(slides, function (i, slide) {
html += eachSlide.replace('{{ image }}', slide.image);
});




// add to the page
$slider.html(html);




// Init slider JS
// TODO: something like $('#demo1').magicSlider(...);




}(jQuery));
</script>




{% endif %} 

This code doesn't show the slider init code itself, that's for you to add with which ever slider you want to use. But this gives you all the slides as elements inside the <ul id="demo1"></ul> ready to go.

You can change the <ul> to be a <div> and you can change how you selected it, either with a different id or maybe with a class name too if that's what your chosen slider wants, and you can change the template of each-slide to match the html you require.