Divi Carousel css y jQuery Slick

CSS Classes.css

/*Agregue dos clases CSS diferentes a la columna. Asegúrate de dejar un espacio entre ellos.
 Más adelante en este tutorial, 
utilizaremos estas clases para crear el carrusel automático.  */


CSS Class: divicon-items slider

modulocss.css

/* Insertar un módulo de código CSS

E inserte las siguientes líneas de código CSS: */


<style>
 
  .slick-dots li{

float: left;

list-style-type: none;

}

.slick-dots li:hover{

cursor: pointer;

}

.slick-dots li button{

font-size: 0.1px;

color:transparent;

border: 1px solid black;

border-radius: 50%;

padding: 2px !important;

margin-right: 10px;

width: 3px;

height: 3px;

background-color: black;

}

.slick-dots li.slick-active button{

padding: 4px !important;

background-color: transparent;

}
  
  
  
  
  
  .slick-slider
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
  
 
.slick-slide
{
  
float: left;
}
  
  
  .slick-dots {
	display: flex;
	justify-content: center;
    margin: 0;
	padding: 1rem 0;
 
}

</style>

modulojquery.js

 



/*Insertar segundo módulo de código con código jquery
justo debajo del anterior  */

<script>
jQuery(function($){
$('.divicon-items').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay:true,
autoplaySpeed: 700,
arrows: false,
dots: true,
pauseOnHover: true,
responsive: [{
breakpoint: 1079,
settings: {
slidesToShow: 2
}
}]
});
});
</script>

slick.js

/*Agregar esta etiqueta al head de divi  */
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>