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?
Avia Slider - Multiple Sliders on a page
14 posts from 4 voices- Started 2 years ago by silverflame757
- Latest reply from pachifg
- This topic is not a support question
-
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
Posted 2 years ago # -
dane
MemberHi 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();Posted 2 years ago # -
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>Posted 2 years ago #
Reply
You must log in to post.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
