Page template and slick navigation responsiveness


#1

Hi guys since my last post here I have made some great progress thanks to PaulOB. Unfortunately at this point I’m stuck (again) and some expertise would be much appreciated. :slight_smile:

I’m quite happy with my layout but I’m struggling with the slick slider from ken wheeler (http://kenwheeler.github.io/)

The slider does not scale image the way I would like . Looking around the web at other sliders I have seen it looks like the entire slider container shrinks in height and the images shrink so everything scales nicely . I’m not sure how I could get the slick slider to become responsive?

Bellow is a pen of my project:

(athe navigation is not fully responsive nor complete at this point as I balance back and forwards between the navigation, slider and content and I make changes to everything as I add more and more content)

So it this point I’m especially stuck with the slick slider trying to get it to become more responsive.

I found this code from other page that have a nice slider:And I wonder if this can makes some wonders to my slider, but when I add this in my CSS file I see no effect

.bx-wrapper img {

   max-width: 100%;

   display: block;

 }

Ill take any help as well as critique to my work :slight_smile:
Frederik


#2

You seem to be squishing/stretching the image rather than letting it maintain its aspect ratio. For modern browsers you could use object-fit like this.

.img-fill img{object-fit:cover}

The actual slider itself does seem to be responsive as it adjusts in size as you get larger or smaller.

These sliders are notoriously hard to get right and deviating from the original is often very troublesome unless you are following the settings that have been already built into the slider.


#3

Yeah I was thinking along these lines.
a look trough the slick.min.js revels 700 lines of code seams unnecessarily for my need. I think based on your reply I will drop the slick slider completely (but keep the animatemin.css) Its to much settings…

Will be a a troublesome job to build a slider from scratch as I do not know anything . I tried looking for some slider walkthrough guide and founds something over at W3 schools but did not like how they promote their own respiratory for their slider. Do you have any suggestions as to where I should start ?


#4

Ok so I scratched everything and updated the pen to reflect my changes :slight_smile:

Hopefully this might work better but this brings a lot of questions The most pressing would be that the slider “escapes” the <nav> and the main on zoom <main>

this slider is based on this sample here: https://www.w3schools.com/howto/howto_js_slideshow.asp
and I think this might be a good starting point. The overall plan is to make it work exactly as the slick slider. anyhelp to get this up and running would be great

Edit: There was alot of errors with the html markup. I fixed and cleaned it so that you could read it… But it did not fix any “real problems”

Also moving down gave me desire result. with the zoom levels
No this looks super weird when zooming all the way out


#5

Not sure what you meant by that exactly?

Looks ok to me on zoom but as I mentioned before I think you are mistaking zoom for some sort of layout viewer. Nothing can stand exorbitant zooms and something will break after a few resizes because pixels simply can’t scale uniformly and 100% widths are confined to 100%. Zoom is an aid to reading the text and not meant as a perfect site enlarger.

If you are talking about the animating captions then you can do that with css transitions and animations. If you want the slider to autorun then that will be a job for JS.

I am not back until tomorrow afternoon now so someone else can jump in or it will give you time to work in the design some more.:slight_smile:


#6

You are helpful as always Paul :slight_smile:

Since I posted this I have at least made 3 changes to the Pen. I think I´ll take a break for today as well. Gives me some time to reflect on the problems but I think I have made some good progress: cleaned up the html and css…

Ok Ill stop doing saying/doing that but you know what I mean :slight_smile: As I mentioned above I have made some changes and I think I was able to fix this. but I really hate how the image behaves when scaling down/up I really need help here. I´m not sure how this is normally done ?

I thought about using 2 img for this slider, 1 for background and one images as overlay. E.g. monitor.png on top of the background. (I made all of this in Photoshop)
but this of course complicates things. But these img might not look good on small screens no matter what. so 2 images gives better control.

Yes there should be some JS here but that is totally fine . I found this for animation which works great:
https://daneden.github.io/animate.css/

What I mean Is that I would like to add sliding effect for the different slides so the screen slides in both from right and left.
Edit: I have been able to add slide in right effect now I would need to add slide away left for the previous img… still work in progress

I´ll put in some more work gives me more time to for trial and failure ::slight_smile:

Thanks for you help :slight_smile:


#7

Ok so I have made some progress here I dont know if you have time for a quick look.

I have been working on adding (slider effect, wip) and it looks like that for the JS to work I would need to put the slider divs as:

position: absolute;

And this really messes up the page. Do you have a suggestion or how I could arrange the site while having it with an absolute positioning?

Pen:


#8

Yes most sliders use absolute positioning for their slider divs/images (the main slider container should be position relative) but the problem is that you would then need to give the slider container the same height as the slider divs otherwise it has no height because its absolute children take up no space.

It looks like you are hard coding the slider divs at 440px anyway so you could match the slider container height with a fixed height also and preserve the flow of the page.

The problem with this approach is that you are hard coding the heights and this is not good for a responsive layout as you want the height to get bigger and smaller along with the image resizing. You really need a method that caters for that. You could fake it with some adaptive media queries (change the height at certain breakpoints) but you would need to make sure your images remain at 100% height (object-fit:cover as mentioned before will retain the aspect ratio - or use background images and background-size:cover instead).

As I mentioned before sliders are complex and if you want bells and whistles then you need to go with something off the shelf rather than trying to re-invent the wheel yourself. There are many sliders/carousels about and I’m sure there’s one that fits your exact needs.

I’ll have a look tomorrow and see if I can find something better that suits your needs.:slight_smile:


#9

Hi thanks for your reply
working with this has been a real nightmare :confused:

This is what I have been trying to do. But this is where my nightmare started today. as you mention it looks like after adding position absolute the document flow behaves so strange. I have tried a lots of different settings but no matter what I can not seam to get the div “more info” I´m not quite sure how the layout should be. And its also quite annoying as I really feel like I´m close to solving this puzzle…

I´m really not married to the hard coded height :slight_smile:

Thanks I will look forward to your reply (as always )


#10

HI,

Sorry I’ve not been much help in this thread :frowning:

I’ve had a look at what you’ve got but unfortunately I can’y give you a full solution without spending a couple of days writing my own slider.

I can show you how it could be responsive but you would need to re-write the slider code so that it animates correctly because the elements are no longer absolute. When the next slide slides in the first one disappears because of the display:none in the script and should really be animated to the left and then made display:none once it finishes. This would be a job for the JS forum (I can write my own snippets but modifying existing JS is not my forte).

Anyway here is the revised code which I have put into one package so you can just copy and paste and test locally.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
	margin: 0;
	font-family: 'Lora';
	font-size: 1.1em;
	background: #d1d1d1;
	overflow: scroll;
	height: 100vh;
	min-height: 100%;
}
.noscroll {
	margin: 0;
	height: 100%;
	overflow: hidden !important;
}
a {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	text-decoration: none;
	font-size: 0.9em;
}
a:hover {
	text-decoration: none;
	color: white;
}
a:hover, a:visited, a:link, a:active {
	text-decoration: none;
	color: white;
}
ul {
	padding: 0;
	list-style: none;
}
/* http://paletton.com/#uid=70a0u0kp9qZfr-Okttws8m2vYhd*/
/* Var Colors */
:root {
 --colorW: rgba(232,232,232,1);
 --colorB: #333;
 --color-2: #1E406E;/* Darkest */
 --color-1: #335485;/* Darker */
 --color0: #4E6D9C;/* Primary */
 --color1: #7691B9;/* Lighter */
 --color2: #AABDDA;/* Lighter */
 --color3: #ECD26B;/* Complement Color */
 --color4: #ED9E6B;/* Complement Color */
 --color5: #d7512e;/* Complement Color */
}
/* Text Colors */
.txt-color0, .txt0 a, .txt00 li a, .txt0 li .txt0 li a {
	color: rgba(232,232,232,1); /* White */
}
.primary1, .txt1, .txt1 a, .txt1 li, .txt1 li a {
	color: #4E6D9C;
}
.primary2, .txt2, .txt2 a, .txt2 li, .txt2 li a {
	color: #335485; /* Darker */
}
.primary3, .txt3, .txt3 a, .txt3 li, .txt3 li a {
	color: #1E406E; /* Darkest */
}
.primary4, .txt4, .txt4 a, .txt4 li, .txt4 li a {
	color: #7691B9; /* Lighter */
}
.primary5, .txt5, .txt5 a, .txt5 li, .txt5 li a {
	color: #AABDDA; /* Lightest */
}
.complement1, .txt6, .txt6 a, .txt6 li, .txt6 li a {
	color: #ECD26B;/* Lightest */
}
.complement2, .txt7, .txt7 a, .txt7 li, .txt7 li a {
	color: #ED9E6B;/* Lightest */
}
/* Background classes*/
.bgW {
	background: rgba(232,232,232,1);
}
.bgB {
	background: #333;
}
.bg-2 {
	background: #1E406E;
}
.bg-1 {
	background: #335485;
}
.bg0 {
	background: #4E6D9C;
}
.bg1 {
	background: #7691B9;
}
.bg2 {
	background: #AABDDA;
}
.bg3 {
	background: #ECD26B;
}
.bg4 {
	background: #ED9E6B;
}
/* text classes*/
.txtW, .txtW a {
	color: rgba(232,232,232,1);
}
.txtB, .txtB a {
	color: #333;
}
.txt-2, .txt-2 a {
	color: #1E406E;
}
.txt-1, .txt-1 a {
	color: #335485;
}
.txt0, .txt0 a {
	color: #4E6D9C;
}
.txt1, .txt1 a {
	color: #7691B9;
}
.txt2, .txt2 a {
	color: #AABDDA;
}
.txt3, .txt3 a {
	color: #ECD26B;
}
.txt4, .txt4 a {
	color: #ED9E6B;
}
.txt5, .txt5 a {
	color: #cc3333;
}
/* Header1*/
.secondary-header {
	display: flex;
	height: 35px;
	top: 0;
	background: #4E6D9C;
	background:#2c3033;
}
.top-wrap {
	text-align: center;
	flex-direction: column;
	width: 80%;
	display: flex;
	height: 35px;
	margin: auto;
	max-width: 1170px;
}
.top-bar {
	display: flex;
	text-align: center;
	flex-flow: row wrap;
	height: 55px;
	align-items: center;
	line-height: 35px;
}
.top-bar a {
	font-family: "Helvetica Neue", Helvetica, Arial;
	padding-right: 5px;
	color: #6E6E74;
	font-size: 12px;
}
.top-bar li .dropdown-menu {
	display: none;
	position: absolute;
	left: 0;
	padding: 0;
	margin: 0;
	margin-top: 3px;
	text-align: left;
}
.currency {
	margin-left: 10px;
}
/* End 
   Main Header */
.header {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 70px;
	z-index: 999;
	position: relative;
	width: 100%;
	border-bottom: 3px solid #BCBCD4;
	background-color: #fafafb;
	transition: all 0.3s ease-in-out;
}
.nav-wrapper {
	text-align: center;
	flex-direction: row;
	width: 80%;
	display: flex;
	align-items: center;
	height: 70px;
	margin: auto;
	max-width: 1170px;
}
.wrap {
	max-width: 1170px;
	margin: auto;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
.main_navigation {
	display: flex;
	height: 70px;
	align-items: center;
	padding: 0 10px;
	font-size: 0.9em;
	margin-left: auto;
}
.main_navigation a {
}
.link {
	padding: 0 15px;
	height: 100%;
	line-height: 70px;
}
.header .active {
	background: #202125;
	background: linear-gradient(to bottom, #2C3033 96%, #34495e 96%, #D7512E 50%);/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.header .active a {
	color: #6E6E74;
}
.main_navigation li.active:hover {
	/* Disable hover effect on active class */
	background: #5F95AF;
	background: linear-gradient(to bottom, #2C3033 96%, #34495e 96%, #D7512E 50%);/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.main_navigation li:hover {
	background: linear-gradient(to bottom, #e6e6e6 96%, #34495e 96%, #D7512E 50%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	cursor: pointer;
	color: #7691B9;
}
.brand-container {
	position: relative;
	display: block;
	flex-direction: column;
	flex-wrap: wrap;
}
.main-logo {
	height: 100%;
	position: relative;
	display: flex;
	/* or inline-flex */
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: column;
	margin-right: 30px;
}
.main-logo h1 {
	font-family: 'Allerta', Helvetica, Arial, sans-serif;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	font-size: 22px;
	color: #cc3333;
	padding-bottom: 0px;
	margin-bottom: 0px;
	margin-top: 0px;
	font-weight: normal;
}
.main-logo .div2 {
	margin-top: 0px;
	padding-top: 0px;
	position: relative;
	font-family: 'Allerta', Helvetica, Arial, sans-serif;
	display: flex;
	flex-direction: row;
	font-size: 9px;
	color: #333;
	margin-left: 1px;
	font-style: italic;
}
.contact {
	margin-right: auto;
}
.Features {
	position: relative;
}
.signin a {
	color: #7E97BB;
}
.hamburger, .mobile-user {
	display: none;
}
.mobile-user {
	font-size: 2em;
	color: var(--color4);
}
.hamburger {
	width: 35px;
	height: 35px;
	position: relative;
	border-radius: 100%;
	border-right: 1px solid rgb(204, 51, 51, .4);
}
.hamwrap {
	position: relative;
	transform: translateY(-50%);
	top: 50%;
	height: 50%;
	width: 22px;
	margin: 0 auto;
}
.bar1, .bar2, .bar3 {
	background: var(--color0);
	margin-left: 0px;
	width: 22px;
	height: 3px;
	transition: 0.2s;
	border-radius: 4px;
}
.bar2, .bar3 {
	margin: 5px 0px;
}
.bar2 {
	transition: 0.3s;
}
.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-80px, 6px);
	transform: rotate(-45deg) translate(-5px, 6px);
	left: -10px;
}
.change .bar2 {
	position: relative;
	width: 0;
	opacity: 0;
}
.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
	transform: rotate(45deg) translate(-5px, -6px);
	left: -10px;
}
.change .bar1, .change .bar3 {
	position: relative;
	left: -1px;
}
.signup {
	display: flex;
	margin-left: auto;
}
.Signup a {
	font-size: 14px;
}
.buttonstyle2 a {
	font-size: 14px;
}
.Signup:hover {
	background-color: #335485 !important;
	box-shadow:3px 3px 0px 0px #335485, -3px -3px 0px 0px #335485, 3px -3px 0px 0px #335485, -3px 3px 0px 0px #335485;
}
.Signup .fa-user, .fa-sign-in-alt {
	font-size: 15px;
}
.buttonstyle2 {
	margin-left: 15px;
	background: rgba(78,109,156,0);
	border: 1px solid #7E97BB;
	border-radius: 5px;
	transition: 0.4s !important;
	height: 35px;
	padding-left: 15px;
	padding-right: 15px;
	color: #6155A4;
}
.buttonstyle2:Hover {
	background-color: rgba(230,230,230,1);
}
/* Ipad Pro*/
@media only screen and (max-width: 1024px) {
.nav-wrapper {
	width: 100%;
	margin-left: 0px;
	padding-left: 5px;
	padding-right: 5px;
}
}
/* mobile/tablet version*/
@media only screen and (max-width: 768px) {
.nav-wrapper {
	padding-left: 0px;
}
.main_navigation {
	padding-left: 0px;
}
.nav-wrapper {
	width: 100%;
}
.header {
	padding-left: 0px;
	padding-right: 0px;
}
.mobile-user {
	display: flex;
	margin-right: auto;
}
.link, .signup, .signin {
	display: none;
}
.main-logo {
	margin-right: auto;
}
.hamburger {
	margin-right: 10px;
	display: flex;
}
.Modern-Slider .Gallery-Slider .img-fill {
	height: 300px;/* Added */
}
.Features {
	margin-left: auto;
}
}
@media only screen and (min-width: 769px) {
.Modern-Slider .Gallery-Slider:hover .PrevArrow {
	opacity: 1 !important;
}
.Modern-Slider .Gallery-Slider:hover .NextArrow {
	opacity: 1;
}
}
.site-navigation div {
/* -webkit-transition: width 2s;
	*/
	/* transition: 2s;
	*/
}
.site-navigation div:hover {
	color: rgb(28, 121, 184);
}
/* Animated Bottom Line */
.site-navigation div:after {
	content: '';
	position: relative;
	display: block;
	width: 0;
	height: 2px;
	top: 0px;
	background: rgb(28, 121, 184);
	transition: width .5s;
}
.site-navigation div:hover::after {
	width: 100%;
 //transition: width .3s;
}
/* Overlay */
.overlay {
	/* Magic number */
	width: 100%;
	position: fixed;
	/* Stay in place */
	z-index: 9999;
	/* Sit on top */
	left: -100%;
	top:6rem;
	bottom:0;
	background-color: #f1f1f1;
	overflow-x: hidden;
	/* Disable horizontal scroll */
	transition: left 0.5s;
	overflow-y: scroll;
}
.overlayopen {
	left: 0;
}
/* Position the content inside the overlay */
.overlay-content {
	margin-top: 5px;
	/* Magic number */
	position: relative;
	width: 100%;
	/* 100% width */
	color: #1E406E;
}
/* Search Container */
.searchContainer {
	display: inline-flex;
	justify-content: Center;
	width: 96%;
	margin-left: 2%;
	margin-bottom: 10px;
	top: -6px;
	position: relative;
	flex-direction: row;
	padding: 2px 5px;
	overflow: hidden;
	background:#f4f4f4;
	background:rgba(244,244,244,.79);
	border: 1px solid #d3d3d3;
	box-shadow:0 4px 9px rgba(0,0,0,.37);
	-moz-box-shadow:0 4px 9px rgba(0,0,0,.37);
	-webkit-box-shadow:0 4px 9px rgba(0,0,0,.37);
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px
}
.cf:before, .cf:after {
	content:"";
	display:table;
}
.cf:after {
	clear:both;
}
.searchContainer input {
	background:#fefefe;
	border: none;
	font:12px/12px 'HelveticaNeue', Helvetica, Arial, sans-serif;
	margin-right: 5px;
	padding: 10px;
	width: 216px;
	box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
	-moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px
}
.searchContainer input:focus {
	outline: none;
	box-shadow:0 0 4px #0d76be inset;
	-moz-box-shadow:0 0 4px #0d76be inset;
	-webkit-box-shadow:0 0 4px #0d76be inset;
}
.searchContainer input::-webkit-input-placeholder {
 font-style: italic;
 line-height: 15px
}
.searchContainer input:-moz-placeholder {
 font-style: italic;
 line-height: 15px
}
.searchIcon {
	padding: 15 15 15 15;
	margin-right: 10px;
}
.searchBox {
	border: 0;
	padding: 0.5rem 0.5rem 0.5rem 0;
	flex: 1;
}
.searchButton {
	border-right: 1px solid var(--color4);
	background: rgb(30,64,110);
	border: none;
	color:#fff;
	cursor: pointer;
	font: 13px/13px 'HelveticaNeue', Helvetica, Arial, sans-serif;
	padding: 10px;
	width:106px;
	box-shadow: 0 0 2px #2692dd inset;
	-moz-box-shadow: 0 0 2px #2692dd inset;
	-webkit-box-shadow: 0 0 2px #2692dd inset;
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
}
/* END Search Container */
.link-container {
	display: flex;
	/* or inline-flex */
	flex-wrap: wrap;
	justify-content: Center;
}
.overlay-link {
	border: 1px solid #4E6D9C;
	width: 32%;
	height: 110px;
	font-size: 14px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	line-height: 30px;
}
.overlay-link:hover {
	background: #AABDDA;
}
.overlay-link a:hover {
	color: #1E406E;
}
.overlay-link:nth-child(1) {
	border-bottom: none;
	border-top-left-radius: 5px;
}
.overlay-link:nth-child(2) {
	border-left: none;
	border-bottom: none;
}
.overlay-link:nth-child(3) {
	border-left: none;
	border-bottom: none;
	border-top-right-radius: 5px;
}
.overlay-link:nth-child(4) {
	border-bottom-left-radius: 5px;
}
.overlay-link:nth-child(5) {
	border-left: none;
}
.overlay-link:nth-child(6) {
	border-left: none;
	border-bottom-right-radius: 5px;
}
/* The navigation links inside the overlay */
.overlay-link a {
	text-decoration: none;
	font-size: 28px !important;
	display: block;
	/* Display block instead of inline */
	font-size: 1.0em;
	letter-spacing: 1.2px;
	font-family: 'Oxygen';
}
@media screen and (min-width:769px) {
.overlayopen {
	display:none;
}
}
/* ==== Slider Style === */
* {
	box-sizing:border-box
}
/* Slideshow container */
.slideshow-container {
	position: relative;
	display: flex;
	overflow:hidden
}
.slideshow-container img {
	height: auto;
	display: block;
}
/* Hide the images by default */
.mySlides {
	flex:1 0 100%;
}
/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}
.Slick-Navigation {
	position: absolute;
	display: flex;
	flex-direction: row;
	bottom: 12px;/* must be inside slide area*/
	left: 50%;
	z-index: 1000;
	background: rgba(0,0,0,0.5);
	padding: 5px 10px 5px 10px;
	margin: 0 auto;
}
/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
	color: #f2f2f2;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	width: 100%;
	text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}
/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 12px;
	width: 12px;
	margin: 0 3px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.active, .dot:hover {
	background-color: #717171;
}
/* Fading animation */
.fade {
	animation-name: fade;
	animation-duration: 1.5s;
}
.slideInRight {
	animation: slideInRight 1.5s;
	animation-duration: 1.5s;
}
.slideOutLeft {
	animation: slideOutLeft 1.5s ;

}
@-webkit-keyframes fade {
 from {
opacity: .4
}
to {
	opacity: 1
}
}
 @keyframes fade {
 from {
opacity: .4
}
to {
	opacity: 1
}
}
/* ==== Main === */
.main {
	background: #f7f7f7;
	width: 100%;
	margin: auto;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding-bottom:80px;
}
.test {
	top: 0;
	height: 482px;
	width: 100%;
	background:#d7512e;
	background: linear-gradient(to bottom, #A5A5A5 50%, #34495e 50%, #d1d1d1 50%);/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.moreinfo {
	position: relative;
	background: #12141B;
	color:#fff;
	border-top: 5px solid #202125;
	border-bottom: 10px solid #D7512E;
	-webkit-box-shadow: 0px 2px 0px 1px #C8C8C8;
	-moz-box-shadow: 0px 2px 0px 1px #C8C8C8;
	box-shadow: 0px 2px 0px 1px #C8C8C8;
}
.main-wrapper {
	padding-top: 25px;
	max-width: 1170px;
	margin: 0 auto;
}
/* ==== Footer content === */
.footer {
	border-top: 5px solid #737370;
	background: #3c3c3b;
	background: #202125;
	padding: 10px;
	color: #fff;
	width: 100%;
	bottom: 0;
	clear: both;
	position: relative;
	margin-top: -40px;
}
.footer-wrap {
	flex-wrap: wrap;
	margin-top: 20px;
	margin-bottom: 20px;
	max-width: 1170px;
	display: flex;
	flex-direction: row;
	margin-left: auto;
	margin-right: auto;
}
.footer-col {
	display:flex;
	flex-direction: column;
	list-style: none;
	margin-top: 40px;
	border: 1px solid #FFF;
	flex: 1;
	margin-bottom: 15px;
}
.footer-col {
	flex: 0 0 285px;
}
.list {
	margin-top: 0px;
	padding-top: 0px;
}
.footer h6 {
	padding: 0px 0px 0px;
	margin: 10px 0px 10px;
	font-family: "Open Sans";
	font-size: 16px;
}
.footer-col li {
	padding: 5px 0px;
}
.footer-col li a {
	font-family: "Open Sans";
	color: #737370;
	font-size: 14px;
}
.about {
	max-width: 1170px;
	border-top: 1px solid #737370;
	border-bottom: 1px solid #737370;
	position: relative;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	padding-top: 20px;
	padding-bottom: 20px;
}
.about-col1 {
	width: 70%;
	height: 100px;
}
.about p {
	font-family: "Open Sans";
	color: #737370;
	font-size: 14px;
	max-width: 70%;
}
/* ==== END === */
</style>
</head>

<body class="bodytop">
<div class="secondary-header">
  <div class="top-wrap">
    <ul class="top-bar">
      <li><a href="">Language:</a></li>
      <li class=""><a href="">English <i class="fas fa-angle-down"></i></a></li>
      <li><a href="" class="currency">Currency:</a></li>
      <li class=""><a href="">USD <i class="fas fa-angle-down"></i></a></li>
    </ul>
  </div>
</div>
<header class="header">
  <div class="nav-wrapper">
    <div class="hamburger" id="togglebutton">
      <div class="hamwrap"> <a href="javascript:void(0);" onclick="toggle_menu()">
        <div class="bar1 bg2"></div>
        <div class="bar2 bg2"></div>
        <div class="bar3 bg2"></div>
        </a> </div>
    </div>
    <div class="main-logo"> <a href="#home">
      <h1 class="div1">Brand</h1>
      <div class="div2">Powered by imagination</div>
      </a> </div>
    <ul class="main_navigation">
      <li class="link txt0 active"><a href="#home">Home</a></li>
      <li class= "link txt0 Features">Features</li>
      <li class= "link txt0">Service</li>
      <li class= "link txt0">About</li>
      <li class= "link contact txt0">Contact</li>
      <li class= "link contact txt0">Blog</li>
      <li class="txt0 mobile-user nav-item"> <i class="fas fa-user"></i> </li>
    </ul>
  </div>
</header>
<!-- overlay -->
<div id="myNav" class="overlay">
  <div class="overlay-content">
    <div class="searchContainer cf">
      <input class="searchBox" type="search" name="search" placeholder="Search the site...">
      <button type="submit" class="searchButton">Search</button>
    </div>
    <div class="link-container">
      <div class="overlay-link"> <a><i class="fas fa-user"></i></a> Login </div>
      <div class="overlay-link"> <a><i class="fas fa-home"></i></a> Home </div>
      <div class="overlay-link"> <a><i class="fas fa-cogs"></i></a> Service </div>
      <div class="overlay-link"> <a><i class="fas fa-info-circle"></i></a> About </div>
      <div class="overlay-link"> <a><i class="fas fa-address-book"></i></a> Contact </div>
      <div class="overlay-link"> <a><i class="fas fa-star"></i></a> More </div>
    </div>
  </div>
</div>
<!-- Slideshow container -->
<div class="slideshow-container"> 
  <!-- Full-width images with number and caption text -->
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="http://i67.tinypic.com/ri66hj.png" style="width:100%">
    <div class="text">Caption Text</div>
  </div>
  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="http://i67.tinypic.com/5b34pc.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>
  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="http://i64.tinypic.com/2e0p94l.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
  <!-- Next and previous buttons --> 
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a>
  <div class="Slick-Navigation"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div>
</div>
<!-- The dots/circles -->

<div class="moreinfo">
  <h2>What's this area for -I don't know ?</h2>
</div>
<!--Wrappers-->
<main class="main">
  <div class="main-wrapper">
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
  </div>
</main>
<!-- // End wrapper -->
<footer class="footer">
  <div class="footer-wrap">
    <div class="footer-col col1">
      <h6 class="nav-title">Site Informaion1</h6>
      <ul class="list">
        <li><a href="" class="nav-link">About</a></li>
        <li><a href="" class="nav-link">Help</a></li>
        <li><a href="" class="nav-link">Map</a></li>
        <li><a href="" class="nav-link">Privacy Policy</a></li>
        <li><a href="" class="nav-link">Terms & conditions</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h6 class="nav-title">Site Information2</h6>
      <ul class="list">
        <li><a href="" class="nav-link">About</a></li>
        <li><a href="" class="nav-link">Help</a></li>
        <li><a href="" class="nav-link">Map</a></li>
        <li><a href="" class="nav-link">Privacy Policy</a></li>
        <li><a href="" class="nav-link">Terms & conditions</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h6 class="nav-title">Site Informaion3</h6>
      <ul class="list">
        <li><a href="" class="nav-link">About</a></li>
        <li><a href="" class="nav-link">Help</a></li>
        <li><a href="" class="nav-link">Map</a></li>
        <li><a href="" class="nav-link">Privacy Policy</a></li>
        <li><a href="" class="nav-link">Terms & conditions</a></li>
      </ul>
    </div>
    <div class="footer-col col4">
      <h6 class="nav-title">Site Informaion4</h6>
      <ul class="list">
        <li><a href="" class="nav-link">About</a></li>
        <li><a href="" class="nav-link">Help</a></li>
        <li><a href="" class="nav-link">Map</a></li>
        <li><a href="" class="nav-link">Privacy Policy</a></li>
        <li><a href="" class="nav-link">Terms & conditions</a></li>
      </ul>
    </div>
  </div>
  <section class="about">
    <div class="about-col1">
      <h6 class="nav-title">About us</h6>
      <p> consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>
    </div>
    <div class="about-col2">
      <h6 class="nav-title">Contact us</h6>
    </div>
  </section>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script src='https://use.fontawesome.com/releases/v5.0.6/js/all.js'></script> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>
function toggle_menu() {
  const navs = document.querySelectorAll('.site-navigation')
  var element = document.getElementById("togglebutton");
  $(".site-navigation").toggleClass("mobilenav"); 
  $(".bodytop").toggleClass("noscroll"); 
  $(".hamburger").toggleClass("hamchange"); 
  $(".nav-wrapper").toggleClass("mobile-wrap"); 
  $(".overlay").toggleClass("overlayopen"); 
  navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
  element.classList.toggle('change');

  

}

function toggleanimation(x) {
    x.classList.toggle("change");
}
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n); 
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
	  slideIndex = 1
	  } 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
	  if (slides[i].classList.contains('slideInRight')) { 
	  }
	  slides[i].classList.remove("slideInRight");
	  slides[i].classList.remove("slideOutLeft");
	  slides[i].style.display = "none"; 
	  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }


  slides[slideIndex-1].style.display = "inline-block"; 
  slides[slideIndex-2].style.display = "none"; 
  slides[slideIndex-2].classList.add("slideOutLeft");

  slides[slideIndex-1].classList.add("slideInRight");
  dots[slideIndex-1].className += " active";
}

</script>
</body>
</html>

The slick slider you originally had is supposed to be responsive and there is someone else’s demo here on codepen.

I have used BXslider in the past but that was a while ago now.


#11

I think you have been helpful. and thanks for taken your time making that little package
I have taken a break today but will resume tomorrow. Its not my intention that you should write a slider for me ::slight_smile: Much appreciated for you css update I will have a look later. As you said the JS will not work with this I will see what I can make with extensive google searching…

Was it not possible to get this to work while the slider elements is position = absolute ? I was able to make something work in JS the only problem was the flow of the page got messed up completely . To be honest I think I just have a small error somewhere. . . but I do not know CSS and html like you do…

I did not make much change to it I just added height 440 px. Other sliders I have seen typically scales the img downward and the slider also get less and less height I think. I think this is a good solution.
maybe all of the responsive stuff is done with JS ?

This one looks identical to the one from W3 School . I think the tricky part is adding the fancy sliding effect, was it drums and whistles you said :slight_smile: ?

If I where to go for fade effects I think the slider that I currently have will work perfectly especially with you suggested CSS , maybe I could for now just keep fade effect and revisit the code in a couple of months when my skill level has reached a new level.

frederik

Edit: Just tested this and this looks very nice

I think I can come up with an animation idea here.
Also I liked you H2 comment "what is this area for? " Plan is to add 3 columns here with some general information