Forum
Revolution Slider on repeater
Hello,
I need to create a Revolution Slider inside a content template's repeater. The problem comes when I need to change id numbers on both template and JS: ´rev_slider_1_1_wrapper´ into ´rev_slider_2_1_wrapper´... and #rev_slider_1_1 on JS into #rev_slider_2_1
Any idea how to make it dinamic?
Template
<div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="test" data-source="gallery">
<!-- START REVOLUTION SLIDER 5.4.3 auto mode -->
<div id="rev_slider_1_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.4.3">
<perch:repeater id="slider" label="Carrusel">
<perch:before>
<ul>
</perch:before>
<!-- SLIDE -->
<li data-transition="fade">
<!-- MAIN IMAGE -->
<img src="/assets/img/historias.png" alt="" title="historias" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
<img src='<perch:content type="image" id="imagen_slider" label="Imagen carrusel" quality="90" height="500px" widht="1056px" crop="true" help="Recorta a 1056px x 500px" />' alt='<perch:content id="texto_slide" type="textarea" label="Texto" markdown="false" chars="100" />' />
<!-- CAPTION -->
<div class="tp-caption tp-resizeme tttext" id="slide-1-layer-3" data-x="['left','left','left','left']" data-hoffset="['0','0','0','0']" data-y="['bottom','bottom','bottom','bottom']" data-voffset="['0','0','0','0']" data-basealign="slide" data-width="['100%']" data-height="['auto']" data-type="text" data-typewriter='{"lines":"","enabled":"on","speed":"30","delays":"1%7C100","looped":"off","cursorType":"one","blinking":"on","word_delay":"off","sequenced":"off","hide_cursor":"off","start_delay":"1000","newline_delay":"1000","deletion_speed":"20","deletion_delay":"1000","blinking_speed":"500","linebreak_delay":"60","cursor_type":"one","background":"off"}' data-responsive_offset="on" data-frames='[{"delay":0,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'>
<perch:content id="texto_slide" type="textarea" label="Texto" markdown="false" chars="100" />_ </div>
</li>
<perch:after>
</ul>
</perch:after>
</perch:repeater>
<div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
</div>
</div>
And Js outside perch template
var revapi1,
tpj = jQuery;
tpj(document).ready(function() {
if (tpj("#rev_slider_1_1").revolution == undefined) {
revslider_showDoubleJqueryError("#rev_slider_1_1");
} else {
revapi1 = tpj("#rev_slider_1_1").show().revolution({
sliderType: "standard",
jsFileLocation: "/assets/js/",
sliderLayout: "auto",
dottedOverlay: "none",
delay: 9000,
navigation: {
onHoverStop: "off",
arrows: {
enable: true,
style: 'gyges',
tmp: '',
rtl: false,
hide_onleave: false,
hide_onmobile: true,
hide_under: 0,
hide_over: 9999,
hide_delay: 200,
hide_delay_mobile: 1200,
left: {
container: 'slider',
h_align: 'left',
v_align: 'center',
h_offset: 20,
v_offset: 0
},
right: {
container: 'slider',
h_align: 'right',
v_align: 'center',
h_offset: 20,
v_offset: 0
}
},
touch: {
touchenabled: 'on',
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: 'horizontal',
drag_block_vertical: true,
},
},
visibilityLevels: [1240, 1024, 778, 480],
lazyType: "none",
shadow: 0,
spinner: "spinner0",
stopLoop: "off",
stopAfterLoops: -1,
stopAtSlide: -1,
shuffle: "off",
autoHeight: "off",
disableProgressBar: "on",
hideThumbsOnMobile: "off",
hideSliderAtLimit: 0,
hideCaptionAtLimit: 0,
hideAllCaptionAtLilmit: 0,
debugMode: false,
fallbacks: {
simplifyAll: "off",
nextSlideOnWindowFocus: "off",
disableFocusListener: false,
},
// stop autoplay
stopLoop: 'on',
stopAfterLoops: 0,
stopAtSlide: 1,
});
}
RsTypewriterAddOn(tpj, revapi1);
}); /*ready*/
Diagnostic report:
Perch: 3.0.4, PHP: 5.4.4, MySQL: 5.5.25, with PDO
Server OS: Darwin, apache2handler
Installed apps: content (3.0.4), assets (3.0.4), categories (3.0.4), perch_blog (5.5.1)
App runtimes: <?php $apps_list = [ perch_blog, ];
PERCH_LOGINPATH: /perch
PERCH_PATH: /Applications/MAMP/htdocs/optaarquitectos.com/perch
PERCH_CORE: /Applications/MAMP/htdocs/optaarquitectos.com/perch/core
PERCH_RESFILEPATH: /Applications/MAMP/htdocs/optaarquitectos.com/perch/resources
Image manipulation: GD
PHP limits: Max upload 32M, Max POST 32M, Memory: 64M, Total max file upload: 32M
F1: 0c66c2e1f82f9e0b7617b2cb8270f2c7
Resource folder writeable: Yes
HTTP_HOST: opta2:8888
DOCUMENT_ROOT: /Applications/MAMP/htdocs/optaarquitectos.com
REQUEST_URI: /perch/core/settings/diagnostics/
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
Can you explain why you are needing to change the Slider ID dynamically to rev_slider_2_1_wrapper? Are you going to have multiple sliders on the same page?
From your code, it's the slides that are correctly in the repeater, so I don't see a need for changing the slider ID in the template or in the JS.
Yes, i need multiple sliders on the same page. When I create more on perch it only works first slider. I need to create individual ids...
You can use
<perch:content id="perch_item_index" />to get a counter within a region.Ouu, I forgot I was using blocks to add new carousels, and repeater for adding new slides as nesting repeaters is not allowed. It's there any chance to getting that number with blocks? or maybe I should build it on inverse? (repeater for new carousels, and block for slides)?
thanks for your time Drew
Yes, you can use that in blocks.
I just place blocks inside a repeater and it do not work. Blocks appear apart repeater, and is not related to that current carousel...
You cannot put blocks inside a repeater, but you can put repeaters inside blocks.
Then, using
<perch:content id="perch_item_index" />may not be useful (?)I don't really understand what you're trying to do, but it sounds like an implementation question rather than a support issue, so I'll leave it here for others to chip in if they wish.