Increase size of carousel preview thumbnails
Updated on October 13, 2016 in Sangar Slider
13 on October 8, 2016

I’d like to increase the size of the small preview thumbnails below the large image.

  • Liked by
By using the forum you are agree with tonjoo studio license agreement
Moderator 0 on October 10, 2016

Hi there

You can use custom css feature. Have you tried it first?

Thank you

  • Liked by
Cancel
By using the forum you are agree with tonjoo studio license agreement
Message :
0 on October 10, 2016

I tried, but I’m not sure what code to use.

  • Liked by
Cancel
By using the forum you are agree with tonjoo studio license agreement
Message :
0 on October 11, 2016

I tried several code additions in this snippet but nothing changed…

/**
* sangar-pagination-type-image
*/
[ss-id] ul.sangar-pagination-type-image > li.sangar-pagination-active {
background: none;
}

[ss-id] ul.sangar-pagination-type-image > li.sangar-pagination-active > div:before {
border: 2px solid #fff;
}

[ss-id] ul.sangar-pagination-type-image > li:hover {
background: none;
}

  • Liked by
Cancel
By using the forum you are agree with tonjoo studio license agreement
Message :
Moderator 0 on October 11, 2016

Hi

Can I see your website? So I can help you with custom CSS :)

Thank you

  • Liked by
Cancel
By using the forum you are agree with tonjoo studio license agreement
Message :
0 on October 11, 2016
  • Liked by
Cancel
By using the forum you are agree with tonjoo studio license agreement
Message :
Moderator 0 on October 11, 2016

Hi there, please try these css :


.sangar-slideshow-container .sangar-pagination-wrapper.wrapper-content-horizontal {
height: 100px !important;
}

.sangar-slideshow-container .sangar-wrapper .sangar-pagination-type-image > li.sangar-pagination-active > div {
height: 100px !important;
width: 100px !important;
}

Please change number "100px" with anything you want :)

Hope it helps

Thank you

  • Liked by
Cancel
By using the forum you are agree with tonjoo studio license agreement
Message :
0 on October 11, 2016

Can I use a percentage? I really want them to be evenly spaced across the container.

I’d also like to take the layer of opacity off the inactive thumnbails. How do I do that?

Thank you!

  • Liked by
Cancel
By using the forum you are agree with tonjoo studio license agreement
Message :
Moderator 0 on October 11, 2016

Yes, you can use percentage instead :)

And for opacity, you can use this CSS :


.sangar-slideshow-container .sangar-wrapper .sangar-pagination-type-image > li.sangar-slideshow-nav-pagination > div {
opacity: 1 !important;
}

Hope it helps

Thank you

  • Liked by
Cancel
By using the forum you are agree with tonjoo studio license agreement
Message :
0 on October 12, 2016

The opacity worked great!

I’m still having issues with the size of the thumbnails. I’ve linked to a screenshot of what I want it to look like. If you can help me with the css that would be great. Like I mentioned before I would like to use percentages instead of pixels so the dimensions stay the same when the screen size gets smaller.

Thank you,

Jeremy B.

  • Liked by
Cancel
By using the forum you are agree with tonjoo studio license agreement
Message :
Moderator 0 on October 12, 2016

Hi Jeremy!

Please try these codes :


.sangar-slideshow-container .sangar-pagination-wrapper ul.sangar-pagination-content-horizontal {
width: 100% !important;
}

.sangar-slider-136.sangar-slideshow-container ul.sangar-pagination-type-image > li.sangar-pagination-active {
width: 24.5% !important;
}

.sangar-slideshow-container .sangar-wrapper ul.sangar-pagination-type-image > li {
width: 24.5% !important;
}

.sangar-slideshow-container .sangar-wrapper .sangar-pagination-type-image > li.sangar-pagination-active > div {
width: 100% !important;
}

Hope it’s what you expected :)

Thank you

  • Liked by
Cancel
By using the forum you are agree with tonjoo studio license agreement
Message :
Loading more replies
You are not logged in

Please login here or simply sign up here .