Multiple Slider

[earth]

I would like to use the slider https://css-tricks.com/examples/MovingBoxes/

I want to have multiple sliders in one page. Please let me know how to have multiple sliders in one page using slider https://css-tricks.com/examples/MovingBoxes/

[Mottie]

Have you seen this demo? What part are you stuck on?

[earth]

Thanks for the demo http://chriscoyier.github.com/MovingBoxes/, i have not seen this demo before.

I have noticed that the code in this demo is different from https://css-tricks.com/examples/MovingBoxes/

In https://css-tricks.com/examples/MovingBoxes/ we can specify 2 different images for left and right arrow. Can you please let me know how to do the same in http://chriscoyier.github.com/MovingBoxes/

[Mottie]

The plugin on github uses image sprites; it allows you to combine multiple images into one. If you don’t know what an image sprite is, please read this article.

[earth]

I know about image sprites but i would like to use different images for left and right arrow. Can you please let me know how to do that in the code shown in demo http://chriscoyier.github.com/MovingBoxes/

[Mottie]

It is difficult for me to help you when I don’t know where you are getting stuck. Image sprites are set as a background image and by setting the height, width and background position you can show that specific image. It’s all laid out in the CSS.

Maybe try modifying the css in this demo and if you get stuck, update the demo and post the link here so we can help you better.

[earth]

I just want to use 2 different images for left and right arrow for multiple sliders in one page instead of using image sprites. I hope this would help you understand what i need.

Thanks.

[Mottie]

Hi Earth, basically, it’s the same concept… instead of using an actual image tag, just set the background image… like this (demo):

/*** Left & Right Navigation Arrows ***/

a.mb-scrollButtons {

display: block;

width: 128px;

height: 128px;

position: absolute;

top: 50%;

margin-top: -64px; /* if you change the arrow images, you may have to adjust this (1/2 height of arrow image) */

cursor: pointer;

text-decoration: none;

outline: 0;

border: 0;

}

a.mb-scrollButtons.mb-left {

background: url(http://i53.tinypic.com/windjm.png) no-repeat;

left: -64px;

}

a.mb-scrollButtons.mb-right {

background: url(http://i51.tinypic.com/35komrm.png) no-repeat;

right: -64px;

}

[earth]

Thanks, this will work for me.

Since the multiple scroller that i will use in one page will have different left and right buttons can you please let me know how to assign different left and right buttons for each slider of the page.

[Mottie]

Wrap each Moving Box in a div, then target that id with the scroll buttons, like this:

HTML

...








...

CSS (use the code above)

#slider1wrap a.mb-scrollButtons { ... }

#slider2wrap a.mb-scrollButtons { ... }

[earth]

Thanks. Is it possible to display more than one picture in one panel of a slider. Something like http://www.bestwebauction.com/portfolio/

[Mottie]

Sorry, Moving boxes isn’t set up to have more than the one image in the middle and the two partial boxes on either side. I have been asked to allow multiple boxes in the middle, but I haven’t gotten around to figuring it out and modifying the plugin.

[Author]

Posts