Looking to create a CSS/jQuery slider that can be used multiple times on one HTML page.
I have a client who wants sliders as category links, but I'm struggling to get it working as a single slider on a page. Can someone review the code and point out what I might be doing wrong? I need help organizing the project efficiently.
If anyone could outline the steps to achieve this without providing actual code, I would greatly appreciate it.
var intervalid = {};
$(document).ready(function() {
function slide(elem) {
sliderid = $("#" + elem);
sliderid.find(".main_image").on("mouseover", function() {
$(this).find(".main-desc").css("display", "block");
});
sliderid.find(".main_image").on("mouseleave", function() {
$(this).find(".main-desc").css("display", "none");
});
intervalid[elem] = setInterval(slidecycle(elem), 4500);
}
function testcycle(elem) {
console.log("cycle");
}
function slidecycle(elem) {
sliderid = $("#" + elem);
var lastimage = sliderid.find(".imgs_holder > .image:last").hasClass("active");
var currentimage = sliderid.find(".imgs_holder > .image.active");
if (lastimage) {
var nextimage = sliderid.find(".image_thumb > .image:first")
} else {
var nextimage = sliderid.find(".imgs_holder > .image.active").next();
}
$(currentimage).removeClass("active");
$(nextimage).addClass("active");
var imgAlt = $(nextimage).find('img').attr("alt");
var imgSrc = $(nextimage).find('img').attr("src");
var imgTitle = $(nextimage).find('a').attr("href");
var imgDesc = $(nextimage).find('.desc').html();
var imgDescHeight = sliderid.find(".main_image").find('.main-desc').height();
$(nextimage).css("background-color", "#efefef");
sliderid.find(".main_image .main-desc").animate({
opacity: 0,
marginBottom: -imgDescHeight
}, 250, function() {
sliderid.find(".main_image .main-desc").html(imgDesc).animate({
opacity: 0.85,
marginBottom: "0"
}, 250);
sliderid.find(".main_image img").attr({
src: imgSrc,
alt: imgAlt,
name: imgAlt
});
});
}
slide("slider1");
slide("slider2");
});html {
font-family: arial;
font-size: 1em;
}
.imgs_holder {
width: 100%;
}
/* Additional styling */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow" id="slider1">
<!-- Slider content here -->
</div>
<div class="slideshow" id="slider2">
<!-- Slider content here -->
</div>