Multiple sliders on one page

[itsberni]

First of all many thanks for this great slider plugin. neverless i got a problem integrating 2 sliders on one page. i´m using jquery 1.9.1 and my initiate sequence goes like this:

$(document).ready(function(){ var options = { nextButton: true, prevButton: true, pagination: false, animateStartingFrameIn: true, autoPlay: true, autoPlayDelay: 3000, preloader: true, preloadTheseFrames: [1], preloadTheseImages: [ "images/tn-model1.png", "images/tn-model2.png", "images/tn-model3.png" ] };

var options2 = {
    nextButton: false,
    prevButton: false,
    pagination: false,
    animateStartingFrameIn: true,
    autoPlay: true,
    autoPlayDelay: 3000,
    preloader: true
};

var sequence = $("#sequence").sequence(options).data("sequence");
var sequence2 = $("#sequence2").sequence(options2).data("sequence");

});

the result is no reaction on the sequence2 ( the .css has also been adjusted ).

i would be very thankful, if you can give me a shove.

Greetz Bernd

[IanLunn]

Hi @itsberni, your set up looks good. Could you provide a link to your project or the HTML and CSS for the second slider please?

My initial thought is that your second slider isn't animating all of the top level elements within Sequence frames. Please read the note here.

[itsberni]

Hi Ian, thanks for this lightning answer. Your link is invalid. My html ( because it´s only on my own server at this time ):

<section id="slider">
<div class="sequence-theme">
    <div id="sequence">

        <img class="sequence-prev" src="<?php echo $config->urls->templates?>scripts/slideshow/images/bt-prev.png" alt="Previous Frame" />
        <img class="sequence-next" src="<?php echo $config->urls->templates?>scripts/slideshow/images/bt-next.png" alt="Next Frame" />

        <ul class="sequence-canvas">
            <?php
            foreach($page->slideshow as $slides)
            {
                $image = $slides->slideImage;

                echo "<li>";
                echo "<h2 class='title'>$slides->slideHeadlineMain</h2>";
                echo "<h3 class='subtitle'>$slides->slideHeadlineSub</h3>";
                echo "<img class='model' src='$image->url' alt='Model'/>";
                echo "</li>";
            }
            ?>
        </ul>
    </div>
</div>
</section>

<section id="portfolio">
<div class="sequence-theme">
    <div id="sequence2">

        <!--<img class="sequence-prev" src="<?php echo $config->urls->templates?>scripts/slideshow/images/bt-prev.png" alt="Previous Frame" />
        <img class="sequence-next" src="<?php echo $config->urls->templates?>scripts/slideshow/images/bt-next.png" alt="Next Frame" />-->

        <ul class="sequence-canvas">
            <?php
            foreach($page->portfolio as $points)
            {
                $image = $points->image;

                echo "<li>";
                echo "<img class='' src='$image->url' alt='Model'/>";
                echo "<h2 class=''>$points->headline</h2>";
                echo "<p class=''>$points->text</p>";
                echo "</li>";
            }
            ?>
        </ul>
    </div>
</div>
</section>

to my css i added to every "sequence - id-selector" a "sequence2 - id-selector"

Thanks and happy easter!

[IanLunn]

The three top level elements in the <li> of your second slider don't have classes applied to them. The "modern-slide-in" theme you've used animates those elements using classes, so try adding the title, subtitle, and model classes to them.

Off topic, I just moved http://sequencejs.com to a new server. You mention the link is invalid but it works ok for me. Could you explain what exactly you see when you click the link so I can double check the server is working for everyone.

[itsberni]

ok, thanks i will try this. Link: The requested URL /developers/documentation/ was not found on this server.

[itsberni]

ok, ian...that solves the problem. Many Thanks But what if i have to use other class-names ( because of semantical reasons or because of the fact, that other elements are in use e.g. <p> or <div> inside the <li> - elements) is there a posibility to define the used elements within the initial options-definition?

[IanLunn]

You can use whatever elements and class names you want. The only limitation being that top-level elements MUST have a transition applied to them.

The transitions are defined in the CSS so if you change <img class="model" src="" /> to <img class="something-else src="" /> find .model in the stylesheet and change it to .something-else.