How to Create Slider using Slick Carousel?
https://www.zyxware.com/sites/default/files/styles/user_image/public/pictures/Z_ribbon.png?itok=va3zzVQA
BY webmaster
6 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

close

on 01st January 2008 / by webmaster
We have added a few new modules to our site recently. Two of these are the StumbleThis module and the DiggThis module. Drupal already had a DiggThis module available for download but there was no StumbleThis module. StumbleUpon has been a popular source of traffic for zyxware.com and we wanted users to have an option to add any of our pages to their StumbleUpon favorites. So we created our own StumbleUpon module. Normally people use stumbleupon toolbar to stumble websites. However when the toolbar is not enabled this provides an easy way to add the URL to the stumbleupon favorites. The StumbleThis button will be shown on the left of the content inline. Positioning of the StumbleThis button can be controlled by the weight option in the admin menu. By setting a negative value you can have the button displayed on top of the post while a positive value will take it to the bottom of the post.Click here to download the StumbleThis module for Drupal. The module has been tested with Drupal 5.1. Please use the comments form below if you have any questions or suggestions. Open Source Web Development Drupal Blogging Free Software Drupalgive Leave a reply Your email address will not be published. Required fields are marker * Sean (not verified) access_time 19 Jun 2019 - 12:56 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 19 Jun 2019 - 12:56 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 19 Jun 2019 - 12:56 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
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. The article is relevant only to those webservers running Apache. There are two ways in which you can issue a 301 redirect using .htaccess on an Apache Webserver. One is using a mod_alias Redirect statement and the other is using the mod_rewrite Rewrite statements. Redirect statements take paths and assign corresponding paths to be redirected to while rewrite statements take regular expression patterns and associate paths where matched urls have to be redirected to. When you install Drupal, it will automatically insert statements in the .htaccess file that will allow you to redirect www.example.com to example.com or vice versa. The only thing you have to do normally would be to uncomment the statements corresponding to your preference of accessing your domain ie with or without the www part. # If you want the site to be accessed WITH the www. only, adapt and # uncomment the following: # RewriteCond %{HTTP_HOST} ^example\.com$ [NC] # RewriteRule .* http://www.example.com/ [L,R=301] # # If you want the site to be accessed only WITHOUT the www. prefix, adapt # and uncomment the following: # RewriteCond %{HTTP_HOST} ^www\.example\.com$ [NC] # RewriteRule .* http://example.com/ [L,R=301] There is however a problem with the above redirections in that they lose the rest of the URL. Say for example if you try to access example.com/somepath and your configuration is to use the www prefix the user will be redirected to www.example.com but the somepath part will be lost. This can easily be rectified by the following small change in the Rewrite Rule # For the first option you can use the following rewrite rule # RewriteRule (.+) http://www.example.com/$1 [L,R=301] # # whereas for the second you can use the following rewrite rule # RewriteRule (.+) http://example.com/$1 [L,R=301] These modifications will ensure that the user will be redirected to the correct page with or without the www prefix and without losing on your page ranks. So make the necessary modifications and make sure that you can access the pages to your site using only one version of the URL. The above configuration of .htaccess should be used not just for Drupal websites but for all websites. If however your problem is the reverse, ie you don't have pages corresponding to the URLs that the user typed, ie if you are getting lot of 404 errors (page not found errors) and users are thrown to the default Page not found page, you can try installing the Drupal Search404 Module to search for the keywords in the URL and show relevant results to the user. You can read more about apache mod_alias and apache mod_rewrite at the apache official documentation Apache mod_rewrite and Apache mod_alias Web Development Drupal SEO Drupal Planet Leave a reply Your email address will not be published. Required fields are marker * Anonymous (not verified) access_time 19 Jun 2019 - 12:56 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 19 Jun 2019 - 12:56 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 19 Jun 2019 - 12:56 This is definitely a good guide. Thanks for this. wellyson access_time 19 Jun 2019 - 12:56 This is really nice and helpful. Add new comment
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. About Search404 Module Normally when a user types in an incorrect URL in a site the web server will issue a 404 error (page not found error) and correspondingly redirect you to a 404 error page. If there is no custom 404 page on the server the browser will show the 404 page not found error to the user. This could happen when either the user types in the URL himself or he clicks on a URL incorrectly typed in another page. Another case when such errors happen is when content is deleted or moved in a site and the search engine indices have not been updated to reflect the removal or change. The web crawlers of search engines on getting a 404 error will take out the URL from their indices. The normal web user will however be totally lost when he sees the 404 error page. This is especially true if the user came from a search result page and has no idea about the navigational structure of the site or the content organization of the site. Drupal however shows its own 404 error page and avoids showing the grotesque, default 404 page that would otherwise be shown by the browser to the end user. Even this 404 error page is only a bare page with just the information that the page cannot be found. The Search404 module intelligently does a search for the terms in the URL while still issuing a 404 error. This will ensure that the URL gets taken out from the search engine index at the same time making sure that the user is given some options in terms of navigating in the site. You can check out how this works by clicking on the following non-existant URL Drupal Modules from Zyxware. Even though the page does not exist you get what you wanted to get to. If you have any questions, issues or suggestions regarding this module you can either post them as comments to this page or post your issues at the Search404 Module at Drupal.org. Open Source Web Development Drupal Leave a reply Your email address will not be published. Required fields are marker * ian douglas (not verified) access_time 19 Jun 2019 - 12:56 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 19 Jun 2019 - 12:56 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 19 Jun 2019 - 12:56 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 marker *

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.