[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Need help updating image carousel so that it auto advances every 5 seconds

Posted on 2014-08-21
5
Medium Priority
?
293 Views
Last Modified: 2014-08-21
I have an image carousel on the homepage of a wordpress site that I manage that I'd like to update so that it auto advances every 5 seconds:

http://moto-authority.com/

(Look underneath the "Quality Pre-Owned Bikes on Sale Now" heading - that's the image carousel I'm referring to)

Currently -- the only way to get it to advance is by clicking on the left & right arrows that are displayed on mouseover. How would I go about adding some custom javascript to this page so that it auto-advances to the "Next" slide every 5 seconds or so?  Please advise.

Thanks,
- Yvan
0
Comment
Question by:egoselfaxis
  • 2
  • 2
5 Comments
 
LVL 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 400 total points
ID: 40276277
You can probably do this with JavaScript / jQuery by using the setInterval() function.  The function you would call would be the same as whatever is called by the click event handler.  If I get some time later, I'll try to give you a code example that implements this answer.
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 1600 total points
ID: 40276320
Add this script :

<script type="text/javascript">
jQuery(function($) {
   setInterval(function() {
          $("#featured span:contains(Next)").click();
   }, 5000); // 5 seconds
});
</script>

Open in new window

0
 
LVL 83

Expert Comment

by:leakim971
ID: 40276331
0
 

Author Comment

by:egoselfaxis
ID: 40276358
Leakim971 - thanks for your reply!  Your script worked :

http://moto-authority.com/

The only thing I needed to change/fix was the selector name, .. which was actually "#special-offers":

<script type="text/javascript">
jQuery(function($) {
   setInterval(function() {
          $("#special-offers span:contains(Next)").click();
   }, 5000); // 5 seconds
});
</script>

Open in new window


Ray -- thanks to you as well.  I appreciate how you always volunteer to help. I'm giving you a few points too.

Thanks guys!
- Yvan
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40276361
Yep - it's looking good now!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question