We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered Need responsive carousel with large banner

    • 9995
    • 1,613 Posts
    fourroses666 Reply #1, 12 years ago
    I'm searching like crazy but can't find any good stuff.

    I need a responsive carousel, when viewport is 960 show 4 thumbs, when reach a smaller viewport like mobile only show 2. Found a couple of scripts which does that. But I'm missing the function to click on a thumb and show "the thumb" in the large banner.

    Some responsive carousels:
    http://owlgraphic.com/owlcarousel/demos/images.html
    http://sorgalla.com/jcarousel/examples/responsive/
    http://plugins.gravitysign.com/everslider/

    This tryout looks like what I want to do but it is not good enouf:
    http://jsfiddle.net/fourroses666/tm10jcu0/2/

    The large image needs to fade in (above the other one)
    and rather pick the large image myself and not copy the thumb into the large one.

    This one isn't working but does the fade:
    http://jsfiddle.net/IrvinDominin/U2yR3/

    If anyone knows a script which does this please let me know.
    Or knows a way to get one working.

    This question has been answered by Jako. See the first response.

    [ed. note: fourroses666 last edited this post 12 years ago.]
      Evolution user, I like the back-end speed and simplicity smiley
      • 36416
      • 589 Posts
      Eoler Reply #2, 12 years ago
      Quote from: fourroses666 at Sep 30, 2014, 09:02 AM

      I need a responsive carousel, when viewport is 960 show 4 thumbs, when reach a smaller viewport like mobile only show 2. Found a couple of scripts which does that. But I'm missing the function to click on a thumb and show "the thumb" in the large banner.

      The most flexible widget of that kind available right now is:
      https://github.com/kenwheeler/slick
      • discuss.answer
        • 13428 ☆ A M B ☆
        • 1,031 Posts
        Jako Reply #3, 12 years ago
        Quote from: Jako at Sep 30, 2014, 02:22 PM
        http://jsfiddle.net/crgd48nb/

        Few annotations on my code:

        • You have to overlay two images to fade them. Second image has position absolute.
        • OldImage is destroyed after newImage is faded in and set back from absolute to static.
        • Which slider script you are using does not matter. I would prefer Owl Carousel 2 at the moment.

        Things that should be improved:

        • Preloading the large images should be done by script and not in html.
          • 9995
          • 1,613 Posts
          fourroses666 Reply #4, 12 years ago
          YES! thanks allot Jako! looks perfect smiley

          @Eoler, nice script, haven't seen that one be4. thanks for the link!

            Evolution user, I like the back-end speed and simplicity smiley