mrmills129 mrmills129 - 6 months ago 34
SQL Question

modify jquery slideshow code to autoplay

I found some code in an article on daniweb.com for a jquery slideshow and got it working pulling data from mysql. I want to modify it so the slide changes automatically every 5 seconds or so, instead of having to click the buttons but don't know how to modify this code to do that...

Here's the current code: It uses a mysql database and php to pull used car info from a table and then display in a slideshow. The idea is to run this on a rasPi with a 7-10" display at our cashier counter or waiting room for customers to see...

Any help would be greatly appreciated, thank you!



$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 950;
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);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// 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() }
}


});

* {
font-family:Arial;

}

body {
width:800px;
height:572px;
background:linear-gradient(#117dc8,#15527c);

}

.header {
color:white;
font-size:28px;
margin-left:20px;
margin-top:10px;
}

.logo {
position:absolute;
margin-left:720px;
margin-top:-30px;
z-index:10;
width:250px;

}

.container {
position:relative;
background-color:#fafafa;
width:940px;
height:480px;
border-radius:10px;
margin-top:10px;
margin-left:6px;
padding:5px;
z-index:6;

}

#carDisplay {
width:915px;
height:455px;
padding:10px;
border:none;

}

.contact {
position:absolute;
color:white;
margin:15px 80px;
font-size:20px;

}

* {
font-family:Arial;

}

#cert {
color:#e3001b;

}

.cartitle {
font-size:30px;
margin-left:10px;

}

.stock {
font-size:14px;
font-size:18px;
color:#999;
margin-left:10px;

}

.carimg {
width:480px;
padding:5px;
margin-left:10px;
box-shadow:0px 2px 5px 1px #bbb;

}

.details {
padding:30px;
font-size:25px;

}

.price {
font-size:35px;
font-weight:bold;
color:#333;
text-align:center;
margin-top:-20px;
margin-bottom:10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Used Car New Arrivals</title>

<link rel="stylesheet" href="css/mainstyle.css">
<link rel="stylesheet" href="css/framestyle.css">

<script src="jscript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

</head>
<body>

<div class="header"><i>Used Car New Arrivals | </i><span style="font-size:20px;">Falmouth Toyota</span></div>
<img class="logo" src="ft-logo.png" />

<div class="container">

<?php

$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "usedcars";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT * FROM usedcars";
$result = mysqli_query($conn, $sql);
$num = mysql_num_rows($result);

if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {

echo "<div id='slideshow'>
<div id='slidesContainer'>
<div class='slide'>

<table class='tableStyle'>

<tr>
<td colspan='2'><div class='stock'>Stock: " . $row["stock"] ."</div></td>
</tr>
<tr>
<td colspan='2'><div class='cartitle'><b><span id='cert'>" . $row["certified"] . "</span> " . $row["preowned"]. " " . $row["year"] . " " . $row["make"] . " " . $row["model"] . " " . "</b><span style='font-size:18px;color:#999;'> - " . number_format($row["mileage"]) . " miles</span></div></td>
</tr>
<tr>
<td colspan='2'><hr /></td>
</tr>
<tr>
<td><img class='carimg' src='" .$row["img"] . "' /></td>
<td class='details'><div class='price'>Price: $" . number_format($row["price"]) ."</div><br>
<hr style='margin-top:-25px;'/>
<b>Vehicle Features</b>
<ul>
<li>" . $row["feat1"] . "</li>
<li>" . $row["feat2"] . "</li>
<li>" . $row["feat3"] . "</li>
<li>" . $row["feat4"] . "</li>
</ul>
</td>
<tr>
</table>

</div>
</div>
</div>";
}
}


else {
echo "<span>No images available</span>";
}

mysqli_close($conn);
?>

</div>

<div class="contact">VISIT OUR SHOWROOM FOR MORE INFORMATION ON ANY OF THESE VEHICLES</div>

</body>

<script src="jscript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>


</html>




Answer

Try adding the following code inside a script tag. Feel free to change the slide change duration as per your requirement.

Here 5000 means 5*1000 milli seconds, which is 5 seconds.

window.setInterval(function() {
    $('#rightControl.control').click();
}, 5000);

Accept this answer if it helps.

Update: Playing the slideshow continuously (looping)

Note: Replace the existing animate function with the below snippet

$('#slideInner').animate({
    'marginLeft' : slideWidth*(-currentPosition)
}, function() {
    // if last slide then move the pointer to 1st slide
    if(currentPosition == numberOfSlides-1) {
        currentPosition = -1;
    }
});
Comments