auto slider show not sliding

Question

0.00/5 (No votes)

See more:

I copied from jsfiddle http://jsfiddle.net/samuelmac/EPXuH/[^]
but not working for me.

XML

<body>
    <form id="form1" runat="server">
<ul id="rotator">
    <li class="show">
        <a href="#" title="Title Two">
        <img src="http://farm3.staticflickr.com/2726/5796023872_9dc05a3b24.jpg" alt="some alt text" width="500" height="500" />
        <span class="rotator-caption">Caption One</span>
        </a>
    </li>
    <li class="hide">
        <a href="#" title="Title Two">
        <img src="http://farm7.staticflickr.com/6238/6362150571_5268f71c2f.jpg" alt="some more alt text" width="500" height="500" />
        <span class="rotator-caption">Caption Two</span>
        </a>
    </li>
    <li class="hide">
        <a href="#" title="Title Two">
        <img src="http://farm3.staticflickr.com/2726/5796023872_9dc05a3b24.jpg" alt="some more alt text" width="500" height="500" />
        <span class="rotator-caption">Caption Two</span>
        </a>
    </li>
</ul>

    </form>
</body>

CSS

<style>
#rotator {
    height: 580px;
    width: 900px;
    float: left;
    position: relative;
    padding: 0px;
    margin: 0px;
}
#rotator li {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0px;
}
#rotator li img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
}
#rotator li span.rotator-caption {
    display: block;
    position: absolute;
    bottom: 40px;
    float: right;
    right: 35px;
    font-size: 3.2em;
    width: auto;
    height: auto;
    z-index: 20;
    padding-left: 40px;
    color:#fff;
    line-height: 1.3em;
}
.show,
.show * {
    display: block !important;
}
.hide,
.hide * {
    display: none !important;
}
</style>

XML

</style>
<script type="text/javascript">
    var config = {
        speed: 4000,
        rotateid:'#rotator'
    };

    $(document).ready(function() {

        $(config.rotateid).each(function() {
            if ($(this).children().length > 1) {
                BeginSlideshow();
            }
        });
    });

    function BeginSlideshow() {
        $(config.rotateid + 'li').css({ opacity: 0.0 });
        $(config.rotateid + 'li:first').css({ opacity: 1.0 });

        if ($(config.rotateid + 'li').length > 0) {
            setInterval('RotateSlides()', config.speed);
        }
    }
    function RotateSlides() {
        var current = ($(config.rotateid + 'li.show') ? $(config.rotateid + 'li.show') : $(config.rotateid + 'li:first'));
        var next = ((current.next().length) ? current.next() : $(config.rotateid + ' li:first'));

        next.css({ opacity: 0.0 })
                    .addClass('show')
                    .animate({ opacity: 1.0 }, 1000)
                    .removeClass('hide');

        current.animate({ opacity: 0.0 }, 1000, function() {
            $(this).addClass('hide');
        }).removeClass('show');
        var index = $('ul' + config.rotateid + 'li.show').index();
    }
</script>

</head>

Posted 6-Dec-14 23:29pm

S.Rajendran from Coimbatore

Add a Solution

Comments

Kornfeld Eliyahu Peter 7-Dec-14 5:31am

'Not working' is a poor definition of any problem...Please describe in more details what went wrong...

S.Rajendran from Coimbatore 7-Dec-14 5:53am

Only the first 'show' image is shown and the other two are not appearing after hiding the previous image. It seems javascript is not getting activated.

Kornfeld Eliyahu Peter 7-Dec-14 5:55am

If you think JavaScript doesn't working do these things:
1. Check again the sample you may missed some code
2. Debug JS with your browser to see what actually happening...

S.Rajendran from Coimbatore 7-Dec-14 6:07am

I checked with the sample. everything is OK.
My browser being chrome I used 'ctrl+shift+i' for debugger.
I find no difference. The first image as it is is only getting displayed.

Kornfeld Eliyahu Peter 7-Dec-14 6:10am

Do you have jQuery included in your page?

S.Rajendran from Coimbatore 7-Dec-14 6:18am

Yes, latestly after submitting the code I also included the Jquery and tried like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Kornfeld Eliyahu Peter 7-Dec-14 11:48am

That's very interesting...I took the code from jsfiddle and copied into an html page, added jquery and all works like charm...

Kornfeld Eliyahu Peter 7-Dec-14 12:10pm

Please check the order of the jQuery line and the script block...
jQuery must come first!

S.Rajendran from Coimbatore 8-Dec-14 0:07am

the jquery is actually before the script but no effect.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Ishpreet Kaur · Accepted Answer · 2014-12-07T05:44:00

Try as following.
It will work. I tried the code at my local, then it was not working.
But now it is working, if we write script within body tag:

<head>
<style>
#rotator {
	height: 580px;
	width: 900px;
	float: left;
	position: relative;
	padding: 0px;
	margin: 0px;
}
#rotator li {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	display: block;
	margin: 0px;
}
#rotator li img {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 10;
}
#rotator li span.rotator-caption {
	display: block;
	position: absolute;
	bottom: 40px;
	float: right;
	right: 35px;
	font-size: 3.2em;
	width: auto;
	height: auto;
	z-index: 20;
	padding-left: 40px;
	color:#fff;
	line-height: 1.3em;
}
.show,
.show * {
	display: block !important;
}
.hide,
.hide * {
	display: none !important;
}
</style>

</head>
<body>
    <form>
<ul id="rotator">
	<li class="show">
        <a href="#" title="Title Two">
		<img src="http://farm3.staticflickr.com/2726/5796023872_9dc05a3b24.jpg">

alt="some alt text" width="500" height="500" />
		Caption One
        </img></a>
	</li>
	<li class="hide">
        <a href="#" title="Title Two">
		<img src="http://farm7.staticflickr.com/6238/6362150571_5268f71c2f.jpg">

alt="some more alt text1" width="500" height="500" />
		Caption Two
        </img></a>
	</li>
    <li class="hide">
        <a href="#" title="Title Two">
		<img src="http://farm7.staticflickr.com/6238/6362150571_5268f71c2f.jpg">

alt="some more alt text" width="500" height="500" />
		Caption Two
        </img></a>
	</li>
</ul>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var config = {
	speed: 4000,
	rotateid: '#rotator'
};

$(document).ready(function () {

	$(config.rotateid).each(function () {
		if ($(this).children().length > 1) {
			BeginSlideshow();
		}
	});
});

function BeginSlideshow() {
	$(config.rotateid + ' li').css({ opacity: 0.0 });
	$( config.rotateid + ' li:first').css({ opacity: 1.0 });

	if ($(config.rotateid + ' li').length > 0) {
		setInterval('RotateSlides()', config.speed);
	}
}
function RotateSlides() {
	var current = ($(config.rotateid + ' li.show') ? $(config.rotateid + ' li.show') 

: $(config.rotateid + ' li:first'));
	var next = ((current.next().length) ? current.next() : $(config.rotateid + ' 

li:first'));

	next.css({ opacity: 0.0 })
			        .addClass('show')
			        .animate({ opacity: 1.0 }, 1000)
					.removeClass('hide');

    current.animate({ opacity: 0.0 }, 1000, function () {
        $(this).addClass('hide');
    }).removeClass('show');
	var index = $('ul' + config.rotateid + ' li.show').index();
}
</script>
</body>