jquery cycle2 get width of current slide

Question

I am using jQuery Cycle2 plugin http://jquery.malsup.com/cycle2/demo/basic.php

I need to grab the width of the current slide/image and then use that to set the width of another element.

Each image may be a different width and I need a bar on top of the image to resize accordingly.

<div class="cycle-slideshow">
<img src="http://malsup.github.com/images/p1.jpg">
<img src="http://malsup.github.com/images/p2.jpg">
<img src="http://malsup.github.com/images/p3.jpg">
<img src="http://malsup.github.com/images/p4.jpg">
</div>

how can I get the width of the current/active slide?

Answer 1

You can take the hint that this plugin will add class active to current active image. So you can do like this to get your desired width:

var imgWidth = $(".cycle-slideshow").find("img.active").width();

then you can use this width value to set width for other element:

$("other element selector").width(imgWidth);

---

Edit

I assume HTML for your next and prev button look like this:

<div class="center">
    <a href="#" id="prev">Prev</a>
    <a href="#" id="next">Next</a>
</div>

Then you just need to do:

$("#prev, #next").on('click', function() {
    var imgWidth = $('.cycle-slideshow').find(".cycle-slide-active").width();
    $(".topbar").width(imgWidth); 
});