0

I am having a problem getting the images src from my slider.

$('.home-slider').cycle({
            fx: 'scrollLeft',
            timeout: 1,
            pager: '.home-slider-pager',

            pagerAnchorBuilder: function(idx, slide){
                return '<a href="#"><img id="pager-img" src="' + slide.src + '"/></a>'; 
            }
        });

I know these are the correct way to get the pager built and have the slider work correctly I have them working on other websites, but I am trying to get this image a little differently in this one and it is causing me trouble.

<aside class="home-slider-pager"></aside>
            <div class="home-slider">
                <a href="#">
                    <img src="Resources/Images/Slider/Home-Slider/Industrial-Slide.jpg" alt="Industrial Doors"/>
                    <p class="slider-description">Industrial Doors - Doors that work as hard as you do.</p>
                </a>
                <a href="#">
                    <img src="Resources/Images/Slider/Home-Slider/Restaurant-Slide.jpg" alt="Restaurant Doors"/>
                    <p class="slider-description">Restaurant Doors - From fast food to five star, made to order just for you.</p>
                </a>
            </div>

All this is formatted how i want it and the pager shows in the right spot when i call them what the problem is, is when i use the pagerAnchorBuilder function it is saying undefined slide.src, which i believe is because i have the slider rotating by the tags and not the image. How can I get the pagerAnchor builder to find my img src when its embedded within the tag?

I found the answer I thought I had looked at this before and hadnt. jQuery Cycle plugin pagerAnchorBuilder images becoming undefined

The correct .cycle code is below if anyone else has this problem.

$('.home-slider').cycle({
            fx: 'scrollLeft',
            timeout: 1,
            pager: '.home-slider-pager',

            pagerAnchorBuilder: function(idx, slide){
                return '<a href="#"><img id="pager-img" src="' + jQuery(slide).find('img').attr('src') + '"/></a>'; 
            }
        });
Community
  • 1
  • 1
Alex Beyer
  • 147
  • 1
  • 8

1 Answers1

0
$('.home-slider').cycle({
            fx: 'scrollLeft',
            timeout: 1,
            pager: '.home-slider-pager',

            pagerAnchorBuilder: function(idx, slide){
                return '<a href="#"><img id="pager-img" src="' + jQuery(slide).find('img').attr('src') + '"/></a>'; 
            }
        });
Alex Beyer
  • 147
  • 1
  • 8