jqueryimageresizesliderjquery-backstretch

How to have coinslider.js images resize with backstretch.js


I'm trying to have coinslider resize the images to 960 by 360. When I try it makes the slider itself 960x360 and not the image. So if I use an image that's 1920x1080, it'll only show the top-left portion of the picture rather than resizing it. I inpsected the element and found that coinslider was taking the images in the tags and adding it to the div style of background-image. I tried css and no luck, and I tried using backstretch on the div.

These aren't working :(

$('#coin-slider').coinslider({width: 960, height: 360});
$('#coin-slider').backstretch;

maybe I need a jquery .change event to detect when #coin-slider style tag changes and then to add

background-size: 960px 360px;

Not really sure how to do that and lost.


Solution

  • I'm just closing this post as I just make a new slider and had it compatible with backstretch.js. Coinslider was doing a bit too much on the page for backstretch to function and resize properly.