Jquery Slider

Posted on 2013-12-05
Medium Priority
Last Modified: 2013-12-09
Looking for a solution to creating a jquery DIV slider with bottom buttons that can call the slides when clicked. So far we have created the content and arrows to scroll left and right but we also want users to be able to click the bottom black package buttons to select the appropriate slide.
Question by:fadercreep
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39701312
Even better is to create a JSFiddle.net with only the absolutely necessary code to show the issue. A 181KB Zip file is not promising
LVL 23

Accepted Solution

Jens Fiederer earned 2000 total points
ID: 39702028
Good advice, although in this case the actual basic.html file included was really quite small...most of the bulk was in the included jquery support files, which could have been linked off the web rather than included.

Anyway, I think all it takes is onclick events:

    <div id="planbuttons">
    	<img src="images/basicplan_thumb.png" alt="WaveDirect Basic Plan" onclick="$('#plan_slider').cycle(0)"/>
        <img src="images/standardplan_thumb.png" alt="WaveDirect Standard Plan" onclick="$('#plan_slider').cycle(1)"/>
        <img src="images/ultraplan_thumb.png" alt="WaveDirect Ultra Plan" onclick="$('#plan_slider').cycle(2)"/>
        <img src="images/entertainmentplan_thumb.png" alt="WaveDirect Entertainment Plan" onclick="$('#plan_slider').cycle(3)"/>
        <img src="images/ePLUSplan_thumb.png" alt="WaveDirect Entertainment PLUS Plan" onclick="$('#plan_slider').cycle(4)"/>
    </div> <!--Closes planbuttons-->

Open in new window

Essentially this is just using information from the goto samples on http://jquery.malsup.com/cycle/faq.html

Author Closing Comment

ID: 39705975
Thanks for everyone's help on how to post projects in the future, also Great to see Jens answer to the question regardless of my posting zip files. Thanks for getting me on track! This is why I love experts exchange!

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Before you approach an Ionic Mobile App development company for developing mobile apps using the ionic framework, you must know why you should choose the framework. Let's try to understand that through this article.
An ASP.NET Web Form User Control is not newly introduced in ASP.NET. In fact, it was an old technology yet still playing a role to generate web content, especially when we want to use it to have a better and easy way to control part of the web conte…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

627 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