Home › Forums › Add-ons › Repeater Field › Slideshow
Hi,
I’m trying to created a show using a repeater field.
I’ve succeeded showing only the first row image from the repeater field, I want a slider to pop up if I click on it. At the moment if I click on it the slider does pop up, but there are no images showing up. This is my code;`<div id=”slide-window”>
<?php if(get_field('gallery')): ?>
<div class=”slidemargin”>
<a href=”#” id=”close”><img src=”http://localhost:8888/underdonk/wp-content/themes/underdonk/images/close.jpg” /></a>
<ul id=”slider”>
<?php while(has_sub_field('image')): ?>
<li><div class=”slide-image”><img src=”<?php the_sub_field('image'); ?>”alt=””/></div>, <div class=”slide-info”><?php the_sub_field('title'); ?></div></li>
<?php endwhile;?>
</ul>
<a id=”prev” href=”#”><img src=”http://localhost:8888/underdonk/wp-content/themes/underdonk/images/prev.jpg” /></a>
<a id=”next” href=”#”><img src=”http://localhost:8888/underdonk/wp-content/themes/underdonk/images/next.jpg” /></a>
</div><!–.slidemargin –>
<?php endif; ?>
</div><!–#slide-window –>`
Please lead me to the right direction.
Thank you.
Jaeeun
<?php while(has_sub_field('image')): ?>
Should that be <?php while(has_sub_field('gallery')): ?>
instead?
Hi @sleepydada
Please read over the documentation of the has_sub_field function.
You should pass the repeater or flexible content field name, not the sub field name
SO, I changed my code to this;
<div id="slide-window">
<?php if(get_field('gallery')): ?>
<div class="slidemargin">
<a href="#" id="close"><img src="http://localhost:8888/underdonk/wp-content/themes/underdonk/images/close.jpg" /></a>
<ul id="slider">
<?php while(has_sub_field('gallery')): ?>
<li><div class="slide-image"><img src="<?php the_sub_field('image'); ?>"alt=""/></div>, <div class="slide-info"><?php the_sub_field('title'); ?></div></li>
<?php endwhile;?>
</ul>
<a id="prev" href="#"><img src="http://localhost:8888/underdonk/wp-content/themes/underdonk/images/prev.jpg" /></a>
<a id="next" href="#"><img src="http://localhost:8888/underdonk/wp-content/themes/underdonk/images/next.jpg" /></a>
</div><!--.slidemargin -->
<?php endif; ?>
</div><!--#slide-window -->
And now the images pop up, but they are overlapped on each other, and when I click the next or prev button nothing happens. This is my java code in case;
$bx('#prev').click(function(){
slider.goToPreviousSlide();
return false;
});
$bx('#next').click(function(){
slider.goToNextSlide();
return false;
});
Are there any Javascript errors in your browser console? (usually found by pressing F12 and navigating to “Console” tab)
Yes, Chrome says:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8888/lib/jquery.bxslider.css
Uncaught TypeError: Object #<Object> has no method ‘on’ jquery.bxslidercustom.js?ver=3.5.2:5
I put the css code in my style.css instead of calling jquery.bxslider.css
jquery.bxslidercustom.js is the java file for that I created to produce the pop up slider effect. Line 5 of it is;
$rs(window).on('resize', doResize);
Oh I deleted line 5 and now it works! Hmmm.
Thanks a lot for your help.
The topic ‘Slideshow’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.