I'm working with a code for a sliding banner. https://jsfiddle.net/r4ht890f/
Question 1) I'd prefer not to set the height via css for this section and let the javascript code actually control the height of the section. Is there an easy way to add to the javascript code where it detects the height of the tallest image and sets it somehow so that the image shows up on the page. Right now, nothing is showing up because the height isn't being detected.
Question 2) The only other thing I'd like to do to this script is for the last one to naturally go back to the first to form a loop rather than going back through all the old ones to get back to 1.
#images_holder {
float: left;
width: 100%;
}
#moving_part {
width: 100%;
}
#moving_part > div {
position: relative;
width: 100%;
height: auto;
float: left;
}
#moving_part > div img{
float: left;
width: 100%;
height: auto;
}
#prev, #next {
position: absolute;
cursor: pointer;
top: 47%;
display: none; /* hide initially */
-webkit-user-select: none;
user-select: none;
}
#next{
right: 0px;
}
#description{
color: #fff;
background: rgba(0,0,0,0.4);
text-align: center;
position: absolute;
padding: 15px;
right: 0;
left: 0;
display: none; /* hide initially */
}
/* EXTRA: navigation */
#navigation{
display: none; /* hide initially */
position:absolute;
width:100%;
bottom:0;
text-align:center
}
#navigation span{ /* created by jQuery*/
display:inline-block;
background: rgba(255,255,255,0.6);
cursor:pointer;
padding:4px 10px;
}
and here is the javascript
jQuery(function( $ ){
var efx = "slide", // "slide" || "fade"
animationTime = 600,
pauseTime = 4000,
$gal = $("#images_holder"),
$mov = $("#moving_part"),
$sli = $mov.find("> div"),
$btn = $("#prev, #next"),
$dsc = $("#description"),
$nav = $("#navigation"), // Our buttons parent
$navBtns, // Later, our SPAN buttons
spans = "",
w = $gal.width(),
n = $sli.length,
c = 0, // Counter // Start index
itv; // Interval
for(var i=0; i<n; i++) { // `n` is the number of slides!
spans += "<span>"+ (i+1) +"</span>";
}
// Finally append our generated buttons:
$nav.append( spans );
// Retrieve the created buttons and do something on click
$nav.find("span").on("click", function(){
c = $(this).index(); // Set our counter to the clicked SPAN index
anim(); // Animate. That easy.
});
// SETUP (fade or slide?)
$mov.width(w*n);
if(efx==="fade") $sli.css({position:"absolute", left:0}).fadeOut(0).eq(c).fadeIn(0);
function populateDescription() {
$dsc.text( $sli.eq(c).find("img").attr("alt") );
}
function anim() {
c = c<0 ? n-1 : c%n; // loop-back if exceedds
populateDescription();
if (efx==="fade") {
$sli.fadeOut(animationTime).eq(c).stop().fadeIn(animationTime);
}else if(efx==="slide") {
$mov.stop().animate({left: -c*w});
}
}
function auto() {
$btn.add($dsc).add($nav).stop().fadeOut(); // Hide UI
itv = setInterval(function(){
++c;
anim();
}, pauseTime);
}
function pause() {
$btn.add($dsc).add($nav).stop().fadeIn(); // Show UI
return clearInterval( itv );
}
$gal.hover(pause, auto);
$btn.on("click", function(){
c = this.id==="next" ? ++c : --c;
anim();
});
populateDescription();
auto();
});
<div id="images_holder"> <div id="moving_part"> <div> <a href="You-Belong"> <img src="images/For-Smithfield-Slider-600x232.png" srcset=" images/For-Smithfield-Slider-1000x387.png 1000w, images/For-Smithfield-Slider-1920x743.png 1920w, images/For-Smithfield-Slider-2880x1114.png 2880w " alt=""/> </a> </div> <div> <a href="You-Belong"> <img alt="" src="images/You-Belong-Here-Slider1.png"></a> </div> <div> <img alt="" src="images/Vision-Statement-01.png"> </div> </div> <div id="prev">PREV</div> <div id="next">NEXT</div> <div id="description">Test</div> <div id="navigation"></div> </div>
This is for an active project I am working on and for learning. I've never done anything like this before. Any assistance would be great!
