javascript - Confusion regarding selectors in carousel/slider -
so i'm pretty new javascript/jquery. i've made website, changes color of frame depending on select carousel/slider.
everything operational, issue is, can't quite wrap head around how apply selector elements of carousel.
basically carousel looks this
what want do, is, i've set third border/frame hidden. now, whenever click left arrow element closest left switch hidden, while, image right of take it's position , hidden image appear.
the opposite goes right, i've made this:
so working expected, issue is, work once (mainly because don't know selector use).
to put things context, html (specifically carousel) looks this
<div id="selector"> <img id="goleft" src="images/left.png" /> <div> <img id="blue" src="images/shot-blue.png" /> <img id="yellow" src="images/shot-yellow.png" /> <img id="red" src="images/shot-red.png" /> </div> <img id="goright" src="images/right.png" /> </div>
nothing difficult
my jquery basic well
<script type="text/javascript"> $(document).ready(function() { //set last (red) image hidden $("#selector div img:last").hide(); // if click left, hide first 1 , show last 1 $("#goleft").click(function(){ $("#selector div img:first").hide('slow') $("#selector div img:last").show('slow') }); // similar right $("#goright").click(function(){ $("#selector div img:last").hide('slow') $("#selector div img:first").show('slow') }); }); </script>
only issue is, :first
, :last
selector literally select first , last image instead of first visible , last hidden element
so carousel stops working after first rotation (on both sides)
any idea how apply selector rotation endless?
the :first , :last selector literally select first , last image instead of first visible , last hidden element
you can use hidden , visible selector , use last , first methods of jquery:
$("#selector div img:hidden").first().show(); $("#selector div img:visible").last().hide();
update: note can not run these statements 1 after otherwise have jquery execute statements on not yet hidden. can prevent use callback function on show , hide this:
$("#selector div img:visible").last().hide('slow', function() { $("#selector div img:hidden").first().show('slow'); } );
here jsfiddle full implementation:
https://jsfiddle.net/4sh7cnub/
i used span css instead of images need change span img own case.
Comments
Post a Comment