Issue with slider buttons

  • Resolved Ian

    (@ipgill)


    6 months, 2 weeks ago

    Dear support team,

    I’m unable to see slider buttons on home page as well as at the bottom of portfolio item pages [ redundant link removed ]

    The home page appears normal until mouse hover and you start to see 1, 2, 3, 4 bullet items under the slider and ‘Previous’ ‘Next’ text.

    Could you please help me resolve this? Thank you.

    • This topic was modified 4 months, 4 weeks ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

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

  • Hello @ipgill

    You may want to clear you cache to check if that solves any problems with the styles. However, if clearing the cache doesn’t solve anything, here is some CSS that may help you. The CSS adds arrows to the portfolio buttons like on the home page.

    button.slick-next.slick-arrow {
    width: 35px;
    height: 75px;
    margin: -37px 0 0;
    display: block;
    background: url(/wp-content/themes/virtue/assets/img/slide_direction.png) no-repeat 0 0;
        background-position: 100% 0;
    position: absolute;
    top: 50%;
    z-index: 10;
    cursor: pointer;
    text-indent: -9999px;
    ms-filter: "alpha(opacity=00)";
    filter: alpha(opacity = 00);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}
button.slick-prev.slick-arrow {
    width: 35px;
    height: 75px;
    margin: -37px 0 0;
    display: block;
    background: url(/wp-content/themes/virtue/assets/img/slide_direction.png) no-repeat 0 0;
    position: absolute;
    top: 50%;
    z-index: 10;
    cursor: pointer;
    text-indent: -9999px;
    ms-filter: "alpha(opacity=00)";
    filter: alpha(opacity = 00);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}}

    The slider on the home page looks like it is working as expected. You mentioned you don’t want the bullets at the bottom. You can likely hide it with the following CSS.

    ol.flex-control-nav.flex-control-paging {
    display: none;
}

    Add the CSS, clear your cache, and let me know if this helps you or if you have additional questions.

    Thread Starter Ian

    (@ipgill)

    Thank you so much. This worked.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Issue with slider buttons’ is closed to new replies.