I'm really new to Jquery and most of this code isn't mine, I'm just using it as a learning tool for creating sliders. If someone could give me some guidance on how to make this slider work automatically when the page loads, that would be greatly appreciated. Also, as an added request, is there a way to configure the slider so that when slide_index equals 16, the slide rotates normally instead of rotating backwards all the way back to the first image? Thanks! :)
My HTML:
<html>
<body>
<div class="slider">
<ul>
<li>
<img src="img1.jpg" />
</li>
<!-- The rest of the images -->
</ul>
<button class="prev">Prev</button>
<button class="next">Next</button>
</div>
</body>
</html>
CSS:
.slider {
width: 60%;
overflow: hidden;
height: 607px;
position: relative;
border: 5px #000000 solid;
margin-left: 20%;
}
.slider ul {
/* Styling for the slider */
}
.slider li {
/* Styling for the list items in the slider */
}
.slider li img {
/* Styling for the images inside the list items */
}
.slider button {
/* Button styling */
}
.slider button.prev {
/* Previous button styling */
}
.slider button.next {
/* Next button styling */
}
JQuery:
// JQuery function for slider
$(function() {
// Variables initialization for the slider
var ul = $(".slider ul");
var slide_count = ul.children().length;
var slide_width_pc = 100.0 / slide_count;
var slide_index = 0;
// Slider functionality implementation
ul.find("li").each(function(indx) {
// Setting up individual CSS properties for each slide
});
// Implementing automatic sliding feature
setInterval(function() {
console.log("prev button clicked");
slide(slide_index - 1);
}
function() {
slide(slide_index + 1);
if (slide_index == 16) {
slide(slide_index == 0);
ul.animate({
"margin-left": margin_left_pc;
}, 400);
}
},500 );
// Function for sliding between images
function slide(new_slide_index) {
// Slide logic here
});