Slick carousel example from WordPress loop

function wpe_home_slides(){
    ob_start();
    $args = array(
        'post_type' => 'slides',
        'order' => 'desc',
        'orderby' => 'date',
				'posts_per_page' => '30',
    );
    $child_query = new WP_Query( $args );
    ?>
    <div class="slider">
      <?php
      while ( $child_query->have_posts() ) : $child_query->the_post(); ?>
        <?php $url = wp_get_attachment_url( get_post_thumbnail_id(), 'full' ); ?>
        <div class="slider-carousel " >
          <div class="slider-image">
            <img src="<?php echo $url ?>" alt="" >
          </div>
        <div class="text-wrapper">
          <p class="text-p"><?php the_content(); ?></p>
          <div  class="slider-carousel-bottom">
            <!-- <a class="carousel-link-text-p" href="<?php the_permalink(); ?>"> -->
              <h2 class="text-h2"><?php echo get_the_title()?></h2>
            <!-- </a> -->
          </div>
        </div>

      </div>
      <?php
      endwhile;
      ?>
    </div>
    <?php wp_reset_postdata();
    return ob_get_clean();
}

add_shortcode( 'soko_home_slides', 'wpe_home_slides' );
$('.slider').slick({
	arrows: false,
	dots: true,
	slidesToShow: 3,
	slidesToScroll: 1,
	autoplay: true,
	autoplaySpeed: 2000,
	responsive: [
	{
		breakpoint: 800,
		settings: {
			slidesToShow: 2,
		}
	},
	{
		breakpoint: 500,
		settings: {
			slidesToShow: 1,
		}
	}
	]
});