search

CSS-Tricks / MovingBoxes

Simple horizontal slider which grows up the current box when it's in focus (image, title & text) and back down when it's not in focus.
http://css-tricks.github.io/MovingBoxes/
GNU Lesser General Public License v3.0
280 stars 147 forks source link

i want to make a continuous slider with 100% width and some 400px constant height. #84

Closed yashu1901 closed 12 years ago

yashu1901 commented 12 years ago

hello , I am trying to make a slider as in the http://drugdrugu.ru/ (a russian website)site with the help of your slider. In the default options I gave width : window.innerWidth,
panelWidth : window.innerWidth*0.24, now it is showing a white space of 1 non highlighted photo at the end of the list. may be I have to make another clone image of second photo at the end of the list and clone of the last but one photo at the beginning of the listalong with the clones of first and last photo.Please can you help me out in this.please.

I even dont want the height animation of the centre image.(I am using all the images of same height and width.).Can you guide me in this regard also please....

Mottie commented 12 years ago

I don't see where MovingBoxes is being used on that site, but if you plan on having a 100% width fixed height slider then maybe consider using AnythingSlider instead. Look at this demo of the expand option and multiple panels which adds more than one clone when active.

yashu1901 commented 12 years ago

yes I have seen the anythigslide... it looked similar to what I want at the first. But it is more different from the moving boxes if we have a close look at it.If there are n number of images in focus when we click next button in anythingslider all the number of images will be moving away from the focus.But what I want is there will be a focus at the center and when I press the next button the images one by one enter into this focus and leave as in the moving blocks.I just want to know how we can create another clone.......I think that will be my perfectt solution.

Mottie commented 12 years ago

Hmm, ok then try this.... look at line 136 in the code:

base.$el.append( base.$panels.filter(':first').clone().addClass('cloned') );

change it to:

base.$el.append( base.$panels.filter(':lt(2)').clone().addClass('cloned') );

This change will add two cloned panels on the right side.

yashu1901 commented 12 years ago

yaa.....:) this successfully added a clone at at the end... similarly can what change i have to make for adding a clone in the left??

yashu1901 commented 12 years ago

sorry i mistakenlly closed it

Mottie commented 12 years ago

Adding a clone on the left is a lot more difficult. I mean it's easy to clone and add it, not so easy to compensate for an extra panel - it throws off the numbering since we're going to pretend the panel isn't even there. It won't be a simple fix.

yashu1901 commented 12 years ago

okk thank u for helping me up to this........:)

Mottie commented 12 years ago

I'm hoping that I've answered your questions sufficiently. Honestly, I don't have the time right now to work out the script changes needed to add more cloned slides on the left side, or really willing to add more code (the plugin is big enough already) just to do that; so I'm going to go ahead and close this issue. Thanks!