New jQuery Plugin – jQuery Slick

The new jQuery Slick plugin creates sticky, slide out tabs from any HTML content. Great for adding sticky navigation or forms to any website.

Very quick and easy to use – just wrap the sticky content with a div tag with an ID and initialise the plugin. Features of the plugin include:

  • The ability to position the sticky tab anywhere using a combination of “location” and “offset” settings
  • Set animation speed
  • Set the tab text
  • Auto-close option, which will automatically slide closed if elsewhere in the browser screen is clicked
  • Multiple slick tabs per page.

Checkout the jQuery Slick plugin project page for more information.

Also see our Wordpress Slick Menu plugin version.


  • thx.
    but unchanged.

    .dc-slick {width: 500px;}
    #slick-1.dc-slick {width: 100px;}
    #slick-2.dc-slick {width: 300px;}

    slick-1 & slick-2 are width: 500px

    • Make sure that your idWrapper option is set, otherwise the plugin assigns the value dynamically – e.g.

      			location: 'left',
      			align: 'top',
      			offset: '100px',
      			speed: 'slow',
      			tabText: 'Slick 1',
      			autoClose: true,
      			idWrapper: 'dc-slick-1'

      for the CSS you would use:

      #dc-slick-1.dc-slick {width: 100px;}
      • Hope fulfilled! Thank you!!

        and Q

        slick-1 and slick-2 want the same width, is now an error to use the same idWrapper.
        text$(’#slick-1′).dcSlick({idWrapper: ‘dc-slick-1′});
        $(’#slick-2′).dcSlick({idWrapper: ‘dc-slick-1′});/text
        is error.

        text#dc-slick-1.dc-slick {width: 100px;}
        #dc-slick-2.dc-slick {width: 100px;}/text
        text$(’#slick-1′).dcSlick({idWrapper: ‘dc-slick-1′});
        $(’#slick-2′).dcSlick({idWrapper: ‘dc-slick-2′});/text
        is OK

        want many slicks of the same width => need many different idWrapper ?

        • The ID must always be unique for each HTML element

  • Now all slicks’s width is only one size.
     CSS -> “.dc-slick {width: …px”.
    I want “width” options one by one.
    width: ‘100px’
    width: ‘300px’
    …… like it.

    • Hi – set the width the slick items using CSS:

      #slick-1.dc-slick {width: 100px;}
      #slick-2.dc-slick {width: 300px;}

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags