I have just updated a Drupal 8.8 site from Slick 8.x-2.0-rc4 to 8.x-2.1 and I found out that the custom Previous and Next arrows fields from the Slider Slick configuration were lost. In those fields I had the font awesome arrows defined like this:

<span class="slick-prev fa fa-arrow-circle-left"></span> 

for the previous arrow and

<span class="slick-next fa fa-arrow-circle-right"></span>

for the next arrow.

The generated code was:

<nav role="navigation" class="slick__arrow">
    <span class="slick-prev fa fa-arrow-circle-left slick-arrow" style=""></span>
    <span class="slick-next fa fa-arrow-circle-right slick-arrow" style=""></span>
</nav>

After updating to 8.x-2.1 the custom arrow fields were lost, I get empty fields when opening the settings page for the slider. When I try to save them again, it says the settings were saved but those fields are empty when opening the settings page again, and the arrows are replaced with the default buttons in the slider view.

In the recent log I don't get any error, it just says 'slick.optionset Slider has been updated.'

Comments

devarch created an issue. See original summary.

gausarts’s picture

Category: Bug report » Support request
Status: Active » Postponed (maintainer needs more info)

You are right. Unfortunately, it is another problematic issue related to this bug: #3075838: Configuration translation disallowed HTML.
Solving that particular bug makes the arrows plain text.

However you can always use CSS, if reluctant to hacking slick.html.twig, just as easily, e.g.:

.slick .slick-prev::before {
  content: '\f0a8';
  font-family: 'Font Awesome 5 Free';
}
.slick .slick-next::before {
  content: '\f0a9';
  font-family: 'Font Awesome 5 Free';
}

etc. And style it accordingly.
Let me know if you need more info.

devarch’s picture

Thanks @gausarts I understand the source of the issue. I've ended up using your suggestion in my css.

.slick .slick-prev::before {
  content: '\f0a8';
  font-family: 'Font Awesome 5 Free';
}
.slick .slick-next::before {
  content: '\f0a9';
  font-family: 'Font Awesome 5 Free';
}

Because in the previous version the definition was replaced with my custom html code, and now it's not, I also needed to cancel and hide my theme button styling like this if someone will need it:

.slick-arrow,
.slick-arrow:hover {
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  background-image: unset;
  padding: unset;
}
devarch’s picture

Status: Postponed (maintainer needs more info) » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

hockey2112’s picture

#3 was the fix for me! Thanks!