1

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.

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.