Click here to Skip to main content
15,436,928 members
Please Sign up or sign in to vote.
3.12/5 (7 votes)
Hi coders,

I am doing simple images with sliding using Jquery.

Here My requirement is:
3 images should round trip like
I have 3 slides slide1,slide2 and slide3

when I click next in slide1, slide2 will come from right side.(working)
When I click next in slide2, slide3 will come from right side.(working)
when I click next in slide3, slide1 will come from right side.(not working)

This is reversal when I click previous button.

Below is my code:

JavaScript
$(function () {
var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
//var numberOfSlides = slides.length;
slides.wrapAll('<div id="slidesHolder"></div>')
slides.css({ 'float': 'left'
});
$('#slideshow').prepend('<span class="nav" id="leftNav">Move Left</span>')
.append('<span class="nav" id="rightNav">Move Right</span>');
$('.nav').bind('click', function () {
    if(($(this).attr('id') == 'rightNav'))
    {
        if(currentPosition==0)
        {
        currentPosition=currentPosition + 1
        }
        else if(currentPosition==1)
        {
           currentPosition=currentPosition + 1
        }
        else if(currentPosition==2)
        {
           currentPosition=0
        }
    }
    if(($(this).attr('id') == 'leftNav'))
    {
if(currentPosition==0)
        {
        currentPosition=currentPosition +2
        }
else if(currentPosition==1)
        {
           currentPosition=currentPosition - 1
        }
        else if(currentPosition==2)
        {
           currentPosition=currentPosition - 1
        }
    }
    moveSlide();    
});
    
function moveSlide() {
$('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
};
});

And my Html code:
HTML
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide1.jpg" />
</div>
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide2.jpg" />
</div>
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide3.jpg" />
</div>
</div>
</div>

And my Css Code:
CSS
#slideshow {
position: relative;
}
#slideshow #slideshowWindow {
height: 257px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 500px;
}
#slideshow #slideshowWindow .slide {
height: 257px;
margin: 0;
padding: 0;
position: relative;
width: 500px;
}
#slideshow #slideshowWindow .slide .slideText {
background-image: url("http://www.webchief.co.uk//blog/simple-jquery-slideshow/greyBg.png");
background-repeat: repeat;
color: #FFFFFF;
font-family: Myriad Pro,Arial,Helvetica,sans-serif;
height: 130px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 130px;
width: 100%;
}
#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
color: #FFFFFF;
text-decoration: none;
}
#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
color: #FFFFFF;
margin: 10px 0 0 10px;
padding: 0;
}
.nav
{
display:block;
text-indent:-10000px;
position:absolute;
cursor:pointer;
}
#leftNav
{
top:223px;
left:320px;
width:94px;
height:34px;
background-image:url(http://www.webchief.co.uk/blog/simple-jquery-slideshow/previous.png);
background-repeat:no-repeat;
z-index:999;
}
#rightNav
{
top:225px;
left:450px;
width:53px;
height:26px;
background-image:url(http://www.webchief.co.uk/blog/simple-jquery-slideshow/next.png);
background-repeat:no-repeat;
z-index:999;
}


Here my problem is if I am in the last slide at this point of time if I click next button it should move left and first slide should come to the place from right side.
At the same time if I am in the first slide at this point of time if I click previous button it should move right and last slide should come to the place from left side.

This is not happening, please modify is any thing wrong in my code.
Posted
Updated 23-Oct-13 18:40pm
v8
Comments
CodeBlack 22-Oct-13 8:19am     CRLF
On which browser it is not working ? I have tested it with IE and Firefox in both browser it is working fine. Are you getting any error ?
D-Kishore 22-Oct-13 22:12pm     CRLF
here I am using chrome,I am not getting any error, if I am in the last slide at this point of time if I click next button it should move left and first slide should come to the place from right side. In this case When I click next last slide should move left and first slide should come from the right. In the above it is not happening when I click next in the last slide, last slide moving right and first slide coming from left.
Sunasara Imdadhusen 22-Oct-13 9:21am    
Is there any error?
D-Kishore 22-Oct-13 22:11pm     CRLF
I am not getting any error, if I am in the last slide at this point of time if I click next button it should move left and first slide should come to the place. In this case When I click next last slide should move left and first slide should come from the right. In the above it is not happening when I click next in the last slide, last slide moving right and first slide coming from left.

Yes finally, I finished it my self,
JavaScript
$(function () {
                var currentPosition = 0;
                var slideWidth = 500;
                var slides = $('.slide');
                var numberOfSlides = slides.length;

                slides.wrapAll('<div id="slidesHolder"></div>')
                slides.css({ 'float': 'left'
                });
                $('#slidesHolder').css('width', slideWidth * numberOfSlides);
                $('#slideshow').prepend('<span class="nav" id="leftNav">Move Left</span>')
.append('<span class="nav" id="rightNav">Move Right</span>');
               
                $('.nav').bind('click', function () {
                    if (($(this).attr('id') == 'rightNav')) {
                        if (currentPosition == 2) {
            $('#slidesHolder').css('marginLeft',-500)
                .children().first().appendTo('#slidesHolder');
        } else {
                            currentPosition = currentPosition + 1
                        }

                    }
                    if (($(this).attr('id') == 'leftNav')) {

                    if (currentPosition == 0) {

            $('#slidesHolder').css('marginLeft',-500)
                .children().last().prependTo('#slidesHolder');
        } else {
                            currentPosition = currentPosition - 1
                        }
                    }
                    moveSlide();
                });

                function moveSlide() {
                    $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
                };
            });
 
Share this answer
 
Yes finally, I finished it my self,
JavaScript
$(function () {
                var currentPosition = 0;
                var slideWidth = 500;
                var slides = $('.slide');
                var numberOfSlides = slides.length;

                slides.wrapAll('<div id="slidesHolder"></div>')
                slides.css({ 'float': 'left'
                });
                $('#slidesHolder').css('width', slideWidth * numberOfSlides);
                $('#slideshow').prepend('<span class="nav" id="leftNav">Move Left</span>')
.append('<span class="nav" id="rightNav">Move Right</span>');

                $('.nav').bind('click', function () {
                    if (($(this).attr('id') == 'rightNav')) {
                        if (currentPosition == 2) {
            $('#slidesHolder').css('marginLeft',-500)
                .children().first().appendTo('#slidesHolder');
        } else {
                            currentPosition = currentPosition + 1
                        }

                    }
                    if (($(this).attr('id') == 'leftNav')) {

                    if (currentPosition == 0) {

            $('#slidesHolder').css('marginLeft',-500)
                .children().last().prependTo('#slidesHolder');
        } else {
                            currentPosition = currentPosition - 1
                        }
                    }
                    moveSlide();
                });

                function moveSlide() {
                    $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
                };
            });
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900