Solved

Jquery Slider

Posted on 2013-12-05
4
408 Views
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.
Plan-Pages.zip
0
Comment
Question by:fadercreep
4 Comments
 
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
0
 
LVL 23

Accepted Solution

by:
Jens Fiederer earned 500 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
0
 

Author Closing Comment

by:fadercreep
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!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
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).

789 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