not a support question
Luiz_Araujo
Member
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
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();
Luiz_Araujo
Member
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;
}
Luiz_Araujo
Member
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.
You must log in to post.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
