Menu icon Foundation
How use Slick Carousel as theme library and how should configure that?

I'm trying to create a front page slide show by using "Slick Carousel" slider as a theme Library on Drupal 8 manually (Without the use of any slick module).

After my initial review, I knew that my requirement for slideshow and content tabs functionality could not be addressed with any contributed module at this time.therefore I decided that I would implement my own slideshow and content tabs in the theme layer.

my theme based on "Zurb foundation 6" theme frame work.<br>
For this I used a view block for a multi-value field to show most viewed content image. To achieve this, I add Slick Carousel as liberary in my theme:

ThemeName.libraries.yml

    slick:
      version: 1.6.0
      css:
        component:
          slick/slick.css: {}
          slick/slick-theme.css: {}
          slick/my-style.css: {}
      js:
        slick/jquery-3.1.1.min.js: {}
        slick/jquery-migrate-1.2.1.min.js: {}
        slick/slick.min.js: {}
      dependencies:
        - core/jquery



and then I Initialize my slider like below code in  html.html.twig before close <body> tag:

<script type="text/javascript">
  $(document).ready(function(){
    $('.my-slider').slick({
      dots: true,
      infinite: true,
      speed: 300,
      fade: true,
      slidesToShow: 1,
      adaptiveHeight: true,
      autoplay: true,
      autoplaySpeed: 500,
    });
  });
</script>



Ultimately, the output is something like below image, that you can see yourself in here:

Slick Slider

I would be very happy to hear what the problem is and if there is any better solution for this problem, share your experiences and guide me to know what is the right way to use Slick Carousel manually in drupal?

Thanks for any help or solution.

Slick carouselSlick SlideShowdrupaldrupal 8

I'm trying to create a front page slide show by using "Slick Carousel" slider as a theme Library on Drupal 8 manually (Without the use of any slick module).

After my initial review, I knew that my requirement for slideshow and content tabs functionality could not be addressed with any contributed module at this time.therefore I decided that I would implement my own slideshow and content tabs in the theme layer.

my theme based on "Zurb foundation 6" theme frame work.<br>
For this I used a view block for a multi-value field to show most viewed content image. To achieve this, I add Slick Carousel as liberary in my theme:

ThemeName.libraries.yml

    slick:
      version: 1.6.0
      css:
        component:
          slick/slick.css: {}
          slick/slick-theme.css: {}
          slick/my-style.css: {}
      js:
        slick/jquery-3.1.1.min.js: {}
        slick/jquery-migrate-1.2.1.min.js: {}
        slick/slick.min.js: {}
      dependencies:
        - core/jquery



and then I Initialize my slider like below code in  html.html.twig before close <body> tag:

<script type="text/javascript">
  $(document).ready(function(){
    $('.my-slider').slick({
      dots: true,
      infinite: true,
      speed: 300,
      fade: true,
      slidesToShow: 1,
      adaptiveHeight: true,
      autoplay: true,
      autoplaySpeed: 500,
    });
  });
</script>



Ultimately, the output is something like below image, that you can see yourself in here:

Slick Slider

I would be very happy to hear what the problem is and if there is any better solution for this problem, share your experiences and guide me to know what is the right way to use Slick Carousel manually in drupal?

Thanks for any help or solution.

Dizzy B High almost 3 years ago

Hey there, not a lot of help i can give ypu with slick, only that i failed to get it work after a day of playing with it.

Instead i used the owl-carousel library worked like a charm and is all in scss.