cant make it to work

[ghost]

the screenshot of output is above installed using composer

steps followed:

C:\xampp\htdocs\fabin>composer require "evgeniyrru/yii2-slick" "*" ./composer.json has been updated Loading composer repositories with package information Updating dependencies (including require-dev) Package operations: 2 installs, 0 updates, 0 removals

• Installing bower-asset/slick-carousel (1.6.0): Downloading (100%)
• Installing evgeniyrru/yii2-slick (1.0.4): Downloading (100%) Writing lock file Generating autoload files

here is my index.php using yii2 basic

<?php

/* @var $this yii\web\View */

$this->title = 'Fabin';

?>

      <?php
use yii\helpers\Html;

use \yii\helpers\Url;
use evgeniyrru\yii2slick\Slick;
use yii\web\JsExpression;
/*
if ( Yii::$app->user->isGuest )
    return Yii::$app->getResponse()->redirect('/isa-usa/web/index.php?r=user/security/login');
  */

?>
<!--slider start-->
<?=$this->render('slider')?>
<!--slider end-->

    <!-- Start Lead Block -->

    <!-- End Lead Block -->
    <!-- Start Content -->

            <div id="content" class="content full" style="background-color: #f4f4f4;">
            <div class="container">

                     <div class="row" id="homepage_services_topbar">
                         <div class="col-sm-2">

                             <a href="http://www.google.com">  <div id="Library" style="padding: 50%"></div>     
      <p>Home Services & Repairs    </p></a>
  </div> <div class="col-sm-2">

      <a href="http://www.google.com">        <div id="Library2" style="padding: 50%"></div>     

      <p>Beauty And Health    </p></a>
  </div> <div class="col-sm-2">

      <a href="http://www.google.com">                       <div id="Library3" style="padding: 50%"></div> 

      <p>Lessons and hobbies    </p></a>
  </div> <div class="col-sm-2">

      <a href="http://www.google.com">                    <div id="Library4" style="padding: 50%"></div>    
      <p>Events And Weddings</p></a>
  </div> <div class="col-sm-2">

      <a href="http://www.google.com">                      <div id="Library5" style="padding: 50%"></div>     
      <p>Business Services    </p></a>
  </div> <div class="col-sm-2">

      <a href="http://www.google.com">                       <div id="Library6" style="padding: 50%"></div>   
      <p>Personals & More    </p> </a>
  </div>

</div> 

                </div>
            </div>

    <!-- Start Featured Projects -->
    <div class="featured-projects">
        <div class="container">
            <a href="projects.html" class="btn toblog btn-default pull-right">All Projects</a>
            <h2><small>Featured</small> Projects</h2>
            <div class="row">
                <div class="col-md-4 col-sm-4 format-standard">
                    <a href="single-project.html" class="featured-project-block media-box">
                        <img src="http://placehold.it/600x300&amp;text=IMAGE+PLACEHOLDER" alt="" class="featured-image">
                        <span class="project-overlay">
                            <span class="project-title">Life of the whales</span>
                            <span class="project-cat">Oceans</span>
                        </span>
                    </a>
                </div>
                <div class="col-md-4 col-sm-4 format-standard">
                    <a href="single-project.html" class="featured-project-block media-box">
                        <img src="http://placehold.it/600x300&amp;text=IMAGE+PLACEHOLDER" alt="" class="featured-image">
                        <span class="project-overlay">
                            <span class="project-title">We will miss them</span>
                            <span class="project-cat">Forests</span>
                        </span>
                    </a>
                </div>
                <div class="col-md-4 col-sm-4 format-standard">
                    <a href="single-project.html" class="featured-project-block media-box">
                        <img src="http://placehold.it/600x300&amp;text=IMAGE+PLACEHOLDER" alt="" class="featured-image">
                        <span class="project-overlay">
                            <span class="project-title">How to feed the world</span>
                            <span class="project-cat">Food</span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- End Featured Projects -->

    <div class="container">

<?=Slick::widget([

        // HTML tag for container. Div is default.
        'itemContainer' => 'div',

        // HTML attributes for widget container
        'containerOptions' => ['class' => 'container'],

        // Position for inclusion js-code
        // see more here: http://www.yiiframework.com/doc-2.0/yii-web-view.html#registerJs()-detail
        'jsPosition' => yii\web\View::POS_READY,

        // It possible to use Slick.js events
        // see more: http://kenwheeler.github.io/slick/#events
        'events' => [
            'edge' => 'function(event, slick, direction) {
                           console.log(direction);
                           // left
                      });'
        ],

        // Items for carousel. Empty array not allowed, exception will be throw, if empty 
        'items' => [
            Html::img('images/cat_gallery/1.jpeg'),
            Html::img('images/cat_gallery/2.jpg'),
            Html::img('images/cat_gallery/3.jpeg'),
            Html::img('images/cat_gallery/4.jpeg'),
            Html::img('images/cat_gallery/5.jpeg'),
        ],

        // HTML attribute for every carousel item
        'itemOptions' => ['class' => 'cat-image'],

        // settings for js plugin
        // @see http://kenwheeler.github.io/slick/#settings
        'clientOptions' => [
            'autoplay' => true,
            'dots'     => true,
            // note, that for params passing function you should use JsExpression object
            // but pay atention, In slick 1.4, callback methods have been deprecated and replaced with events.
            'onAfterChange' => new JsExpression('function() {console.log("The cat has shown")}'),
        ],

    ]); ?>
</div>

[EvgeniyRRU]

Hello. Can you send me screenshot of your Google Chrome Developer tools console output? Looks like there are any JS-related errors.

[MarcoDuizer]

i had the same problem, in the example i needed to remove two characters to fix it: 'edge' => 'function(event, slick, direction) { console.log(direction); // left }' ],

I removed this part => ); from the row below //left. And then it works.

[EvgeniyRRU]

Hello, thank you for attention. Should I to correct README.md?

[MarcoDuizer]

Yes, i think that is better for new users. Saves them time ;-).