gratis codigo bootstrap javascript jquery html css slider

javascript - codigo - Cambiar los botones de flecha en el control deslizante Slick



slider html5 css3 responsive (12)

Aquí hay otro ejemplo para cambiar las flechas y usar sus propias imágenes de flechas.

.slick-prev:before { background-image: url(''images/arrow-left.png''); background-size: 50px 50px; display: inline-block; width: 50px; height: 50px; content:""; } .slick-next:before { background-image: url(''images/arrow-right.png''); background-size: 50px 50px; display: inline-block; width: 50px; height: 50px; content:""; }

Quiero cambiar las flechas en mi control deslizante, pero no cambia. Quiero el botón siguiente y anterior como imagen. He intentado ponerlo en un <style> pero todavía no funciona. ¿Dónde puedo cambiar la configuración de las flechas?

tema elegante css @charset "UTF-8";

// Default Variables $slick-font-path: "./fonts/" !default; $slick-font-family: "slick" !default; $slick-loader-path: "./" !default; $slick-arrow-color: white !default; $slick-dot-color: black !default; $slick-dot-color-active: $slick-dot-color !default; $slick-prev-character: "←" !default; $slick-next-character: "→" !default; $slick-dot-character: "•" !default; $slick-dot-size: 6px !default; $slick-opacity-default: 0.75 !default; $slick-opacity-on-hover: 1 !default; $slick-opacity-not-active: 0.25 !default; @function slick-image-url($url) { @if function-exists(image-url) { @return image-url($url); } @else { @return url($slick-loader-path + $url); } } @function slick-font-url($url) { @if function-exists(font-url) { @return font-url($url); } @else { @return url($slick-font-path + $url); } } /* Slider */ .slick-list { .slick-loading & { background: #fff slick-image-url("ajax-loader.gif") center center no-repeat; } position: absolute; margin: 0 auto; } /* Icons */ @if $slick-font-family == "slick" { @font-face { font-family: "slick"; src: slick-font-url("slick.eot"); src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; } } /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 30px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; &:hover, &:focus { outline: none; background: transparent; color: transparent; &:before { opacity: $slick-opacity-on-hover; } } &.slick-disabled:before { opacity: $slick-opacity-not-active; } } .slick-prev:before, .slick-next:before { font-family: $slick-font-family; font-size: 20px; line-height: 1; color: $slick-arrow-color; opacity: $slick-opacity-default; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; [dir="rtl"] & { left: auto; right: -25px; } &:before { content: $slick-prev-character; [dir="rtl"] & { content: $slick-next-character; } } } .slick-next { right: -25px; [dir="rtl"] & { left: -25px; right: auto; } &:before { content: $slick-next-character; [dir="rtl"] & { content: $slick-prev-character; } } } /* Dots */ .slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; &:hover, &:focus { outline: none; &:before { opacity: $slick-opacity-on-hover; } } &:before { position: absolute; top: 0; left: 0; content: $slick-dot-character; width: 20px; height: 20px; font-family: $slick-font-family; font-size: $slick-dot-size; line-height: 20px; text-align: center; color: $slick-dot-color; opacity: $slick-opacity-not-active; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } &.slick-active button:before { color: $slick-dot-color-active; opacity: $slick-opacity-default; } } }

css pulido

/* Slider */ .slick-slider { position: relative; margin: 0 auto; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0 auto; padding: 0; &:focus { outline: none; } &.dragging { cursor: pointer; cursor: hand; } } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; &:before, &:after { content: ""; display: table; } &:after { clear: both; } .slick-loading & { visibility: hidden; } } .slick-slide { float: left; min-height: 1px; [dir="rtl"] & { float: right; } img { display: block; } &.slick-loading img { display: none; } display: none; &.dragging img { pointer-events: none; } .slick-initialized & { display: block; } .slick-loading & { visibility: hidden; } .slick-vertical & { display: block; height: auto; border: 1px solid transparent; } }

vista previa del sitio


En su archivo script.js puede agregar algo como esto.

jQuery(document).ready(function(){ $(''.slick-prev'').html(''something''); $(''.slick-next'').html(''something'') });


Esto funcionó para mí:

http://codepen.io/anon/pen/qNbWwK

Oculta los botones predeterminados en CSS y usa:

<!-- In HTML: --> <p class="left">left</p> <p class="right">right</p> /* In the JS file */ $(''.slider'').slick({ arrows: false }) $(''.left'').click(function(){ $(''.slider'').slick(''slickPrev''); }) $(''.right'').click(function(){ $(''.slider'').slick(''slickNext''); })


Propiedad del contenido del pseudo elemento: antes también acepta imágenes. En el cambio slick-theme.css:

<div class="prev">Prev</div> <div class="next">Next</div> $(''.your_class'').slick({ infinite: true, speed: 300, slidesToShow: 5, slidesToScroll: 5, arrows: true, prevArrow: $(''.prev''), nextArrow: $(''.next'') });

o cambiar directamente la propiedad de contenido en slick-prev: before y slick-next: before

// change $slick-prev-character: "←" !default; // to $slick-prev-character: url(''image-prev.png''); // and $slick-next-character: "→" !default; // to $slick-next-character: url(''image-next.jpg'');


Puede crear fácilmente su propio estilo de flecha con .slick-next:before y .slick-prev:after pseudo-classes.

Aquí hay un ejemplo:

.slick-prev:after { content: "<"; color: red; font-size: 30px; } .slick-next:before { content: ">"; color: red; font-size: 30px; }


Puede usar los valores de "contenido" de FontAwesome y aplicarlos como sigue por css. Estos aplican los iconos "chevron derecha / izquierda".

.custom-slick .slick-prev:before { content: ""; font-family: ''FontAwesome''; font-size: 22px; } .custom-slick .slick-next:before { content: ""; font-family: ''FontAwesome''; font-size: 22px; }


Si está utilizando sass, simplemente puede establecer las variables mencionadas a continuación,

$slick-font-family:FontAwesome; $slick-prev-character: "/f053"; $slick-next-character: "/f054";

Esto cambiará la familia de fuentes utilizada por el tema CSS de Slick y también el Unicode para el botón anterior y siguiente.

Otras variables sass que se pueden configurar se dan en la página Slick Github


Slick tiene una manera muy fácil de personalizar sus botones a través de dos variables en su propia configuración: prevArrow y nextArrow .

Ambos tipos son: string (html | jQuery selector) | objeto (nodo DOM | objeto jQuery), por lo que en el control deslizante de configuración puede establecer las clases:

prevArrow: $(''.prev'') nextArrow: $(''.next'')

y agregue a estos elementos los estilos que desee.

Por ejemplo:

//HTML <div class="slider-box _clearfix"> <div class="slick-slider"> <div> <img src="img/home_carousel/home_carorusel_1.jpg"> </div> <div> <img src="img/home_carousel/home_carorusel_2.jpg"> </div> <div> <img src="img/home_carousel/home_carorusel_3.jpg"> </div> <div> <img src="img/home_carousel/home_carorusel_4.jpg"> </div> </div> </div> <div class="paginator-center text-color text-center"> <h6>VER MAS LANZAMIENTOS</h6> <ul> <li class="prev"></li> <li class="next"></li> </ul> </div> //JS $(document).ready(function () { $(''.slick-slider'').slick({ centerMode: true, centerPadding: ''60px'', slidesToShow: 3, prevArrow: $(''.prev''), nextArrow: $(''.next''), }); //CSS .paginator{ position: relative; float: right; margin-bottom: 20px; li{ margin-top: 20px; position: relative; float: left; margin-right: 20px; &.prev{ display: block; height: 20px; width: 20px; background: url(''../img/back.png'') no-repeat; } &.next{ display: block; height: 20px; width: 20px; background: url(''../img/next.png'') no-repeat; } } }


Solución fácil:

$(''.slick-slider'').slick({ arrows: true, prevArrow:"<img class=''a-left control-c prev slick-prev'' src=''YOUR LEFT ARROW IMAGE URL''>", nextArrow:"<img class=''a-right control-c next slick-next'' src=''YOUR RIGHT ARROW IMAGE URL''>" });

Las URL de imágenes pueden ser locales o de tipo cdn (iconos web, etc.).

Ejemplo de CSS (ajuste según sea necesario aquí, este es solo un ejemplo de lo que es posible):

.control-c { width: 30px; height: 30px; }

¡Esto funcionó bien para mí!


es muy fácil. Usa el siguiente código, funciona para mí. Aquí he usado fontawesome icon pero puedes usar cualquier cosa como imagen o cualquier otro código de Icon.

$(document).ready(function(){ $(''.slider'').slick({ autoplay:true, arrows: true, prevArrow:"<button type=''button'' class=''slick-prev pull-left''><i class=''fa fa-angle-left'' aria-hidden=''true''></i></button>", nextArrow:"<button type=''button'' class=''slick-next pull-right''><i class=''fa fa-angle-right'' aria-hidden=''true''></i></button>" }); });


Para cambiar el color

.slick-prev:before { color: some-color!important; } .slick-next:before { color: some-color!important; }


.slick-prev { left: -25px; [dir="rtl"] & { left: auto; right: -25px; } &:before { content: url(''image-prev.jpg''); // <<<<<<<< [dir="rtl"] & { content: url(''image-next.jpg''); // <<<<<<<< } } } .slick-next { right: -25px; [dir="rtl"] & { left: -25px; right: auto; } &:before { content: url(''image-next.jpg''); // <<<<<<<< [dir="rtl"] & { content: url(''image-prev.jpg''); // <<<<<<<< } } }