changing elements of slick slider

[zawadil]

Hello Acorn,

XBuilder\Web-Blocks\Slider

contains some versions of slick sliders.

I found "0003 slider 1c full-1c" very useful for my purpose as I need just a single set of pictures for both, my desktop (1080p) and mobile (480p) version.

There are some elments (arrow next/previous and dots), which can be turned on (true) and off (false) within the script.
Unfortunately I found no place, where I can change the size and color of these 3 elements.

Any idea ?

Kind regards
Erwin

[Acorn]

Erwin, the dots and arrows are baked into slick.js itself, https://kenwheeler.github.io/slick/.
The are no images to replace.

The simplest way to change them would be to add CSS that alters the button class settings.

Acorn

[zawadil]

Hello Acorn !

Thank you for your quick reply, unfortunately I have no idea, how or where to add CSS.

Best regards
Erwin

Below the code of the placeholder (body)

<div class="slick726">
<div><img src="pslider/GS2000-01.jpg"></div>
<div><img src="pslider/GS2000-02.jpg"></div>
<div><img src="pslider/GS2000-03.jpg"></div>
<div><img src="pslider/GS2000-04.jpg"></div>
<div><img src="pslider/GS2000-05.jpg"></div>
<div><img src="pslider/GS2000-06.jpg"></div>
<div><img src="pslider/GS2000-07.jpg"></div>
<div><img src="pslider/GS2000-08.jpg"></div>
</div>
<script src="index_htm_files/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slick726').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
arrows: false,
dots: true,
});
});
</script>

[Acorn]

Erwin, if you drop a image with the sizes, positions and colours of what you want, I may be able to craft the CSS for you.

Acorn

[zawadil]

Acorn, I´ll send you sample files next week.

THX so far.

Erwin

[zawadil]

Hi Acorn,
if you check out

https://www.astco.com/infortrend/inf...eonstor_gs.htm

you can see, that I have already impemented 3 slick sliders with different height on this pages, which works well also in the mobile version.

I´ve used "dots = true", which activates white dots close below the slider. So far I have use a grey bar in the background to make them visible.
Unfortunately this is not really good looking and I would prefer to have just black dots.

Additionally I upload one sample of my product slick slider with the greater height.

Additionally there is another phenomena, where I cannot find an explanation.

If you compare my "sample_slick_sl.xar" with my webpage you will see, that the dots on my webpage become extremly tiny and are nearly not visible, whereas my samples shows the dots in a proper size.

Web-Properties/Export settings are the same: Scale to fit width 1080

Hopefully you have an idea, if there is another setting, which causes this effect.

THX for your assistance.

Best regards
Erwin

[Acorn]

Erwin, in XaraTemplate.com design, the styling coe is "embedded" as a HTML code (body) for the slick Placeholder.
This also attaches five other external files, slick.eot, slick.js, slick.svg, slick.tff & slick.woff.

Rather than alter these directly, it is simpler to append some CSS code that fires up after all these.

For your dots, I have added CSS into the Website Code (body):

<style>
.slick-dots li button:before {
  font-size: 24px;
  opacity: 0.7;
  color: blue;
}
.slick-dots li.slick-active button:before {
  top: -4px;
  opacity: 1;
  color: red;
  content: '⊚';
}
</style>

To change the dot size, I have added a pixel font-size of 24px.
You can change this up or down.

I made them slightly transparent as a hover makes the dot solid.
You can change my blue to black.

The slick font is a very limited set and probably should be ignored.
To show how easy this is, you can add anything as content to either of the two styles above.
I make the active dot solid red and a completely different shape that you can copy and paste into between the quotes or add as Unicode.
To keep the current dots throughout just remove the top & content statements.
You can change the red and opacity to whatever you choose.

sample_slick_sl - Acorned.xar

Acorn

[zawadil]

Acorn, THX very much works perferct.

Best regards
Erwin

P.S.:
I have some problems with "link to headings on a different page" as well as "link to anchor on a different page".
As far as I can analyse the problem the positiong on the target page adds the size of the elements, which I have on the top of my pages (logo, navigation) marked as fix (not fix to the top).
I will open a new thread for this issue. If you know a threat, where similar has been discussed, pls. give me a link to this thread.

[Acorn]

Acorn, THX very much works perferct.

Best regards
Erwin

P.S.:
I have some problems with "link to headings on a different page" as well as "link to anchor on a different page".
As far as I can analyse the problem the positiong on the target page adds the size of the elements, which I have on the top of my pages (logo, navigation) marked as fix (not fix to the top).
I will open a new thread for this issue. If you know a threat, where similar has been discussed, pls. give me a link to this thread.

Erwin, a new Thread will be good as there has been some discussion but nothing really fully determined.

People think things are not working with Page Link jumps when the problem is usually the height of the page is too short.

Acorn

[zawadil]

Acorn, just another question about the slick slider.
"Is it possible to define a link for every photo?"
THX!
Erwin