CODEWITHSUNDEEP
javascriptsliderheightslidesjs
user3101431
user3101431

Reputation: 407

SlidesJS setting the height of slidesjs-container to the height of the slide?

I am using SlidesJS for a slider on my website. I am wanting to make the height and width of each slide match the height and width of the current image. For this, I need to make the elements slidesjs-container and slidesjs-control pull the height of the current image in the slider. I've managed to get the images within the slides to adjust height/width automatically based on the dimension of the actual file, but now I have a lot of white space beneath my slider and the next content section because the container is still pulling the height from the element that contains the slider.

Can anyone help me figure out how to set the height of slidesjs-container and slidesjs-control to match the height of the current image?

Here's the javascript which sets the height of the container/control elements:

Plugin.prototype.update = function() {
      var $element, height, width;
      $element = $(this.element);
      this.data = $.data(this);
      $(".slidesjs-control", $element).children(":not(:eq(" + this.data.current + "))").css({
        display: "none",
        left: 0,
        zIndex: 0
      });
      width = $element.width();
      height = (this.options.height / this.options.width) * width;
      this.options.width = width;
      this.options.height = height;
      return $(".slidesjs-control, .slidesjs-container", $element).css({
        width: width,
        height: height
      });
    };

Upvotes: 1

Views: 3889

Answers (2)

Eyad Eyadian
Eyad Eyadian

Reputation: 101

In your jquery.slides.min.js file, replace this:

n=this.options.height/this.options.width*r

with:

n=this.options.height

Upvotes: 1

jd720
jd720

Reputation: 1

I had a similar problem, but needed to alter the container height. I something like this:

    $("#slides").slidesjs({
        //other options here
        callback: {
            loaded: function(number) {
                $(".slidesjs-container").css("height", height);
            }
        }
    });

Upvotes: 0

Related Questions