How to Create Slider using Slick Carousel?
https://www.zyxware.com/sites/default/files/styles/user_image/public/pictures/zyxlogo.png?itok=NCFkMd_w
BY webmaster
2 years ago
Drupal-Technical

Slick Carousel

 

Slick can be used to create a slider. We can create a slider with views and paragraph types or multiple value fields.

Slick carousel has many features. Responsiveness is the main feature, that is the ability to scale according to its container. It provides advanced settings for breakpoints. The slick slider can be scrolled using the auto scroll, mouse wheel scroll, swipe, desktop mouse dragging etc. It provides settings for customizing arrow keys and its navigation also provides settings for dots under the slider for slide selecting. Slick has different skins like Full width, Full-screen Split, Grid and multiple-row carousel.

Installing slick

Composer requires Drupal/slick

For creating a slider with multiple value fields, we need the following modules

  • Slick
  • Slick UI

For creating a slider with the view, we need the following modules

  • Slick
  • Slick views

Creating a slider with multiple value fields or paragraph types

Go to extend menu, then install and enable the slick module and slick UI (Provides slick carousel configuration UI).

Now we are going to create a slider with a paragraph type and a multiple value image field.

Steps:

image5.jpg

  • Now we need to configure slick slider. Click on the settings icon in manage display tab. Set ‘OptionSet’ and ‘Skin’ to any predefined one will generate a basic slider. OptionSet is already selected with ‘default’ OptionSet.

Other fields and advanced configurations

All fields are displayed with a tooltip which contains information about the field. Now we are going to discuss some of the fields.

image6.jpg

  1. Display style:

    Use either CSS3 Columns or Grid Foundation.

    Difference:

    • Columns are best with irregular image sizes (scale width, empty height), as it affects the natural order of grid items.
    • Grid is good with regular cropped ones.

    Unless required, leave empty to use default formatter, or style. CSS3 Columns is best with adaptive height, non-vertical.

    Will use the regular carousel as default style if left empty.

  2. OptionSet main:

    Here we can select option set which we can create in the slick configuration page. OptionSet is a set of configuration which we can create and save. This increases the re-usability of a certain configuration. ‘Default’ option set is selected as default.

    OptionSet creation is going to be discussed in the next topic.

  3. Skin main:

    Skins allow various CSS layouts. Slick provides some predefined skins. Selecting OptionSet and a skin is enough to generate a simple slider.

  4. Image style:

    Select image style. This is the main image style option. Selecting any image style will help to change the image style like ratio, crop etc.

  5. OptionSet thumbnail:

    Select only if we needed thumbnail customisation using optionset.

  6. Skin thumbnail:

    Select only if we needed thumbnail for our slider.

  7. Thumbnail style, Thumbnail effect, Thumbnail position:

    These can be used to specify the thumbnail image style, effect and position. If thumbnail options have been provided then thumbnail for slider images can be displayed as below.

    image2.jpg
  8. Media switcher:

    We can select appropriate media switching option like switching to content, link to smaller slick etc.

  9. Use CSS background:

    Check this to turn the image into css background.

  10. Aspect ratio:

    Select any aspect ratio for image slider.

  11. Grid large:

    Set this option only for larger displays if needed.

    image1.jpg
  12. Layout:

    This option can be used for selecting a layout that specifies the slider and caption position etc.

  13. Thumbnail caption:

    Here we can decide what should be displayed as thumbnail caption among alt and title text of the image.

  14. Caption fields:

    image4.jpg

    Here we can tick alt and title field for displaying as a caption for each slide.

  15. Cache:

    If we need to cache our slider data, then we can select an appropriate time period for caching data.

  16. Override main optionset:

    If we checked this, some settings of selected optionset can be overridden. The settings which can be overridden will be displayed after selecting this checkbox.

    Over-ridable options are:

    1. Arrows - check if slider next and previous arrow need to be displayed.
    2. Autoplay – check if the slider needs to be auto played.
    3. Dots – check if the slider bottom dots needs to be displayed.
    4. Draggable – makes the slider draggable.
    5. Infinite – allow the slider slide infinitely.
    6. Mousewheel – allow the slider to slide when mouse scrolls.
    7. Randomize – for random sliding.
    8. Variable width – select if each slide needs to be displayed as variable width.
  17. Settings for responsiveness:

    Leave Breakpoints empty to disable multi-serving images. If provided, lazyload applies. This is ignored if core responsive image is provided. It uses max-width, not min-width. Here we can set breakpoints as we needed.

    image3.jpg

The above listed are fields of slick configuration. This configuration is enough for creating a slider. If we need to customize more then we can create option set and use it. Option set increases the re-usability of configurations. Now let's discuss how to create a new optionset.

Creating option set

Go to the configuration page, under media, select slick. On this page, we can see the default option set. This cannot be edited, but we can create its duplicate and edit. Here we can configure our slider from the basic, like slider arrows, autoplay, dots, variable width or height etc.

Click on duplicate and give a name to option set. There are two tabs one is settings and other is responsive display. Settings tab for specifying the needed configuration for the slider and responsive display tab for specifying the responsive design.

Now we are going to discuss the fields in the option set.

  1. Optimized:

    Check to optimize the stored options. Anything similar to defaults will not be stored, except those required by sub-modules and theme_slick().

  2. Breakpoints:

    Here we can specify the number of breakpoints which is needed for the responsive design. After adding the number of breakpoints, we can specify configuration for each breakpoint in ‘responsive display’ tab.

  3. Skin:

    Here we can select a skin for this particular option set.

  4. Mobile first:

    This is used for specifying mobile first responsive display (taking min-width instead of max-width).

  5. asNavFor target:

    Can specify ID or class for navigation to other sliders.

  6. Accessibility:

    Enables tabbing and arrow key navigation.

There are many fields for specifying variable height or width, autoplay, dots for the slider, next and previous icons, slide speed, fade draggable infinite loop of slides, etc..

After creating slick configurations, print the field for displaying the slick slider. Slick is an easy way to create a slider with large options for customization.

Read 'How to create Slider using Slick View in Drupal'


RELATED ARTICLE

/themes/custom/zyxpro_light/images/placeholder.png
close

on 01st January 2008 / by webmaster
We have added a few new modules to our site recently. Drupal Technical StumbleThis Sean (not verified) access_time 31 Jul 2021 - 06:01 Hi there, I uploaded the files, enabled the modules to use SU, and now I see the link, but there is no icon... How can I fix this? Thanks, Sean webmaster access_time 31 Jul 2021 - 06:01 In reply to Icon doesn't show by Sean (not verified) What do you see when you view the source? Search for stumblethis_button and you should be able to see the code for the image and the URL. Then you should be able to troubleshoot from there. Juicy Couture Addict (not verified) access_time 31 Jul 2021 - 06:01 thanks for the post. would love to hear more of you. by the way, drupal's really popular nowadays as it has easy and fast features. you agree with me? thanks.
/themes/custom/zyxpro_light/images/placeholder.png
close

on 16th January 2008 / by webmaster
Most webmasters do not realize this, but a lot of the content on lot of websites can be accessed from multiple URLs. A simple example would be where www.example.com and example.com leads to the same page. This is a fatal mistake in Search Engine Optimization and search engines penalize you for duplicate content. The correct configuration would be where the above two urls will lead you to the same page but example.com will redirect you to www.example.com with a 301 (Moved permanently) status which will not result in search engines penalizing the page. It is very easy to configure 301 redirects using Apache .htaccess file and the process is the same for a Drupal installation also. Drupal Technical Apache htaccess SEO Anonymous (not verified) access_time 31 Jul 2021 - 06:01 Hello. I'm trying to make example.com show as www.example.com, and I'm running into difficulties. I'm on Apache 2.0 and using the following lines in my httpd.conf file: RewriteEngine on RewriteCond %{HTTP_HOST} ^xxxxxxxxxx\.com$ [NC] RewriteRule ^(.*)$ http://www.xxxxxxxxxx.com/$1 [L,R=301] When I go to http://xxxxxxxxxx.com, I get http://www.xxxxxxxxxx.com (as expected). However, when I go to http://xxxxxxxxxx.com/node/1 (it's a Drupal site), I get a 404 thrown and the URL changes to xxxxxxxxxx.com/var/www/drupal/node/1. Same thing with www.xxxxxxxxxx.com/node/1. Any suggestions? I want to run without Drupal's .htaccess file (instead incorporating these calls into my httpd.conf file). webmaster access_time 31 Jul 2021 - 06:01 In reply to Rewrite including filesystem path by Anonymous (not verified) I think the problem is with the base path which results in the redirection to /var/www/ part. The best approach I would think is to start with drupal htaccess and then strip out parts and move to httpd SNVC (not verified) access_time 31 Jul 2021 - 06:01 This is definitely a good guide. Thanks for this. wellyson access_time 31 Jul 2021 - 06:01 This is really nice and helpful.
/themes/custom/zyxpro_light/images/placeholder.png
close

on 08th February 2008 / by webmaster
Attachment Size slashdotit.tar.gz 173.55 KB Similar to the StumbleThis module that we had created earlier we have created another bookmarking Drupal Technical Slashdotit Shlomi Fish (not verified) access_time 31 Jul 2021 - 06:01 Hi! I'm interested in this module, but Drupal 6.2 complains that it's incompatible with it. Can you please update it or tell me how? Regards, Shlomi Fish shlomifish.org webmaster access_time 31 Jul 2021 - 06:01 In reply to Can you update it for Drupal-6.x? by Shlomi Fish (not verified) Sure we are working on this currently and will post an update soon. Also we will post this module on www.drupal.org as well Cheers Anoop John Team Zyxware Anonymous (not verified) access_time 31 Jul 2021 - 06:01 Hello! Nice Article very interesting, thanks