1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Responsive image slider

Discussion in 'Styling and Customization Questions' started by oO5 Dynasty, Jun 10, 2015.

  1. oO5 Dynasty

    oO5 Dynasty Well-Known Member

    Just wondering if anybody knows how to make this image Gallery/Thumbnail slider Responsive?

    /*Time for the CSS*/
    .node97 {margin: 0; padding: 0;}
    body.node97 {background: #ccc;}
    .node97 .slider{
        width: 640px; /*Same as width of the large image*/
        position: relative;
        /*Instead of height we will use padding*/
        padding-top: 320px; /*That helps bring the labels down*/
        margin: 100px auto;
        /*Lets add a shadow*/
        box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
    /*Last thing remaining is to add transitions*/
    .node97 .slider>img{
        position: absolute;
        left: 0; top: 0;
        transition: all 0.5s;
    .node97 .slider input[name='slide_switch'] {
        display: none;
    .node97 .slider label {
        /*Lets add some spacing for the thumbnails*/
        margin: 18px 0 0 18px;
        border: 3px solid #999;
        float: left;
        cursor: pointer;
        transition: all 0.5s;
        /*Default style = low opacity*/
        opacity: 0.6;
    .node97 .slider label img{
        display: block;
    /*Time to add the click effects*/
    .node97 .slider input[name='slide_switch']:checked+label {
        border-color: #666;
        opacity: 1;
    /*Clicking any thumbnail now should change its opacity(style)*/
    /*Time to work on the main images*/
    .node97 .slider input[name='slide_switch'] ~ img {
        opacity: 0;
        transform: scale(1.1);
    /*That hides all main images at a 110% size
    On click the images will be displayed at normal size to complete the effect
    .node97 .slider input[name='slide_switch']:checked+label+img {
        opacity: 1;
        transform: scale(1);
    /*Clicking on any thumbnail now should activate the image related to it*/
    /*We are done :)*/

    Link to page:
  2. Dylan V

    Dylan V Well-Known Member


    You can make a responsive element if you use the % instead of px for the width and height.
    oO5 Dynasty likes this.
  3. oO5 Dynasty

    oO5 Dynasty Well-Known Member

    ok im a try that, and thank you!
  4. Dylan V

    Dylan V Well-Known Member

    You can find a lot of tutorials on Google.

Share This Page