We are transitioning over to a new forum platform. Please post new issues there. Existing threads will be dealt with here unless you choose to move them over. Visit the new forum

Forum

Thread tagged as: Question, Third-party

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
Raul Serrano

Raul Serrano 0 points

  • 1 year ago

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...

Drew McLellan

Drew McLellan 2637 points
Perch Support

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

Drew McLellan

Drew McLellan 2637 points
Perch Support

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...

<perch:repeater id="carousel" label="Carrusel">
    <perch:before>
        <section>
    </perch:before>
    <img src='<perch:content type="image" id="imagen_profile" label="Foto cliente" quality="90" widht="150px" help="Recorta a 150px de ancho" />' alt='<perch:content type="text" id="alt_profile" label="Nombre del cliente" />' class="profile" />
    <div class="intro">
        <h2><perch:content type="text" id="alt_profile" label="Nombre del cliente" /></h2>
        <perch:content id="texto_profile" type="textarea" label="Texto" markdown="true" textile="true" editor="markitup" />
    </div>
    <div id='rev_slider_<perch:content id="perch_item_index" />_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_<perch:content id="perch_item_index" />_1' class="rev_slider fullwidthabanner" style="display:none;" data-version="5.4.3">
            <ul>
                <perch:blocks>
                    <perch:block type="text" label="Slide">
                        <!-- 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:block>
                </perch:blocks>
            </ul>
            <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
        </div>
    </div>
    <!-- END REVOLUTION SLIDER -->
    <perch:after>
        </section>
    </perch:after>
</perch:repeater>
Drew McLellan

Drew McLellan 2637 points
Perch Support

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 (?)

Drew McLellan

Drew McLellan 2637 points
Perch Support

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.