web-dev-qa-db-fra.com

Comment styliser le bouton flèches précédent / suivant?

[~ # ~] objectif [~ # ~]

J'ai essayé de modifier le slick.css pour s'adapter au style dont j'ai besoin sur mon site. J'ai eu le slick.css de ici .

Maintenant

  • Je veux agrandir la flèche (gauche + droite)
  • Pour les icônes, je veux utiliser celui sans circle-border autour de.
  • J'aime fa-chevron-right et fa-chevron-left

Qu'est-ce que j'ai essayé?

portion de slick.css

.slick-prev, .slick-next { position: absolute; display: block; height: 200px; width: 50px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }

.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: red; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }



.slick-prev { left: -10px; top: 70px;  }
[dir="rtl"] .slick-prev { left: auto; right: -10px; top: 70px; }
.slick-prev:before { content: "←"; }
[dir="rtl"] .slick-prev:before { content: "→"; }

.slick-next { right: -10px; top: 70px; }
[dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
.slick-next:before { content: "→"; }
[dir="rtl"] .slick-next:before { content: "←"; }

HTML

<div class="row slick ">
// just a bunch of lists in here
</div>

Photo détaillée

Voici ce que j'ai maintenant.

enter image description here

Voici ce que je veux avoir.

enter image description here

Question

  • Quelqu'un peut-il m'aider à résoudre ce problème?

    J'apprécie vraiment votre considération et votre temps. :)

javascriptjqueryhtmlcsshtml5
14
iori

La chose de base est la production de flèches par propriété de contenu:

.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 40px; line-height: 1; color: red; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }   

.slick-prev:before { content: "‹"; }
[dir="rtl"] .slick-prev:before { content: "›"; }

[dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
.slick-next:before { content: "›"; }
[dir="rtl"] .slick-next:before { content: "‹"; }

Remplacez ces classes et après cela, jouez simplement avec les propriétés de marge et de position pour ajuster les flèches, si cela ne résout pas le problème, envoyez-moi le lien http://jsfiddle.net/ je vais vous envoyer la solution complète .

Si vous souhaitez utiliser Font Awesome

.slick-prev:before, .slick-next:before { font-family: FontAwesome; font-size: 40px; line-height: 1; color: red; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }   

.slick-prev:before { content: "\f053"; }
[dir="rtl"] .slick-prev:before { content: "\f054"; }

[dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
.slick-next:before { content: "\f054"; }
[dir="rtl"] .slick-next:before { content: "\f053"; }

Pour la liste des icônes de police, visitez http://astronautweb.co/snippet/font-awesome/ et comment implémenter la police visitez ce fil (Utilisez l'icône géniale de police comme contenu css

28
saqibahmad
.slick-prev::before {
    font-family: FontAwesome;
    content: "\f0d9";
    font-size: 22px;
}  
.slick-next::before {
    font-family: FontAwesome;
    content:  "\f0da";
    font-size: 22px;        
}      
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>

<button type="button" class="slick-prev "></button>

<button type="button" class="slick-next "></button>
3
Ilídio Martins

Si vous utilisez sass, vous pouvez définir les variables sass fournies par slick.

Voir: Ajouter des boutons personnalisés sur le carrousel lisse

1
par
<script type="text/javascript">
$(document).ready(function(){
    $('.responsive_com2').slick({
        arrows: false,
        dots:true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
        slidesPerRow: 1,
        rows: 1,
    });

    $('.left_news').click(function(){
        $('.responsive_com2').slick('slickPrev');
    })

    $('.right_news').click(function(){
        $('.responsive_com2').slick('slickNext');
    })

});
</script>
0
waleed zaki