Home>

About creating slides using swiper plugins in HTML.
I want to change the arrow mark (<,>) to an image.

.swiper-button-prev,
.swiper-button-next {
background-image: none;
}
Even if the above code is added, it cannot be overwritten, the default arrow remains, and the image is displayed below it.
Also, when I click on the arrow, a blue frame appears, but I want to hide it as well.
If there is a way to solve it, I would like to tell you.

Thank you.

Applicable source code
/* style * /
    .swiper-slide {
        padding: 100px 100px;
    }
.swiper-button-prev,
.swiper-button-next {
    background-image: none;
}
.swiper-button-next {
}
.swiper-button-prev {
    transform: scale (-1, 1);
}
<!-HTML->

    
         Slide 1 
         Slide 2 
         Slide 3 
    
     
     

<!-script->
    var mySwiper = new Swiper ('. swiper-container', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    }
});
Supplemental information (FW/tool version etc.)

Minimum code.
swiper.css and swiper.min.js have downloaded the latest version.

  • Answer # 1

    Is the css loading order first?
    If the level of detail is the same, the latter is given priority, so why not change the order or increase the level of detail?

  • Answer # 2

    Following this reference site with a verification tool,
    The image changed normally by overwritingbackground-image.noneis not used.
    Also, the blue frame was not displayed. If it appears,
    I think it can be deleted withoutline: none;.

    Would you like to check again for a simple typo?

Related articles