Resize using the slider

Question

I have a gallery using the coin slider

var $jq = jQuery.noConflict(); $jq(window).load(function() { var imheight = $jq(window).height()-40; var imwidth = imheight / 1.5; $jq('#placeholder').css({'width':imwidth+'px','height':imheight+'px','margin-left':'-'+imwidth/2+'px','margin-top':'-'+imheight/2+'px'}); $jq('#vslider').coinslider({ width:imwidth, height:imheight, spw: 6, sph: 4, delay: 2500, sDelay: 30, opacity: 0.7, titleSpeed: 1500, effect: '', navigation: false, links : true, hoverPause: false, stopAtLastSlide: true }); }) 

And HTML:

 <div id="placeholder"> <div id="vslider"> <a href="/main"><img src="/preload/2.jpg" alt="701" /></a> <a href="/main"><img src="/preload/1.jpg" alt="563" /></a> </div> </div> 

Deploy a divider with the correct width and height.
But vslider does not change its size.
What could it be?

Answer 1

I had problems trying to do the same. After a lot of digging, I found how to do it.

Suppose you have the following slide panel:

  <div id="banner_slideshow"> <a href="#1"> <img src="header-image-bg1.jpg" alt="" /> </a> </div> 

coin-slider will create a class called cs-<container-id> , in this case cs-banner_slideshow for each square that is used to draw the animation.

It actually removes the <img> that you put, and replaces it with a background equivalent image.

So basically all you have to do is put this in your .js :

 $('#banner_slideshow').coinslider({ width: 1000, // width of slider panel height: 350, // height of slider panel }); // Resize picture. $('.cs-banner_slideshow').css('background-size', '1000px 350px'); 

(You can also do this in a .css file, but I find it more suitable for a javascript file because it refers to the internal implementation of the coin acceptor, and I don't want this in style files).

And in your .css :

 #banner_slideshow { background-repeat: no-repeat; background-size: 1000px 350px; }