question
i have banner shows client testimonials.
the next button fades out current li element , fades in next li element.
the previous button reverse.
however, if have difference in height between 2 slides, height of container changes.
how can transition smoother, height changing in similar way using animate()?
code
var n = 1; $("ul.banner_testi>li").each(function() { $(this).attr("data-banner", n); n++; }); $("ul.banner_testi>li").slice(1).hide(); $(".testi.next").click(function() { var tt = parseint($("ul.banner_testi>li:last").attr("data-banner")); var tb = parseint($("ul.banner_testi>li:visible:first").attr("data-banner")); var nb = tb + 1; if (nb > tt) { nb = 1; } $("ul.banner_testi>li[data-banner='" + tb + "']").fadeout(250); settimeout(function() { $("ul.banner_testi>li[data-banner='" + nb + "']").fadein(); }, 251); }); $(".testi.prev").click(function() { var tt = parseint($("ul.banner_testi>li:last").attr("data-banner")); var tb = parseint($("ul.banner_testi>li:visible:first").attr("data-banner")); var nb = tb - 1; if (nb === 0) { nb = tt; } $("ul.banner_testi>li[data-banner='" + tb + "']").fadeout(250); settimeout(function() { $("ul.banner_testi>li[data-banner='" + nb + "']").fadein(); }, 251); });a.unslider-arrow { position: absolute; left: 10px; color: white; z-index: 2; text-shadow: none; opacity: 0.5; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; transition: opacity .5s; top: calc(50% - 12px); font-size: 24px; line-height: 24px; } a.unslider-arrow:hover { opacity: 1; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; transition: opacity .2s; } a.unslider-arrow.next { right: 10px; left: auto; } .testimonials { background: #333; color: #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset; width: 100%; max-width: 100%; position: relative; padding: 50px 30px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .testimonials ul { width: 100%; max-width: 1080px; margin: auto; position: relative; } .testimonials ul li { margin: 20px 50px auto; font-size: 16px; font-style: italic; text-shadow: 0 1px 1px #000; color: #eee; } .testimonials ul li span { display: block; color: #ccc; font-size: 12px; text-transform: uppercase; text-align: right; font-style: normal; font-weight: normal; margin-top: 1em; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="testimonials"> <ul class="banner_testi"> <a href="javascript:void(0)" class="unslider-arrow prev testi"><</a> <a href="javascript:void(0)" class="unslider-arrow next testi">></a> <li>one line quote<span>client name</span> </li> <li>three <br>line <br>quote<span>client name</span> </li> <li>two line <br>quote<span>client name</span> </li> </ul> </div>
just give min-height ul. adjust way want keep in mind min-height has size of biggest item.
since don't know biggest element see biggest 1 via javascript with:
var maxheight=0; $(".banner_testi li").each(function () { $this = $(this); if ( $this.outerheight() > maxheight ) { maxheight=$this.outerheight(); } }); and set height elements:
$(".banner_testi li").height(maxheight); var n = 1; var maxheight=0; $(".banner_testi li").each(function () { $this = $(this); if ( $this.outerheight() > maxheight ) { maxheight=$this.outerheight(); } }); $(".banner_testi li").height(maxheight); $("ul.banner_testi>li").each(function() { $(this).attr("data-banner", n); n++; }); $("ul.banner_testi>li").slice(1).hide(); $(".testi.next").click(function() { var tt = parseint($("ul.banner_testi>li:last").attr("data-banner")); var tb = parseint($("ul.banner_testi>li:visible:first").attr("data-banner")); var nb = tb + 1; if (nb > tt) { nb = 1; } $("ul.banner_testi>li[data-banner='" + tb + "']").fadeout(250); settimeout(function() { $("ul.banner_testi>li[data-banner='" + nb + "']").fadein(); }, 251); }); $(".testi.prev").click(function() { var tt = parseint($("ul.banner_testi>li:last").attr("data-banner")); var tb = parseint($("ul.banner_testi>li:visible:first").attr("data-banner")); var nb = tb - 1; if (nb === 0) { nb = tt; } $("ul.banner_testi>li[data-banner='" + tb + "']").fadeout(250); settimeout(function() { $("ul.banner_testi>li[data-banner='" + nb + "']").fadein(); }, 251); });a.unslider-arrow { position: absolute; left: 10px; color: white; z-index: 2; text-shadow: none; opacity: 0.5; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; transition: opacity .5s; top: calc(50% - 12px); font-size: 24px; line-height: 24px; } a.unslider-arrow:hover { opacity: 1; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; transition: opacity .2s; } a.unslider-arrow.next { right: 10px; left: auto; } .testimonials { background: #333; color: #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset; width: 100%; max-width: 100%; position: relative; padding: 50px 30px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .testimonials ul { width: 100%; max-width: 1080px; margin: auto; position: relative; } .testimonials ul li { margin: 20px 50px auto; font-size: 16px; font-style: italic; text-shadow: 0 1px 1px #000; color: #eee; } .testimonials ul li span { display: block; color: #ccc; font-size: 12px; text-transform: uppercase; text-align: right; font-style: normal; font-weight: normal; margin-top: 1em; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="testimonials"> <ul class="banner_testi"> <a href="javascript:void(0)" class="unslider-arrow prev testi"><</a> <a href="javascript:void(0)" class="unslider-arrow next testi">></a> <li>one line quote<span>client name</span> </li> <li>three <br>line <br>quote<span>client name</span> </li> <li>two line <br>quote<span>client name</span> </li> </ul> </div>edit: added function calculate biggest height , set elements.
Comments
Post a Comment