how go implementing indicator dots within fader clickable , function code have below. i.e., when corresponding dot clicked on, fades corresponding image bound to? have created dots, , can converted buttons clickability, how create function, , function be?
function cycleimages() { var $active = $('.image.active'); //get active tab var $next = $active.next().length > 0 ? $active.next() : $('.image:first'); //check next length if not present first .image div //fade out top image , remove active class in callback $active.animate({ opacity: '0' }, 400, function() { $active.removeclass('active') $next.animate({ opacity: '1' }, 400, function() { $next.addclass('active'); }) }); } // run every 5s setinterval(cycleimages, 5000);div.image div.caption { display: visible; position: absolute; overflow: hidden; z-index: 20; color: white; background-color: rgba(0,0,0,0.35); height: 20%; width: 100%; bottom: 0; } .fader { border-radius: 1em; height: 25vw; width: 74vw; max-height: 100%; min-height: 10vw; margin: 0 auto; border-left: 1.5em solid #aa917d; border-right: 1.5em solid #aa917d; position: relative; overflow: hidden; } .fader div.image img { display: block; width: 100%; margin: 0 auto; z-index: 1; position: absolute; } div.image img { z-index: 5; } div.image{ opacity:0; transition:all 1s ease-in; } div.image.active{ opacity:1; } div.image:not(.active){ display:none; } .dots { float: right; background-color: rgba(65,45,30,0.5); border: none; border-radius: .85vw; display: inline-block; height: .85vw; width: .85vw; margin: .2em .2em .2em .2em; } .dots.active { background-color: #aa917d; } .dot-container { width: 20%; float: right; margin-right: .5em }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fader"> <div class="image active"> <img class="" src="https://images.contentful.com/256tjdsmm689/2t0qekcvr6mssckukoyiws/b57d12107fc5eb635e294ed1c76cbbac/feature-gettyimages.jpg" alt="" style="height: 100%; width:auto; object-fit: contain"> <div class="caption"> <span class="image-info">lorem ipsum dolor sit amet</span> <div class="dot-container"> <span class="dots"></span> <span class="dots"></span> <span class="dots"></span> <span class="dots"></span> <span class="dots active"></span> </div> </div> </div> <div class="image"> <img class="" src="http://www.livemint.com/rf/image-621x414/livemint/period2/2016/04/09/photos/dnanocredit-kuac--621x414@livemint.jpg" alt="" style="height: 100%; width:auto; object-fit: contain"> <div class="caption"> <span class="image-info">lorem ipsum dolor sit amet</span> <div class="dot-container"> <span class="dots"></span> <span class="dots"></span> <span class="dots"></span> <span class="dots active"></span> <span class="dots"></span> </div> </div> </div> <div class="image"> <img class="" src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738ceb00000578-3504412-image-a-4_1458654503277.jpg" alt="" style="height: 100%; width:auto; object-fit: contain"> <div class="caption"> <span class="image-info">lorem ipsum dolor sit amet</span> <div class="dot-container"> <span class="dots"></span> <span class="dots"></span> <span class="dots active"></span> <span class="dots"></span> <span class="dots"></span> </div> </div> </div> <div class="image"> <img lass="" src="http://static.bigstockphoto.com/images/homepage/2016_bigstock_video.jpg" alt="" style="height: 100%; width:auto; object-fit: contain"> <div class="caption"> <span class="image-info">lorem ipsum dolor sit amet</span> <div class="dot-container"> <span class="dots"></span> <span class="dots active"></span> <span class="dots"></span> <span class="dots"></span> <span class="dots"></span> </div> </div> </div> <div class="image"> <img class="" src="http://media.tinmoitruong.vn/public/media/media/picture/03/kh4.jpg" alt="" style="height: 100%; width:auto; object-fit: contain"> <div class="caption"> <span class="image-info">lorem ipsum dolor sit amet</span> <div class="dot-container"> <span class="dots active"></span> <span class="dots"></span> <span class="dots"></span> <span class="dots"></span> <span class="dots"></span> </div> </div> </div> </div>
you need few things able navigate through slides dots:
- loop through dot elements, applying attribute each dot (a number, beginning @ 0 or 1) , incrementing 1 each dot.
- loop through images, applying attribute each images (a number, beginning @ 0 or 1) , incrementing 1 each dot. (just dots)
- adding on click event handler dots number attribute of particular dot , display image same number attribute.
- remove markup dots that's on each slide , instead have 1 set of dots slides (this require tweaking of html/css)
i recommend looking @ existing carousel has functionality better understanding of code. take @ blog post barrel titled "building responsive jquery carousel plugin scratch." has functionality you're looking for.
Comments
Post a Comment