5

I'm quite new to web development and jQuery, so please bear with me.

I'm using Nivo Slider on a website that I'm working on. It's a responsive website, and I want the slider to be easily visible on all screen sizes. I've set a breakpoint in my CSS so that when the site gets to its smallest size (around the size of a mobile screen) the slider is set to 200% width, with the overflow hidden, so that the images are larger.

This works fine, however at this size you can only see the center of the slider, while the sides are cropped off by the edge of the screen. For most of the images I'm using this isn't a problem, however one of them is cropped very awkwardly. It's easy to reposition the whole slider, but I want to try and move this ONE image over so that it can be better seen on small screens.

The CSS I've added to the default nivo-slider.css is:

@media screen and (max-width: 31.25em) { /* 500px ÷ 16px */

.slider-wrapper{
    overflow: hidden;
}

.nivoSlider {
    left: -50%;
    width:200%;
}

.nivo-caption {
    margin-left: 25%;
    width: 50%;
}

}

Thanks very much!

Flay
  • 83
  • 6
  • I think it would be easier to just resize the images' height and width. – bookcasey Oct 20 '12 at 23:33
  • Because of the content of the images, that has some complications in itself. Is it possible to replace one of the images once the page gets below a certain size? – Flay Oct 20 '12 at 23:43

2 Answers2

1

Just using CSS, you could add a one-off type class to that particular image, and throw that into your @media query:

.my-one-off { left:??px; margin-right:??px }

You could search for that image with jQuery as well (if I'm not mistaken, Nivo uses the jQ library).

$('img[src*="one-off.jpg"]').css('margin-left',35); // just an example

Or

$('img[src*="one-off.jpg"]').addClass('my-one-off');

Dawson
  • 7,567
  • 1
  • 26
  • 25
0

I looked at nivo-slider3.1. In order to select a particular image only and move it left you could use the following in css:

img[src="YourSpecialPic.jpg"]{
  left:50px !important;
}

You can also set a custom animation for one particular slide with the following img attribute within the HTML:

data-transition="slideInLeft"

You can sub any attributes to get the desired effect, but I think this will do the trick.

NOTE:

Depending on what effects you are using will determine whether or not that messes up the animation (e.g. The slicing animation becomes screwed up after performing the left move. The slideInLeft animation seems to work fine.).

I don't have a quick or easy solution for fixing all the animation effects for that one particular slide, but I'm sure a conditional statement within the javascript could achieve it (I'm just not smart enough for it).

carter
  • 5,074
  • 4
  • 31
  • 40