Grow your CSS skills. Land your dream job.

[Solved] Anything Slider Issue…

  • # May 30, 2010 at 8:56 am

    Hey, I’m working on a project that uses the anything slider. I’m not very strong with jquery or js, so i used the anything slider and restyled it to fit the page. Long story short i can’t get it to round the corners via, …border-radius… , Could there be something in Chris’s jquery preventing that? Anyway i’ve attached the css, I’ve changed a few small things background, arrow positions etc., I’ve tried placing the -webkit-border-radius:; in every spot that could make sense, in the .anythingslider class in the .wrapper, even the .wrapper ul. No rounded corners.

    Thanks in advance,

    Jeremy Carlsten

    The CSS:

    Code:
    /*
    anythingSlider v1.2

    By Chris Coyier: http://css-tricks.com Edited By: Jeremy Carlsten
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/
    */

    .anythingSlider { width: 760px; height: 360px; position: relative; margin: 50px auto 15px;}
    .anythingSlider .wrapper { width: 680px; overflow: auto; height: 341px; margin: 0 40px; position: absolute; top: 0; left: 0; }

    /* Width below is max for Opera */
    .anythingSlider .wrapper ul { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; background: #0A0C0C;/* Fall Back */ background: rgba(10, 12, 12, 0.7); margin: 0; padding: 20px; }
    .anythingSlider ul li { display: block; float: left; padding: 0; height: 317px; width: 680px; margin: 0; }
    .anythingSlider .arrow { display: block; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }
    .anythingSlider .forward { background-position: 0 0; right: 0px; }
    .anythingSlider .back { background-position: -67px 0; left: 0px; }
    .anythingSlider .forward:hover { background-position: 0 -197px; }
    .anythingSlider .back:hover { background-position: -67px -197px; }

    /*
    Prevents
    */
    .anythingSlider .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
    .anythingSlider .wrapper ul ul li { float: none; height: auto; width: auto; background: none; }

    # May 30, 2010 at 5:47 pm

    Turns out the background was in .wrapper ul <– wonders why Chris put it there^^ where it needed to be in .wrapper I dont know how as there was only one background setting but it was causing a double background… thing, it that covered up the rounded corners with square ones. I noticed it after i gave up and figured i would try a drop shadow instead, the shadow magically bent into no where, some trial and error , and now i got it working.

    Fixed code:

    Code:
    /*
    anythingSlider v1.2

    By Chris Coyier: http://css-tricks.com Edited By: Jeremy Carlsten
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/
    */

    .anythingSlider { width: 760px; height: 360px; position: relative; margin: 50px auto 15px; }
    .anythingSlider .wrapper { width: 680px; height: 341px; overflow: hidden; margin: 0 40px; position: absolute; top: 0; left: 0; background: #0A0C0C;/* Fall Back */ background: rgba(10, 12, 12, 0.6); -webkit-box-shadow: 3px 3px 3px #000; -webkit-border-radius: 20px; }

    /* Width below is max for Opera */
    .anythingSlider .wrapper ul { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; margin: 0px; padding: 30px 10px; }
    .anythingSlider ul li { display: block; float: left; padding: 0; height: 317px; width: 680px; margin: 0; }
    .anythingSlider .arrow { display: block; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }
    .anythingSlider .forward { background-position: 0 0; right: 0px; }
    .anythingSlider .back { background-position: -67px 0; left: 0px; }
    .anythingSlider .forward:hover { background-position: 0 -197px; }
    .anythingSlider .back:hover { background-position: -67px -197px; }

    /*
    Prevents
    */
    .anythingSlider .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
    .anythingSlider .wrapper ul ul li { float: none; height: auto; width: auto; background: none; }

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".