Okay
  Public Ticket #2293897
Carousel "next" button has movement
Closed

Comments

  • skunkwerks247 started the conversation
    February 7, 2020 at 5:31pm

    Hi Neuron:

    It was pointed out that one of the nav buttons (the next button) is moving when hovering over the images of the carousel. We wanted no movement on those buttons, like the "previous" button.

    Here is the css code associated with the carousel


    a:not(button):hover, a:not(button).active {
        -webkit-box-shadow: inset 0 0 0 rgba(255, 255, 255, 0), 0 2px 0 #0CCBFE;
        box-shadow: inset 0 0 0 rgba(255, 255, 255, 0), 0 2px 0 #0CCBFE;
    }

    .owl-carousel .owl-nav button.owl-prev {
        left: -38px !important;    
    }

    .owl-carousel .owl-nav button.owl-next {
        right: -38px !important;
    }

    .owl-carousel .owl-dots 
    {
        padding-top: 1px !important;
    }

    .owl-carousel .owl-nav button {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .owl-carousel .owl-nav button.owl-prev, 
    .owl-carousel.owl-nav button.owl-next 
    {
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
    }



    Thanks

    -Craig

  •  675
    Neuron replied
    February 8, 2020 at 1:55pm

    Hi,

    Can you please add the following style, this one will fix it.

    .owl-carousel .owl-nav button,
.owl-carousel .owl-nav button:hover {
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;  
}

    You can remove this part.

    .owl-carousel .owl-nav button.owl-prev, 
    .owl-carousel.owl-nav button.owl-next 
    {
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
    }

    Kind Regards

    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.