Support » Plugin: Slideshow » Larger click area

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Stefan Boonstra


    It could indeed be convenient to have bigger button sizes, certainly when on a mobile device. The problem however, is that the bigger button area’s may overlap a slide with a URL or even the pagination.

    At the moment you can of course work it out for yourself, using a custom stylesheet.

    I see, I didn’t think as I don’t use URL or pagination.
    What would I do to custom stylesheet to make the area just a strip?
    I see it has some strange margin using -20

    Plugin Author Stefan Boonstra


    The images are centered vertically in the slideshow’s container with the ‘top: 50%;‘ CSS value. This will place the top of the button image in the center, but leaves the rest of the button below the center. The ‘margin-top: -20px;‘ pulls the button up half its height so it’s completely centered.

    If you want to have buttons from top to bottom, you should do something like this:

    .slideshow_container_0 .slideshow_button {
        top: 0; /* Brings the buttons to the top. */
        height: 100%; /* I'm not sure whether or not this works in all versions of Internet Explorer. */
        width: 100px; /* Any width you'd like. */
        background: url('URL to your image') no-repeat;

    If you’re using the default image, you should probably use something like CSS background-position as well.

    I got it

    .slideshow_container .slideshow_button {
    	top: 0;
    	height: 100%;
    	width: 39px;
    .slideshow_container .slideshow_previous {
    	background: url('%plugin-url%/images/SlideshowPlugin/light-arrows.png') no-repeat 20px 50%;
    .slideshow_container .slideshow_next {
    	background: url('%plugin-url%/images/SlideshowPlugin/light-arrows.png') no-repeat -19px 50%;
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Larger click area’ is closed to new replies.