Estoy intentado agregar flechas a un slick slider he visto preguntas como esta Change the Arrow buttons in Slick slider y esta Change Slick Slider Arrow Position, pero sigo sin tener el resultado deseado.
Quisiera que mis flechas aparezcan a los lados de mi slider, donde usualmente aparecen, he intentado agregar:
.paginator{
top: 0;
position: absolute;
}
.paginator .slick-prev{
right:10px;
}
.paginator .slick-next{
right:0;
}
Tambien he intentado hacerlo con Flex-box
y aunque puedan aparecer a los lados del slider no estan dentro del slider.
.paginator{
top: 0;
display:flex;
justify-content:space-between;
}
Agregando la siguiente configuracion en mi funcion del slick slider arrows:true
y prevArrow: $('.slick-prev')
, nextArrow: $('.slick-next')
:
$(".slider").not('.slick-initialized').slick({
centerMode: true,
autoplay: true,
dots: false,
arrows: true,
pauseOnHover: false,
pauseOnFocus: false,
slidesToShow: 3,
prevArrow: $('.slick-prev'),
nextArrow: $('.slick-next'),
responsive: [{
breakpoint: 768,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
Mi código es el siguiente:
html,
body {
margin: 0;
padding: 0;
}
h2,
p {
margin: 30px 0 0;
padding: 0;
}
.paginator{
top: 0;
position: absolute;
}
.paginator .slick-prev{
right:10px;
}
.paginator .slick-next{
right:0;
}
.slider {
max-width: 8000px;
width: 115%;
margin: 15px auto;
background: transparent;
border-radius: 5px;
padding: 20px 0;
box-shadow: none;
/* box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); */
/*h v b s*/
}
.slick-slider button {
display: none !important;
}
.slick-slide {
color: #333;
padding: 40px 0;
font-size: 1.25em;
font-family: "Verdana";
text-align: center;
pointer-events: none;
}
.slick-slide .desc {
opacity: 0;
margin: -20px 0px 0px 0px;
}
.slick-slide .desc>* {
transition: all 900ms ease;
}
.slick-slide .desc h2 {
position: relative;
left: 50px;
line-height: 1;
font-size:25px;
}
.slick-slide .desc p {
position: relative;
top: 50px;
opacity: 0;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
text-align: center;
}
.slick-dots li {
display: inline-block;
padding: 1px;
background: #ccc;
margin: 10px 5px;
width: 40px;
height: 5px;
}
.slick-dots li.slick-active {
background: var(--yellow-color);
}
.slick-dots button {
display: none;
}
.slick-slide:nth-child(odd) {
/* background: blue;*/
}
.slick-slide {
opacity: 0.2;
transition: all 300ms ease;
}
.slick-current {
opacity: 1;
transform: scale(1.1);
}
.slick-current .desc {
opacity: 1;
}
.slick-current .desc h2 {
left: 0;
}
.slick-current .desc p {
top: 0;
opacity: 1;
}
.mybtn {
border-radius: 30px;
padding: 10px 20px;
border: 4px solid #18c495;
text-decoration: none;
color: #18c495;
font-size: .6em;
text-transform: uppercase;
display: block;
margin: 5px auto 0;
max-width: 100px;
width: 100%;
font-weight: bold;
pointer-events: initial;
}
.mybtn-preview01 {
border-radius: 30px;
padding: 10px 20px;
border: 4px solid var(--blue-color);
text-decoration: none;
color: var(--blue-color);
font-size: .6em;
text-transform: uppercase;
display: block;
margin: 5px auto 0;
max-width: 150px;
width: 100%;
font-weight: bold;
pointer-events: initial;
font-family: 'KGBSpace';
}
.mybtn-preview02 {
border-radius: 30px;
padding: 10px 20px;
border: 4px solid var(--sweet-potato-bg);
text-decoration: none;
color: var(--sweet-potato-bg);
font-size: .6em;
text-transform: uppercase;
display: block;
margin: 5px auto 0;
max-width: 150px;
width: 100%;
font-weight: bold;
pointer-events: initial;
font-family: 'KGBSpace';
}
.mybtn-preview03 {
border-radius: 30px;
padding: 10px 20px;
border: 4px solid var(--red-color);
text-decoration: none;
color: var(--red-color);
font-size: .6em;
text-transform: uppercase;
display: block;
margin: 5px auto 0;
max-width: 150px;
width: 100%;
font-weight: bold;
pointer-events: initial;
font-family: 'KGBSpace';
}
.mybtn-preview04 {
border-radius: 30px;
padding: 10px 20px;
border: 4px solid var(--purple-sweetBTN-color);
text-decoration: none;
color: var(--purple-sweetBTN-color);
font-size: .6em;
text-transform: uppercase;
display: block;
margin: 5px auto 0;
max-width: 150px;
width: 100%;
font-weight: bold;
pointer-events: initial;
font-family: 'KGBSpace';
}
@media(max-width:1366px) {
.slider {
width: 100%;
}
}
@media(max-width:720px){
.slick-slide .desc h2{
font-size:21px;
}
}
@media(max-width:720px){
.mybtn-preview04{
font-size: .5em;
}
.mybtn-preview03{
font-size: .5em;
}
.mybtn-preview02{
font-size: .5em;
}
.mybtn-preview01{
font-size: .5em;
}
.mybtn{
font-size: .5em;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<section class="slider">
<div id="product1">
<a href="products/newURL.html">
<img src="https://s1.1zoom.me/b5355/304/Scenery_Sunrises_and_sunsets_Fields_Sky_Sun_519151_600x800.jpg">
</a>
<div class="desc">
<h2 style="color:var(--blue-color)">Product1</h2>
<a href="#" class="mybtn-preview01">View Product</a>
</div>
</div>
<div id="product2">
<a href="products/newURL.html">
<img src="https://s1.1zoom.me/b5355/304/Scenery_Sunrises_and_sunsets_Fields_Sky_Sun_519151_600x800.jpg">
</a>
<div class="desc">
<h2 style="color:var(--sweet-potato-bg)">Product2</h2>
<a href="#" class="mybtn-preview02">View Product</a>
</div>
</div>
<div id="product3">
<a href="products/newURL.html">
<img src="https://s1.1zoom.me/b5355/304/Scenery_Sunrises_and_sunsets_Fields_Sky_Sun_519151_600x800.jpg">
</a>
<div class="desc">
<h2 style="color:var(--red-color)">Product3</h2>
<a href="#" class="mybtn-preview03">View Product</a>
</div>
</div>
<div id="product4">
<a href="products/newURL.html">
<img src="https://s1.1zoom.me/b5355/304/Scenery_Sunrises_and_sunsets_Fields_Sky_Sun_519151_600x800.jpg">
</a>
<div class="desc">
<h2 style="color:var(--red-color)">Product4</h2>
<a href="#" class="mybtn-preview03">View Product</a>
</div>
</div>
</section>
<div class="paginator">
<div class="slick-prev"> prev </div>
<div class="slick-next"> next </div>
</div>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script>
function createSlick() {
$(".slider").not('.slick-initialized').slick({
centerMode: true,
autoplay: true,
infinite: true,
dots: false,
arrows: true,
pauseOnHover: false,
pauseOnFocus: false,
slidesToShow: 3,
prevArrow: $('.slick-prev'),
nextArrow: $('.slick-next'),
responsive: [{
breakpoint: 768,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
}
createSlick();
$(window).on('resize', createSlick);
</script>
Debería de poner dentro de mi section
el div
con clase .paginator
?
Agradecería cualquier comentario.