Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1440

    Is it possible to put multiple slideshows on a page?

    If it is how would you go about it when using the diagonal blocks slide transition?

    #35223

    You just need to create two divs with different ids like:

    <div class='aviaslider' id="my-id1">
    <div class="featured"><a href="images/slides/1.jpg" title="" ><img src="images/slides/1.jpg" alt="" /></a></div>
    <div class="featured"><a href="images/slides/2.jpg" title=""><img src="images/slides/2.jpg" alt="" /></a></div>
    <div class="featured"><a href="images/slides/5.jpg" title=""><img src="images/slides/3.jpg" alt="" /></a></div>
    </div>

    <div class='aviaslider' id="my-id2">
    <div class="featured"><a href="images/slides/1.jpg" title="" ><img src="images/slides/1.jpg" alt="" /></a></div>
    <div class="featured"><a href="images/slides/2.jpg" title=""><img src="images/slides/2.jpg" alt="" /></a></div>
    <div class="featured"><a href="images/slides/5.jpg" title=""><img src="images/slides/3.jpg" alt="" /></a></div>
    </div>

    You also need to add following javascript code – please use your ids:

    $('#my-id1').aviaSlider({
    blockSize: {height: 80, width:80},
    transition: 'slide',
    display: 'diagonaltop',
    switchMovement: true
    });

    $('#my-id2').aviaSlider({
    blockSize: {height: 80, width:80},
    transition: 'slide',
    display: 'diagonaltop',
    switchMovement: true
    });

    The Dude

    #35224

    Hi sir.

    I have the same problem, i whant to multiply my aviaslider in same page.

    I follow the steps in this post and its working but the images doesn`t slide.

    Here is my code:

    HTML:

    <div class=’aviaslider’ id=”fullwidth-fade-slider1″>

    <div class=”#”></div>

    <div class=”#></div>

    <div class=”#”></div>

    </div>

    <div class=’aviaslider’ id=”fullwidth-fade-slider”>

    <div class=”#”></div>

    <div class=”#”></div>

    <div class=”#”></div>

    </div>

    JS:

    $(‘#fullwidth-fade-slider1′).aviaSlider();

    $(‘#fullwidth-fade-slider’).aviaSlider();

    #35225

    Can you post a link please. Maybe there’s a javascript conflict.

    #35226

    I will send you a copy of file via RapidShare.

    #35227

    Hi again!

    here is the link.

    http://67.23.228.173/~daneissi/index.html

    #35228

    The first thing I noticed is that you placed the body tags wrong. Please correct this. Change the code from:

    <div class="center">

    <h1 class="logo"><a href="index.html">AviaSlider - a jquery image slider</a></h1>

    <div class='aviaslider' id="my-id1">
    <div class="#"><a href="images/slides/1.jpg" title="" ><img src="images/slides/1.jpg" alt="" /></a></div>
    <div class="#><a href="images/slides/2.jpg" title=""><img src="images/slides/2.jpg" alt="" /></a></div>
    <div class="#"><a href="images/slides/3.jpg" title=""><img src="images/slides/3.jpg" alt="" /></a></div>
    </div>

    <div class='aviaslider' id="my-id2">
    <div class="#"><a href="images/slides/4.jpg" title="" ><img src="images/slides/4.jpg" alt="" /></a></div>
    <div class="#"><a href="images/slides/5.jpg" title=""><img src="images/slides/5.jpg" alt="" /></a></div>
    <div class="#"><a href="images/slides/6.jpg" title=""><img src="images/slides/6.jpg" alt="" /></a></div>
    </div>

    </div>

    <body>

    </body>

    to

    <body>

    <div class="center">

    <h1 class="logo"><a href="index.html">AviaSlider - a jquery image slider</a></h1>

    <div class='aviaslider' id="my-id1">
    <div class="#"><a href="images/slides/1.jpg" title="" ><img src="images/slides/1.jpg" alt="" /></a></div>
    <div class="#><a href="images/slides/2.jpg" title=""><img src="images/slides/2.jpg" alt="" /></a></div>
    <div class="#"><a href="images/slides/3.jpg" title=""><img src="images/slides/3.jpg" alt="" /></a></div>
    </div>

    <div class='aviaslider' id="my-id2">
    <div class="#"><a href="images/slides/4.jpg" title="" ><img src="images/slides/4.jpg" alt="" /></a></div>
    <div class="#"><a href="images/slides/5.jpg" title=""><img src="images/slides/5.jpg" alt="" /></a></div>
    <div class="#"><a href="images/slides/6.jpg" title=""><img src="images/slides/6.jpg" alt="" /></a></div>
    </div>

    </div>

    </body>

    #35229

    Thanx!

    I allready change it but, nothing happen.

    #35230

    Can you give me your email adress – I send you a sample code with two working sliders.

    #35231

    Yes sure!

    (Email address hidden if logged out)

    Thanck you sir!

    #35232

    I sent you a mail.

    #35233

    Thank you sir it´s working!

    #35234

    Glad that I could help you.

    #35235

    Hi Dude, It’s posible you send you a sample code with two working sliders like dame?

    Thanks!!

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Avia Slider – Multiple Sliders on a page’ is closed to new replies.