CODEWITHSUNDEEP
jqueryslider
user342391
user342391

Reputation: 7827

jQuery slider help

I am creating my own custom content slider and am wondering what the best way to go about it is using jQuery.

I want to have two buttons next/previous. When the user clicks next the current slide will slide to the left and the new slide will show.

How should I go about doing this in jQuery? I would use a plugin but they are so annoying when it comes to customization.

Code so far:

    <!--Main slider content-->
    <div class="contentslider_content" style=" float:left; width:890px; height:300px; border:1px solid #CCC; overflow:hidden;">

    <div class="contentslider_slides slide_1" style=" float:left; width:890px; height:300px; background-color:#0F3"></div>

    <div class="contentslider_slides slide_2" style=" float:left; width:890px; height:300px; background-color:#ccc"></div>

    <div class="contentslider_slides slide_3" style=" float:left; width:890px; height:300px; background-color:#ccc"></div>

    </div>
    <!--Main slider content-->

<button class="next">Next</button>

<button class="previous">Previous</button>

Upvotes: 1

Views: 348

Answers (2)

jwueller
jwueller

Reputation: 30996

This is my approach: http://jsfiddle.net/UpDcS/3/

What i am doing is (basically): All items are hidden by default and positioned absolutely in the viewport. I created two functions that wrap the logic of getting the next/previous element in the slideshow so it can be scrolled endlessly. The sliding is achieved by setting the new item to the left/right of the current item and moving both items by 100% to that side. After this, the (now) old item is hidden again. I hope you can figure out the details. This should be a pretty good starting point.

Upvotes: 1

yossi
yossi

Reputation: 3164

My answer is not about the JQ code itself - it's about the concept.

I made something similar myself by:

  1. Creating X elements, while X is the number of elements displayed at static point (assume 1) plus 2 more, one to the right and one to the left. I named them 'lefter'-'center'-'righter'
  2. Creating an array of elements with the content I want to display (html creation and JQ will collect it to an JS array)
  3. The buttons simply placing the innerHTML of the lefter,center and righter elements.
  4. then, the JS will choose one of two options:
    • moving left = resizing the lefter from 100% to 0(you can adda fade effect when it is at 5%..)
    • doing the same, but to the right.

And, as for customization.. it's almost 'style-free', just css it.

Hope I understood your question and it's answering it. Yossi

Upvotes: 0

Related Questions