Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Multiple Slider

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #33954
    earth
    Member

    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/

    #85133
    Mottie
    Moderator

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

    #85233
    earth
    Member

    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/

    #85235
    Mottie
    Moderator

    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.

    #85236
    earth
    Member

    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/

    #85260
    Mottie
    Moderator

    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.

    #85346
    earth
    Member

    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.

    #85353
    Mottie
    Moderator

    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;
    }
    #85365
    earth
    Member

    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.

    #85382
    Mottie
    Moderator

    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 { ... }
    #85398
    earth
    Member

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

    #85400
    Mottie
    Moderator

    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.

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.