Foundation
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:
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.
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.