Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #9266

    Hi,

    I am trying to run Avi Slider with another jquery’s plugin (cycle or jquey_slider) without success. Even using noconflict()..

    So I was thinking to use two Avia Slider for solve the issue…

    Is it possible to run two diferentes Avia Slider (with differents sizes) at same webpage?

    The url in question is:

    http://www.clubedosmarimbas.com.br/2012/aluguel_de_espaco.php

    Thanks for any help

    #64082

    Hey,

    yes – this is possible. Just inser to image lists like:

    <ul class='aviaslider' id="sliderone">
    <li><a href="images/slides/1.jpg" title="" ><img src="images/slides/1.jpg" alt="" /></a></li>
    <li><a href="images/slides/2.jpg" title=""><img src="images/slides/2.jpg" alt="A heading of your choice :: This is the image description defined in your alt tag" /></a></li>
    <li><a href="images/slides/5.jpg" title=""><img src="images/slides/3.jpg" alt="Another heading :: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor" /></a></li>
    <li><a href="images/slides/4.jpg" title=""><img src="images/slides/4.jpg" alt="No Heading, just a line of content" /></a></li>
    <li><a href="images/slides/5.jpg" title=""><img src="images/slides/5.jpg" alt="" /></a></li>
    </ul>

    <ul class='aviaslider' id=slidertwo">
    <li><a href="images/slides/1.jpg" title="" ><img src="images/slides/1.jpg" alt="" /></a></li>
    <li><a href="images/slides/2.jpg" title=""><img src="images/slides/2.jpg" alt="A heading of your choice :: This is the image description defined in your alt tag" /></a></li>
    <li><a href="images/slides/5.jpg" title=""><img src="images/slides/3.jpg" alt="Another heading :: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor" /></a></li>
    <li><a href="images/slides/4.jpg" title=""><img src="images/slides/4.jpg" alt="No Heading, just a line of content" /></a></li>
    <li><a href="images/slides/5.jpg" title=""><img src="images/slides/5.jpg" alt="" /></a></li>
    </ul>

    and add an unique id/class to each list. In the example above I used “sliderone” and “slidertwo”. Afterwards call the slider functions with:

    jQuery('#sliderone').aviaSlider();

    jQuery('#slidertwo').aviaSlider();

    #64083

    Thanks, for reply me, Dude.

    How about the css? The AviaSliders will have differents sizes (1000px width X 380px height and 500px widtht X 380px height)

    I am using this one for the first one:

    .aviaslider{

    height:380px; /*this changes the height of the image slider*/

    width:1000px;

    overflow: hidden;

    position: relative;

    background: #fff url(../images/layout/preload.gif) center center no-repeat;

    }

    .aviaslider li, .aviaslider .featured{

    display: block;

    width:100%;

    height:100%;

    position: absolute;

    top:0;

    left:0;

    z-index: 1;

    }

    .js_active .aviaslider li, .js_active .aviaslider .featured{

    display:none;

    }

    .aviaslider img, .aviaslider a img, .aviaslider a{

    border:none;

    text-decoration: none;

    }

    #64084

    Hi, Dude!

    I found a way to use aviaSlide and cycle Jquery together. Please, take a look:

    http://www.clubedosmarimbas.com.br/2012/aluguel_de_espaco.php

    Thanks for your support.

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

The topic ‘Two Avia slider at same page?’ is closed to new replies.