Content Slider's Buttons Not Working Correctly

HTML & CSS
1

Hi All,

I read the content slider post a couple before this one and made sure I linked to the external javascript files correctly. I don’t believe that’s the issue in my case.

I am having problems with the content slider on this page: http://aswdemo1.htoademos.com/welcome.asp

It was just added last night and I can’t get the buttons in the bottom-right to manually cycle through the slides. I have tried various combinations of increasing the z-index of the parent DIV (content_slider_wrapper), the child DIV (rotate_slide_button_container) and the slider buttons themselves. Something tells me I’m barking up the wrong tree.

Mr. O’B, if you happen to read this, I learned from my last mistake and did not add position:relative to the parent DIV so as to prevent a stacking issue. Hope I learned the proper lesson from that earlier gaffe.

Anyhoo, I’m hoping someone can spot my issue.

(Also, I am aware that I shouldn’t use the dirty hacks I coded into this page, such as embedding CSS and calling external .js files from the middle of the content. This was a quick test, to verify we could get the slider to work in our proprietary framework. I will circle back and get our developer to properly link to the files in the header).

Thanks!

Ansel

2

Have you registered the buttons with the js.

A bit hard to find an example of that script but it looks like you need something like this.


    <script type="text/javascript">  
      //triggers the slider
          $(document).ready(function() {
            
            $('#yourSliderId').DDSlider({
                
           [B]     nextSlide: '.slider_arrow_right',
                prevSlide: '.slider_arrow_left'[/B]
              
                
            });
            
        });
</script>
3

Yes, good catch. I added the following trigger, but it made no difference:


<script type="text/javascript">
       $(document).ready(function() {
        
          $('#yourSliderId').DDSlider({
            
             trans: 'random',
             delay: 50,
             ease: 'swing',
             waitTime: 5000,
             duration: 500,
             stopSlide: 1,
             bars: 15,
             columns: 9,
             rows: 3,
             selector: null,
             arrowNext: null,
             arrowPrev: null
            
          });
        
        });
</script>
4

That’s turned them off.:slight_smile:

This is the bit that turns them on.


[B]  nextSlide: '.slider_arrow_right',
                prevSlide: '.slider_arrow_left'[/B]

I tested the code I gave and the buttons now effect the change of your slides as required. :slight_smile:

5

Yep. You were totally right, as usual. Do you ever tired of being so right? ;p

Say Paul, I popped in that code below these items


selector: null,
arrowNext: null,
arrowPrev: null,

Is that the correct way to do it, or should I remove the null-value items above the code you supplied?

Thanks again. You rock!

Ansel

6

I don’t think you need those null items and would assume they were for turning off those functions. However, the documentation for that slider is not available unless you have purchased it so I can’t gain any more info (I’m assuming you did purchase it though).

It was working for me with just the code I gave above so it seems you don’t need them :slight_smile:

7

Yep, you had it spot on. :slight_smile:

Excellent stuff, Paul.

Thanks again,

Ansel