Left aligned slides

[chaladm]

Hi,

I was seeing if someone can help me. I would like each slide image to be left:0px each so when I scroll down to mobile version it will focus on the left of the slide image

Thanks.

[chrisbradleyrun]

Did you work this out? I'm looking to have some images positioned left, and some right. Similar to how the css background-position property works.

[chaladm]

yes i did

I put the images in the css as left: 0px;

:)

[chrisbradleyrun]

Thanks! I'll give that a go.

[ghost]

I put the images in the css as left: 0px; Which css file? In superslides.css every value is in 0px by default. I'm looking to align to the bottom of the images. Thanks.

[chaladm]

message me the url of your dev site and i'll have a look

[ghost]

Thanks mate.

http://www.francescolepere.com/demo/html/concept/

That's the template.

[chaladm]

If you are trying to make it look like the attached.

Add these css.

slides {

z-index:90; } .navbar-default { z-index:100; }

[ghost]

I should've explained better. Sorry.

What happens now is that the slides are centered vertically. This means that when the responsiveness of the site kicks in, the images are cropped at the top and bottom.

In some slides, I need to keep the bottom of the image un-cropped. So I'm looking for a way to align the image to the bottom of the slideshow instead of it being centered.

The dev of the website said that I should look into the file jquery.superslides.js Particularly this part:

 `images: function() {
 var $images = that.$container.find('img')
                             .not(that.options.elements.preserve)

$images.removeAttr('width').removeAttr('height')
  .css({
    "-webkit-backface-visibility": 'hidden',
    "-ms-interpolation-mode": 'bicubic',
    "position": 'absolute',
    "left": '0',
    "top": '0',
    "z-index": '-1',
    "max-width": 'none'
  });

$images.each(function() {
  var image_aspect_ratio = that.image._aspectRatio(this),
      image = this;

  if (!$.data(this, 'processed')) {
    var img = new Image();
    img.onload = function() {
      that.image._scale(image, image_aspect_ratio);
      that.image._center(image, image_aspect_ratio);
      $.data(image, 'processed', true);
    };
    img.src = this.src;

  } else {
    that.image._scale(image, image_aspect_ratio);
    that.image._center(image, image_aspect_ratio);
  }
});`

Let me know if I didn't make sense.

Thanks.

[chaladm]

you can add me on skype paulromero486

abit confused what the issue is .. I see some on the slide with the girl on mobile version.