Slideshow Slider [JQuery & HTML]

LostBoy101 · 02-12-2013 08:03PM #1

Hey lads I managed to my slideshow working with CSS but I want to ensure that it slides automically.

I've taken the code from a comment section of the website I got the code from. (It's on page 3 of the comments section halfway)

http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/

Apparently I added in the JQuery code into the head section so I presume I'm missing plugins?

Here is a live verision of my website. It's on the homepage.

P.S It's a 1st year college project.

HTML code

<html>
<head>
<title></title>


<link href="css/style-slideshow.css" rel="stylesheet" type="text/css" />

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

<script type="text/javascript" src="JavaScript/Slider.js"></script>

</head>
<body>



<section class="cr-container">

<script src="JavaScript/Slider.js"></script>


<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1"></label>

<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2"></label>

<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3"></label>

<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4"></label>



<div class="clr"></div>
<div class="cr-bgimg">
<div>
<span>Slice 1 - Image 1</span>
<span>Slice 1 - Image 2</span>
<span>Slice 1 - Image 3</span>
<span>Slice 1 - Image 4</span>
</div>
<div>
<span>Slice 2 - Image 1</span>
<span>Slice 2 - Image 2</span>
<span>Slice 2 - Image 3</span>
<span>Slice 2 - Image 4</span>
</div>
<div>
<span>Slice 3 - Image 1</span>
<span>Slice 3 - Image 2</span>
<span>Slice 3 - Image 3</span>
<span>Slice 3 - Image 4</span>
</div>
<div>
<span>Slice 4 - Image 1</span>
<span>Slice 4 - Image 2</span>
<span>Slice 4 - Image 3</span>
<span>Slice 4 - Image 4</span>
</div>
</div>


<div class="cr-titles">
<h3>
<span></span>
<span>Welcome to Nolans Merecedes-Benz Garage</span>
</h3>

<h3>
<span></span>
<span>New SLS AMG "Where speed matters"</span>
</h3>
<h3>
<span></span>
<span>New S-Saloon "The Business Car"</span>
</h3>
<h3>
<span></span>
<span>New A-Class "Drive with style"</span>
</h3>
</div>

</section>


</body>
</html>

JQuery Code

var $j = jQuery.noConflict();
var i = 2; // First image switch to second image

function switchImage()
{
$j(“.current”).removeAttr(‘checked’);
$j(“.current”).removeClass(‘current’);

$j(“#select-img-”+i).addClass(‘current’);
$j(“#select-img-”+i).attr(‘checked’, true);

if (i==4)
{
i=1; // Return to image 1
}
else
{
i++; // Next Image
}
}

$j(document).ready(function(){ //Start loop every 3.5 seconds (3500 miliseconde)
setInterval(‘switchImage();’, 3500);
});

myIdea · 03-12-2013 11:38AM

Replace your JQuery Code with this:
[PHP]
$(function () {
var $AutoCheckImages = $('input[name="radio-set-1"]');
(function _loop(idx) {
$AutoCheckImages.prop('checked', false).eq(idx).prop('checked', true);
setTimeout(function () {
_loop((idx + 1) % $AutoCheckImages.length);
}, 3500);
}(0));
});
[/PHP]

...any questions?

LostBoy101 · 03-12-2013 07:47PM

myIdea wrote: »

Replace your JQuery Code with this:
[PHP]
$(function () {
var $AutoCheckImages = $('input[name="radio-set-1"]');
(function _loop(idx) {
$AutoCheckImages.prop('checked', false).eq(idx).prop('checked', true);
setTimeout(function () {
_loop((idx + 1) % $AutoCheckImages.length);
}, 3500);
}(0));
});
[/PHP]...any questions?

Wow.. thanks a lot for that! Just wondering would you know any decent youtube/website tutorials on JavaScript or JQuery?

Slideshow Slider [JQuery & HTML]

Comments