Javascript Image Slider / Posts /

Prev/Next arrows on theme 1

2
Hi!
I'm trying to make the prev/next arrows from theme 4 work for theme 1. This is how my code looks right now:

<div id="sliderFrame">

<div id="hotnewsslider">
<img src="images/slider01.jpg" />
<img src="images/slider02.jpg" />
<img src="images/slider03.jpg" />
</div>

<!-- Custom navigation buttons on both sides - CODE FROM THEME 4 -->
                <div class="group1-Wrapper">
                     <a onclick="imageSlider.previous()" class="group1-Prev"></a>
                     <a onclick="imageSlider.next()" class="group1-Next"></a>
                 </div>

</div>


The arrows are appearing, but they don't work when clicked. :/ Is there a way to 'fix' it? Or... is there a cleaner way to use prev/next arrows on theme 1?

Note: I have two different sliders on the same page (theme 1 on top, theme 6 JQuery on bottom), so I'm using the same js-image-slider.js file for both, with different sliderID for each one. I'm testing the page on localhost.

Thanks!



Luciana  11 years ago   viewed: 6409    

3 Answers

1
Thanks a lot! Now it works perfectly :)


Just another question:
Is there a way to put the .navBulletsWrapper div inside another div? Something like this:

<div id="slider">
     <img src="images/slider01.jpg" />
     <img src="images/slider02.jpg" />
     <img src="images/slider03.jpg" />
     <div class="background-div"><div class="navBulletsWrapper">...</div></div>
</div>

The code for the bullets is put automatically, I wonder if there is a way to manipulate this.

Thanks!
Luciana   11 years ago
1
The navigation bullets must be placed outside of the <div id="slider">...</div>. 
I think you want to locate the bullets on top of the slider. You can implement it by manipulating the position of div.group1-Wrapper in the CSS file. For example:

div.group1-Wrapper  {
top:220px; left:280px; /* or bottom: 20px; Its position is relative to the #slider */
... ...
}
Milo   11 years ago
0
Luciana,
I don't know how you name the two instance of your sliders. Suppose you name them as follows in the js-image-slider.js file:
var imageSlider1=new mcImgSlider(sliderOptions1); var imageSlider2=new mcImgSlider(sliderOptions2);
Then your navigation button for your imageSlider1 should be scripted as follows:
<div class="group1-Wrapper">     <a onclick="imageSlider1.previous()" class="group1-Prev"></a>     <a onclick="imageSlider1.next()" class="group1-Next"></a> </div>
Milo   11 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲