How to Create Slider using Slick Carousel?
https://www.zyxware.com/sites/default/files/styles/user_image/public/pictures/zyxlogo.png?itok=J9t-ZEoU
BY webmaster
9 months ago
Drupal
0 comments comment

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. Open Source Web Development Drupal Blogging Free Software Drupalgive Leave a reply Your email address will not be published. Required fields are marked * Sean (not verified) access_time 23 Sep 2019 - 05:58 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 23 Sep 2019 - 05:58 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 23 Sep 2019 - 05:58 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. Add new comment
/themes/custom/zyxpro_light/images/placeholder.png
more_horiz
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. Web Development Drupal SEO Drupal Planet Leave a reply Your email address will not be published. Required fields are marked * Anonymous (not verified) access_time 23 Sep 2019 - 05:58 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 23 Sep 2019 - 05:58 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 23 Sep 2019 - 05:58 This is definitely a good guide. Thanks for this. wellyson access_time 23 Sep 2019 - 05:58 This is really nice and helpful. Add new comment
/themes/custom/zyxpro_light/images/placeholder.png
close

on 07th January 2008 / by webmaster
We have volunteered to take up the maintenance of a very useful Drupal module - Search404. As of today we are the official maintainers of this very useful Drupal module. We know that this is going to be a challenge for us, being a young company and with a young team. But we do feel that it is our responsibility to give back to the Drupal community at least some part of what it has given us. Open Source Web Development Drupal Leave a reply Your email address will not be published. Required fields are marked * ian douglas (not verified) access_time 23 Sep 2019 - 05:58 I notice your updates on the Drupal modules page has some patch files, but they are patches for an older version of the 5.x branch of search404. Do you have any expectation on when a version for Drupal 6 will be ready? webmaster access_time 23 Sep 2019 - 05:58 In reply to when will search404 for drupal 6 be ready? by ian douglas (not verified) Hi Ian, We are currently working on moving Search404 to Drupal 6. The port has already been done and we should have a release up on drupal.org by tomorrow or worst case by monday. Cheers Anoop John Team Zyxware Dejan (not verified) access_time 23 Sep 2019 - 05:58 In reply to when will search404 for drupal 6 be ready? by ian douglas (not verified) I think that's been up for a while... did you check the download page? Add new comment
Leave a reply
Your email address will not be published. Required fields are marked *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.