Slick slider

Hi I was able to complete my nav based on help I received here earlier. Now Im trying to add a slider under the nav and I found this one: http://kenwheeler.github.io/slick/

And Its based on this example on codepen:
https://codepen.io/EngCode/pen/pjrKwX

However Im struggling a bit to modify it for my project. I want to reduce this slider from full page to 1/2 page.

I have reduced the height by 50% but this produces strange results on the responsiveness.the headers called h3 and h5 disappears on zoom

Also I wanted to add a black background to the div “Slick-Navigation” but im not sure how I would go about this. I kinda want to separate the bullets points and the div from the main slider when I inspect the project with f12 the div slick-navigation is below the slider but no matter what I try I can’t get set a background here-

It would be much appreciated if someone more savvy than me could take a look.

My pen:

https://codepen.io/frederik84/full/vQvpvV/

I think I solved my first problem:

.Modern-Slider .img-fill {
  /* height: 50vh; /* Removed */
min-height: 300px;
background:#000;
min-height: 400px; /* Added */
max-height: 300px; /* Added */
display: flex !important; /* Added */
justify-content: center; /* Added */

Although I’m not sure about the numbers. This Leaves only my second problem

Neither am I. smile

min-height: 400px; /* Added */
max-height: 300px; /* Added */

How can you have a max-height that is smaller than the min-height?

hehe LOL, Im open for suggestions as you might imagine

You can write the rules that way, and the browser will deal with it. Just the same, I think this is one of those “OK when you understand how it works and there is no other way” things at best and not something that should be done often, if ever.

https://developer.mozilla.org/en-US/docs/Web/CSS/max-height

max-height overrides height , but min-height overrides max-height .

https://developer.mozilla.org/en-US/docs/Web/CSS/min-height

The element’s height is set to the value of min-height whenever min-height is larger than max-height or height .

2 Likes

Ok thanks for the info. I guess Ill stick to my guns on this one then. Also is it common to hide the next/pre arrows on media screens and tablets ?

Im tinkering around with the settings. And im unsure if I should hide bullets and arrows on media screens. So I wonder which is the norm ?
Edit: pen updated with changes.

@Mittineague

Any suggestion as how I could get the “Slick-Navigation” colored as in the original sample:

I have tried to add background color to both of these elements: Gallery-Slider and Slick-Navigation but dosnt work I even tried to add !important to the color but these messed up the entire slider…

Any ideas ?

this is working but feels wrong:

.Slick-Navigation {
background-color: #4E6D9C;
border-top: 2px solid #1E406E;;
position: relative;
height: 40px;
top: -40px;

}

Ah, I should have asked if you meant color (text) or something else. I was having trouble with my wifi connection and the font awesome wasn’t loading in (nor slick) so I couldn’t work with the color for those.

But for the BowxNj pen there is this HTML

        <div class="Slick-Navigation">
            <button class="Thumbnails"></button>
            <button class="Pause"></button>
            <button class="Play"></button>
        </div> 

And there are selectors for (see how they kind of “work the way down” to what you want to style)

.Gallery-Slider .Slick-Navigation .Play 
.Gallery-Slider .Slick-Navigation .Pause 
.Gallery-Slider .Slick-Navigation .Thumbnails 

If you comment out the background: transparent rule and add background-color, like so:

.Gallery-Slider .Slick-Navigation .Play {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #FFF;
  text-align: center;
  font: 12px FontAwesome;
  color: #FFF;
 /* background: Transparent; */
  position:relative;
  top:-2px;
  background-color: #F00; 
}

you should see something like this

Great thanks for pointing this out for me I was looking everywhere for this:) My custom slick slider is almost complete for my needs.Just a little more tweaking and I will be happy.

About post #5 I sticked to my setting for the height. and it’s like this now

Modern-Slider .Gallery-Slider .img-fill {
  /* height: 50vh; /* Removed */
background:#000;
min-height: 400px; /* Added */
max-height: 300px; /* Added */
display: flex !important; /* Added */
justify-content: center; /* Added */
}

But when I look at the media screen the slider + my nav takes around 60-70% of the screen I tried to add this to the media settings:

@media only screen and (max-width: 768px) {
  .Modern-Slider .Gallery-Slider .img-fill {
    background:#000;
    min-height: 30vw; /* Added */
    max-height: 50vw; /* Added */
  }

}

But this has now effect on the size as I think the main css above overrides these settings…
any thoughts as how I could reduce the height for the slider in mobile view ?

edit:: I guess I should have sticked to one question in one post I hope you don’t mind. It least its all related to the slick slider.

Quite often trowing random rules at something is a great way to learn how things work but unless you take the time to understand and review what is happening you can leave with the wrong impression about how things actually work :slight_smile:

The above is only true where certain conditions are met which is why it is misleading in this context. Max-height will only over-ride height if the value of height is greater than than that set for max-height. This is easier to explain in the following.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.box {
	width:300px;
	height:300px;
	background:red;
	margin:10px;
	float:left;
}
.box2 {
	max-height:400px;
	background:green
}
</style>
</head>

<body>
<div class="box">Height:300px</div>
<div class="box box2">Height:300px and max-height:400px;</div>
</body>
</html>

How tall will box2 be?

Reading from the specs you posted a lot of people will assume that it will be 400px tall. However both boxes will only be 300px tall. The max-height would only come into play if height was set greater than max-height. Therefore max-height does not always over-ride height.

On the other hand min-height will always over-ride the other 2 assuming its value is greater.

This (eventually) brings me to the main point of my post :slight_smile:

As can be seen from the explanations and demos above what you are actually saying in the above two rules is this:

height:400px;

The 2 rules you added simply equate to the element having a height of 400px so you just needed to set the height and save all the fuss. No need for min or max-height at all.

Sorry for the long winded answer but it needed some discussion. Spec writers often write too succinctly and do not explain the differences clearly enough.:slight_smile:

3 Likes

I didn’t see that rule in your codepen but I don’t see how basing the height of the element on the width of the window is going to be any use at all anyway :slight_smile:

For smaller screens you probably want the slider to be full width and tall enough to hold the content that you want displayed.

Media queries just hold CSS rules that will be applied in the normal manner of the cascade. They will only apply if certain conditions are met but if these conditions are met they are just the same as any other rules would be had they been in that place in the css.

Media queries do not exclude other css and if over-rides follow after the media query then the normal rules of the cascade apply and later rules in the stylesheet will win out if they are more specific.

2 Likes

Thanks to the both of you for answers.

obviously it goes without saying that I do not know what I do. I learn as I go:) and I have not googled what vw means maybe I should have done so. there are so many expression one could use as vw , em , px and % so I get a littles confused as to what I should use.

I have experienced that scaling gets messed up if I set a fixed height. (when I zoom in the browser) So I did like so:

 .Modern-Slider .Gallery-Slider .img-fill {
   background:#000;
   max-height: 300px; /* Added */
   display: flex !important; /* Added */
   justify-content: center; /* Added */
}

for media screen:

.Modern-Slider .Gallery-Slider .img-fill {
   height: 300px; /* Added */
}

What do you think ?

Here is an update of my pen:

I still have a lot of tweaking to do. any suggestion would be much appreciated if you see something.

No that makes no difference to zooming. Just set a fixed height as I explained and demonstrated. The fixed px height will zoom with the layout (assuming you did not select zoom text only). You would be better off using em instead of px though as that will react better to font-size changes.

Zooming when using vh (viewport height) is treated differently and the height always stays at 50% of viewport height which is why your content spills out.

Also be aware that fixed height sliders should really only hold minimal information anyway and are mainly appropriate for images with captions and short info descriptions. If you are presenting a lot of information then you may need to think about a different way of presenting the information or at least allow enough room to cater for font size increases.

Note that exorbitant zooming via the browsers controls will break 99.9% of sites at some stage. Indeed I only zoom text and not the whole layout when I want to read something so your height rules have no bearing on my use case.

Sliders can be really annoying to users so use with care and most often you want to go with the defaults that have been supplied to you because that’s how they work best. They are immensely complicated and changing values ad-hoc can have detrimental consequences unless you kn ow exactly what and why you are changing something.

Don’t get me wrong its fun to play around and learn how these things work but a lot of care needs to be taken :slight_smile:

1 Like

ok thanks for clearing it up Paul , you sure know a lot and your comments are much appreciated both here and elsewhere .

The hard part for me is to make a compelling layout with correct mixtures of colors as this is not my strong suit. I found this page http://paletton.com/#uid=33F0u0kh-tG7HNkcOBilFplpwl1 which helps but still its hard to decide. Think Ill make the site in grey scale before digging into colors…

Yes sites like that are useful to find colours that work. Once you’ve decided on a colour you should always check that it meets accessibility guidelines using a contrast checker..

I assume you are still working on it but I note that at greater than 768px there is no slider at all. Is that what you wanted? (The reason nothing shows is because it is missing the height I already mentioned ;)).

I also note you are adding media queries based on device (e.g. ipad pro) but that is a bad idea as there are now many variations of ipad all with different sizes and probably over 100 other tablets all with their own widths and resolutions.

All you really need to do is make sure your design fits the window at all sizes. You can do this by opening the desktop window and closing until its about 320px wide. If at any time during this process the layout breaks or looks bad then you throw in a media query at that size and make it work better. Don’t go overboard because usually a few well chosen media queries and fluid design will cater for all devices now and in the future.

There is of course a learning curve so you are bound to make mistakes at first but using a correct approach will mean you eventually make less and less mistakes.

I’m not sure what you mean by this? what no slider ? I do no get get such results I get the slider displayed in all zoom levels. If you mean the arrows I thought I would remove them on small screens as I assume they will be annoying on small screens… I’m not sure about the dots I guess for now I will keep them.

This is a much better approach. I will throw in a few well placed media queries.

You said earlier you had problems getting font awesome to load I also can not get it to load how did you fix it ?

You have been much helpful and really helped me complete this slider. I’m going to tweek it a little more. then maybe I’ll open another thread . Hopefully you will be there as well for further help :slight_smile:

This is what I’m seeing:

That’s a screenshot from Chrome which is the largest browser out there at the moment and the one you should be testing in. Edge also shows the same missing slider.

I guess you are checking in Firefox which has about a 5% market share and there seems to be a bug in Firefox that allows the slider to show when it shouldn’t. I already mentioned you need to change the max-height to height especially for the element called img-fill.

Also I mentioned a contrast checker in my previous email so you should test your ‘Try for Free’ button as I can;t read it at all unless I look at the source code :slight_smile: It’s more of a ‘call to inaction’ than a ‘call to action’ button :wink:

1 Like

That is very strange… I don’t know why it looks like that. It’s not like that on my computer and I’m also testing on latest version of chrome? maybe im doing something wrong in the pen, is that the pen from post #12 ?

I see what you mean. I actually forgot to upload a css file in the pen that’s why the hyperlink does not look so great. Since this topic was about the slider I didn’t bother with it as im not entirely sure which css file thats is missing

Yes the one you called example3.

I can’t comment on code that you have on your computer :slight_smile:

Maybe you missed something out so just make a new pen and we can test to see if the problem has gone away. It only takes a couple of minutes to build especially as you have done it once already. :wink:

You are right I could indeed reproduce the results on my laptop. That is quite strange when I view the Pen on my main computer it looks fine :confused:

I added height 300px and now the slider shows on my laptop but not the images, hmmmm this is quite strange. Now I have now idea whats going on . It shows fine on my main pc in chrome and firefox

Edit: New Pen:

1 Like