Hi Guys,
I am looking on the internet for a gallery that shows images like this:
http://wp.alveos.nl/demos/0.3.4/nagelstudio/wp-content/themes/wpa-nagelstudio/assets/custom/img/header.png
Does anybody knows a good slider which looks a lot like this one?
Thanks
What sort of behavior does this slider do? Automatic sliding? I don’t see any next/previous buttons.
Hi Ryan,
If possible automatic sliding… so a couple of images in the header… when i MOUSE OVER… the image will show a bigger size of the current SLICE image. Doesn’t need to be 100% the same i can change it my self… but something what looks like it… or close enough would be great.
Thanks
You could do something simple in css.
http://www.pmob.co.uk/temp/slider-css-header.html
That’s just rough that I knocked up in a couple of minutes but should give the idea.
Great, from here i can move one… is it possible to make it slide? Also instead of BG image i want to show the images in HTML with img src.
Thanks!
http://wp.alveos.nl/demos/0.3.4/nagelstudio/wp-content/themes/wpa-nagelstudio/slider.html
This is what i have right now… can you help me with the RESPONSIVE problem only?
Thanks.
Could you remove those media queries you just placed in? You constantly changing the page is making it hard to work on 
.
Hi…
I have REmoved the media queries… i only need to make t responsive now… thats all
Thanks for helping!
Something like this:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Fullscreen Header Slider</title>
<meta charset="UTF-8">
<meta description="Fullscreen header">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Slider CSS -->
<link rel="stylesheet" href="http://wp.alveos.nl/demos/0.3.4/nagelstudio/wp-content/themes/wpa-nagelstudio/slider-assets/css/grid.css">
<link rel="stylesheet" href="slider-assets/css/slider.css">
<style>
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
/* Fullscreen Header */
#wpa-header {
width: 100%;
margin: 0 auto;
padding: 0;
height: 500px;
}
ul.slider {
margin:0;
padding:0;
list-style:none;
display:table;
width:100%;
border-collapse:collapse;
}
#wpa-header li {
width:16.66666%;/* 100% / 6 */
display:table-cell;
height: 500px;
overflow:hidden;
}
#wpa-header img {
object-fit: cover;
width:100%;
height:500px;
-webkit-filter: grayscale(100%);/*filter: grayscale(100%); breaks firefox */
}
#wpa-header ul:hover li {
width:10%;
}
#wpa-header ul li:hover {
width: 50%;
transition: width 1s ease;
cursor: pointer;
}
#wpa-header ul li:hover img {
-webkit-filter: grayscale(0%);
}
#wpa-header li:first-child img {
border: none;
}
#wpa-header .wpa-slide-image {
padding: 0 5px;
}
#wpa-header .wpa-border-color-light-gray {
border-left: 8px solid #CCC;
}
#wpa-header .wpa-border-color-dark-gray {
border-left: 8px solid #777;
}
#wpa-header .wpa-border-color-black {
border-left: 8px solid #000;
}
</style>
</head>
<body>
<section id="wpa-header">
<div class="col col-lg-8 col-md-8 col-sm-8 col-xs-8">
<ul class="slider">
<li><img src="http://wp.alveos.nl/demos/0.3.4/nagelstudio/wp-content/themes/wpa-nagelstudio/slider-assets/images/1-compressor.jpg" class="wpa-slide-image wpa-border-color-light-gray"></li>
<li><img src="http://wp.alveos.nl/demos/0.3.4/nagelstudio/wp-content/themes/wpa-nagelstudio/slider-assets/images/2-compressor.jpg" class="wpa-slide-image wpa-border-color-dark-gray"></li>
<li><img src="http://wp.alveos.nl/demos/0.3.4/nagelstudio/wp-content/themes/wpa-nagelstudio/slider-assets/images/3-compressor.jpg" class="wpa-slide-image wpa-border-color-black"></li>
<li><img src="http://wp.alveos.nl/demos/0.3.4/nagelstudio/wp-content/themes/wpa-nagelstudio/slider-assets/images/4-compressor.jpg" class="wpa-slide-image wpa-border-color-light-gray"></li>
<li><img src="http://wp.alveos.nl/demos/0.3.4/nagelstudio/wp-content/themes/wpa-nagelstudio/slider-assets/images/5-compressor.jpg" class="wpa-slide-image wpa-border-color-dark-gray"></li>
<li><img src="http://wp.alveos.nl/demos/0.3.4/nagelstudio/wp-content/themes/wpa-nagelstudio/slider-assets/images/6-compressor.jpg" class="wpa-slide-image wpa-border-color-black"></li>
</ul>
</div>
</section>
</body>
</html>
The filter kills firefox so I just left the webkit one in place.
You would still need some media queries just to reduce the height for smaller screens but the width is responsive.
(I think I misunderstood what you meant about slide and in any case that would leave a blank section if you simply slid them across without the others flexing also.)
takes his hat off thanks sir!!! perfect.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.