CODEWITHSUNDEEP
jquery
Nothing
Nothing

Reputation: 2642

SlideShow with next-previous jquery

I am trying to slideshow with next-previous button with jquery , I followed this sample then I tried to change from img to div but it did not work, Here is my code :

<% _.each(items, function(item) {
  if (i < 10){ i++; } else { return false; } %>
     <div class="divRecentItem">
            <div style="height:90px; overflow: hidden; text-align: center;">
                <a href="#itemDetail/<%=item.ID%>">
                    <img src="<%=item.PictureName%>" alt="Item" width="60px">
                </a>
            </div>
            <div style="text-align: center">
                <a href="<%=item.ID%>"><%=item.Name%></a>
            </div>
            <div style="text-align: center">
                <%=item.PriceShow%>
            </div>
        </div>
<% }); %>
 <img src="http://annhowardesign.com/images/arrowright.jpg" class="next" alt="Next"/>
 <img src="http://annhowardesign.com/images/arrowleft.jpg" class="prev" alt="Previous"/>


 $('.divRecentItem .divRecentItem:gt(0)').hide();

 $('.next').click(function() {
     $('.divRecentItem .divRecentItem:first-child').fadeOut().next().fadeIn().end().appendTo('.divRecentItem');
 });

 $('.prev').click(function() {
     $('.divRecentItem .divRecentItem:first-child').fadeOut();
     $('.divRecentItem .divRecentItem:last-child').prependTo('.divRecentItem').fadeOut();
     $('.divRecentItem .divRecentItem:first-child').fadeIn();
 });

Upvotes: 0

Views: 128

Answers (1)

TimSPQR
TimSPQR

Reputation: 2984

I think I got it.

FIDDLE

Relevant JS

$('.img-wrap img:gt(0)').hide();
$('.footertext span:gt(0)').hide();
$('.footerprice span:gt(0)').hide();

$('.next').click(function () {
   $('.img-wrap img:first-child').fadeOut().next().fadeIn().end().appendTo('.img-wrap');
   $('.footertext span:first-child').hide().next().show().end().appendTo('.footertext');
   $('.footerprice span:first-child').hide().next().show().end().appendTo('.footerprice');
});

$('.prev').click(function () {
    $('.img-wrap img:first-child').fadeOut();
    $('.img-wrap img:last-child').prependTo('.img-wrap').fadeOut();
    $('.img-wrap img:first-child').fadeIn();

    $('.footertext span:first-child').hide();
    $('.footertext span:last-child').prependTo('.footertext').hide();
    $('.footertext span:first-child').show();

    $('.footerprice span:first-child').hide();
    $('.footerprice span:last-child').prependTo('.footerprice').hide();
    $('.footerprice span:first-child').show();

});

It's not perfect by any means, but at least it will give you a start.

The 'teaching point' or the "Eureka" moment for me was realizing that all of the images/text were in a div and kept in a div - just variously hidden(fadeout for img) and shown(fadein for img).

It was a good exercise - I learned a lot. Thanks for the question!

Upvotes: 1

Related Questions