Hello

 

I am trying to follow this tutorial, the author is going throw the building of a content slider such as this:

 

 

However my slider is a bit different, here is what mine looks like:

 

 

I have copied and pasted his jQuery code to my page, but it is no surprise that it doesn't work.

 

Can someone please tell me how I'd get it to work on mine.

 

Thank You.

 

PS. My HTML is solid, and exactly same structure as his.

So that you get an idea of the HTML, here is a screenshot from Firebug:

 

 

I have a slider waiting on that right of the current one that is showing.

Without your version (not just screenshots), we can't tell what is going on... just guess.

 

Its kinda like asking a mechanic on the phone what is wrong with your car, and expecting him to give you a 100% accurate answer.

Hello Cibgraphics.

 

You're right.

 

Here is the HTML:

 

<div id="feature">
               <div id="slidesContainer">
                   <div class="slide">
                       <img src="Content/images/JZen.jpg" alt="Image" class="featuredImage"/>
                       <h2>KURDISH FORUM</h2>
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque ligula, scelerisque sit amet tempus id, varius eu eros. Suspendisse potenti. Sed a felis odio. Aliquam eu dui est.</p>
                       <p id="details">interface + design + css/xhtml</p>

                       <div class="featbuttons">
                           <div class="btn">
                               <a href="#">Prev</a> | <a href="#">Next</a>
                           </div><!-- end button -->

                           <div class="btn">
                               <a href="Portfolio.aspx">View Portfolio</a> <img src="Content/images/play.jpg" alt="Play Button Graphic" />
                           </div><!-- end button -->
                       </div><!-- end featbuttons -->

                   </div><!-- end slide -->

                   <div class="slide">
                       <img src="Content/images/JZen.jpg" alt="Image" class="featuredImage"/>
                       <h2>MED-ONE</h2>
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque ligula, scelerisque sit amet tempus id, varius eu eros. Suspendisse potenti. Sed a felis odio. Aliquam eu dui est.</p>
                       <p id="P1">interface + design + css/xhtml</p>

                       <div class="featbuttons">
                           <div class="btn">
                               <a href="#">Prev</a> | <a href="#">Next</a>
                           </div><!-- end button -->

                           <div class="btn">
                               <a href="Portfolio.aspx">View Portfolio</a> <img src="Content/images/play.jpg" alt="Play Button Graphic" />
                           </div><!-- end button -->
                       </div><!-- end featbuttons -->

                   </div><!-- end slide -->

               </div><!-- end slidesContainer -->

           </div><!-- end feature -->

 

And here is the jQuery further above the page:

 

<script type="text/javascript">

   $(document).ready(function () {
       var currentPosition = 0;
       var slideWidth = 760;
       var slides = $('.slide');
       var numberOfSlides = slides.length;

       // Remove scrollbar in JS
       $('#slidesContainer').css('overflow', 'hidden');

       // Wrap all .slides with #slideInner div
       slides
       .wrapAll('<div id="slideInner"></div>')
       // Float left to display horizontally, readjust .slides width
       .css({
       'float': 'left',
       'width': slideWidth
       });

       // Set #slideInner width equal to total width of all slides
       $('#slideInner').css('width', slideWidth * numberOfSlides);

       // Hide left arrow control on first load
       manageControls(currentPosition);

       // Create event listeners for .controls clicks
       $('.control')
       .bind('click', function () {
       // Determine new position
       currentPosition = ($(this).attr('id') == 'rightControl')
       ? currentPosition + 1 : currentPosition - 1;

       // Hide / show controls
       manageControls(currentPosition);
       // Move slideInner using margin-left
       $('#slideInner').animate({
           'marginLeft': slideWidth * (-currentPosition)
       });
       });

       // manageControls: Hides and shows controls depending on currentPosition
       function manageControls(position) {
           // Hide left arrow if position is first slide
           if (position == 0) { $('#leftControl').hide() }
           else { $('#leftControl').show() }
           // Hide right arrow if position is last slide
           if (position == numberOfSlides - 1) { $('#rightControl').hide() }
           else { $('#rightControl').show() }
       }
   });


</script>

 

Thanks

can we also have the CSS plz?

 

Ta

or just link to the page if it's available. Far easier to see everything then

Hi Guys

 

Sorry I haven't got anywhere to put it up.

 

Here is the CSS:

 

#feature #slidesContainer {
 margin: 0 auto;
 padding: 22px 0 0 0;
 width: 760px;
 height: 232px;
 overflow: auto; /* allow scrollbar */
 position: relative;
}

#feature #slidesContainer .slide 
{
   margin: 0 auto;
   width: 740px;
   height: 232px;
}

#feature #slidesContainer .slide .featbuttons 
{
   bottom: 0;
   right: 123px;
   position: absolute;
}

try adding a left margin to the container div of the slider

Hmm you mean the div with the class of slide ?

 

Or the the div with the id of slidesContainer ?

 

Either way .. what would that achieve ? Right now I have no means of making the slides move ? my Next and Prev are linked to { # }

Hey guys It works !!

 

I added a class & and ID attribute to my anchor tags (Next & Prev) and they now work !

 

<a class="control" id="leftControl" href="#">Prev</a> | <a class="control" id="rightControl" href="#">Next</a>

 

The issue is, I have removed the manageControls function and calls in the jQuery script since my controls will always be visible. and now my script keeps moving to the right/left by distance of a slide even though there is nothing there to move onto !

 

Can someone please write me a function that would deal with this issue.

 

I want the slider to move back to the end of slides from either side when it someone is at the end and clicks Next or Prev.

 

I know the outline of the function, but not the details:

 

function  manageSlides (position){
 // position==0 is first slide
 if(position==0)  {
 // and $('#leftControl') is clicked > move to position numberOfSlides-1
 }
 else { 
 // do nothing .. it will work as it should
 }

 // numberOfSlides-1 is last slides
 if(position==numberOfSlides-1) {
 and $('#rightControl') is clicked > move to position==0
 }
 else { do nothing .. it should work as before }
}

 

can someone please turn that into proper code.

 

Thanks

You've got the basic idea there so why not try and implement it?

 

I would recommend in future that you use a plugin such as jQuery cycle for standard stuff like this. No point in reinventing the wheel.

You've got the basic idea there so why not try and implement it?

 

I would recommend in future that you use a plugin such as jQuery cycle for standard stuff like this. No point in reinventing the wheel.

 

LOL Thanks I know I'm close, but I never seem to get the courage to go that extra step of implementation.

 

I get scared and think to myself " Listen you don't know this, so don't play with what you don't know .. it might mess up all the hard work you've done up to now "

 

And that is why I do not implement.

OK I tried and it isn't working ! infact it is broken now

 

It now slides, but the sliding is irregular, it slides 2 or 3 slides instead of one !

 

Here is what I've got

 

function manageSlides(position) {
           // position==0 is first slide
           if ((position == 0) && ($('#leftControl').click())) {
               // and $('#leftControl') is clicked > move to position numberOfSlides-1
               $('#slideInner').animate({
                   'marginLeft': slideWidth * (1)
               });
           }
           else {
               // do nothing .. it will work as it should
           }

           // numberOfSlides-1 is last slides
           if ((position == numberOfSlides - 1) && ($('#rightControl').click())) {
               $('#slideInner').animate({
                   'marginLeft': slideWidth * (-currentPosition)
               });
           }
           else { }
       }

 

I don't know if my If statement conditions are correct !