There is a slider here on this site that has a vertical navigation that sits on the right side, which includes the thumbnails of the previous slides and also the following slides. I would like an example to replicate this effect and I would like this example to use HTML HTML, CSS and jQuery > if possible.
Vertical slide navigation including highlight thumbnails
6
asked by anonymous 13.06.2015 / 01:32
3 answers
6
I made an implementation that the gallery will be the same size as the element it belongs to, if this element occupies the entire screen, then the gallery will occupy the entire screen:
I tried to avoid the use of animations made in javaScript, for this I used only CSS, leaving the JavaScript only with the mission to mount the CSS with the images (in this case a URL in memory) and to control the slide: p>
var Galeria = function(gallery, indice) {
var self = this;
self.indice = indice;
self.gallery = gallery;
self.container = gallery.parentNode;
self.images = [].slice.call(gallery.querySelectorAll("[data-image]"));
self.aside = document.createElement("aside");
self.cssText = "";
self.gallery.classList.add("gallery" + self.indice);
[].forEach.call(this.images, function (image, indice) {
self.buildCss(image, indice);
});
self.prevArrow = document.createElement("div");
self.prevArrow.classList.add("prev-arrow");
self.prevArrow.addEventListener("click", function () {
self.changeImage(self.thumb.prox);
});
self.proxArrow = document.createElement("div");
self.proxArrow.classList.add("prox-arrow");
self.proxArrow.addEventListener("click", function () {
self.changeImage(self.thumb.prev);
});
self.aside.appendChild(self.prevArrow);
self.aside.appendChild(self.proxArrow);
self.cssBlob = new Blob([self.cssText], { type: "text/css" });
self.cssLink = document.createElement("link");
self.cssLink.rel = "stylesheet"
self.cssLink.type = "text/css"
self.cssLink.href = URL.createObjectURL(self.cssBlob);
self.cssLink.title = "gallery" + self.indice;
document.head.appendChild(self.cssLink);
self.container.appendChild(self.aside);
window.setTimeout(function () {
console.log(document.styleSheets);
}, 1000) ;
self.thumbs = [].slice.call(self.aside.querySelectorAll("[data-thumb]"));
self.interval = null;
self.image = null;
self.thumb = {};
self.updateIndices();
}
Galeria.prototype.buildCss = function (image, indice) {
var self = this;
var classGallery = "gallery" + self.indice;
var classImage = "image" + indice;
var classThumb = "thumb" + indice;
var thumb = document.createElement("div");
self.aside.appendChild(thumb);
self.cssText += "ul." + classGallery + " li." + classImage + " {\n" +
"\tbackground: url(" + image.dataset.image + ") no-repeat center center;\n" +
"\tbackground-size: cover;\n" +
"}\n" +
"ul." + classGallery + " + aside div." + classThumb + " {\n" +
"\tbackground: url(" + image.dataset.image + ") no-repeat center center;\n" +
"\tbackground-size: cover;\n" +
"}\n";
image.dataset.image = indice;
image.classList.add(classImage);
thumb.dataset.thumb = indice;
thumb.classList.add(classThumb);
thumb.addEventListener("click", function (event) {
self.changeImage(event.target);
});
}
Galeria.prototype.changeImage = function (thumb) {
var self = this;
self.gallery.dataset.inicial = thumb.dataset.thumb;
self.updateIndices();
};
Galeria.prototype.filtro = function (colecao, prop, valor) {
return colecao.filter(function (item, indice) { return item.dataset[prop] == valor; })[0];
};
Galeria.prototype.updateIndices = function () {
var self = this;
var atual = parseInt(self.gallery.dataset.inicial);
var prev = atual >= 1 ? atual - 1 : self.thumbs.length + atual - 1;
var prev2 = atual >= 2 ? atual - 2 : self.thumbs.length + atual - 2;
var prox = atual < self.thumbs.length - 1 ? atual + 1 : atual - self.thumbs.length + 1;
var prox2 = atual < self.thumbs.length - 2 ? atual + 2 : atual - self.thumbs.length + 2;
if (self.image) {
self.image.classList.remove("atual");
self.thumb.prev2.classList.remove("prev2");
self.thumb.prev.classList.remove("prev");
self.thumb.atual.classList.remove("atual");
self.thumb.prox.classList.remove("prox");
self.thumb.prox2.classList.remove("prox2");
}
self.image = self.filtro(self.images, "image", atual);
self.thumb.prev2 = self.filtro(self.thumbs, "thumb", atual);
self.thumb.prev = self.filtro(self.thumbs, "thumb", prev);
self.thumb.atual = self.filtro(self.thumbs, "thumb", atual);
self.thumb.prox = self.filtro(self.thumbs, "thumb", prox);
self.thumb.prox2 = self.filtro(self.thumbs, "thumb", prox2);
self.image.classList.add("atual");
self.thumb.prev2.classList.add("prev2");
self.thumb.prev.classList.add("prev");
self.thumb.atual.classList.add("atual");
self.thumb.prox.classList.add("prox");
self.thumb.prox2.classList.add("prox2");
self.autoLoop();
}
Galeria.prototype.autoLoop = function () {
var self = this;
if (self.interval) {
window.clearInterval(self.interval);
}
var interval = parseInt(self.gallery.dataset.interval) * 1000;
self.interval = window.setTimeout(function () {
self.gallery.dataset.inicial = self.thumb.prox.dataset.thumb;
self.updateIndices();
}, interval);
};
var elementos = document.querySelectorAll("[data-gallery]");
var galerias = [].map.call(elementos, function (gallery, indice) {
return new Galeria(gallery, indice);
});
console.log(galerias);html, body, header, section, aside, footer, div {
box-sizing: border-box;
}
html, body {
position: absolute;
padding: 0px;
margin: 0px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
min-height: 480px;
overflow-y: auto;
}
header {
position: absolute;
top: 0px;
width: 100%;
height: 40px;
background-color: gainsboro;
box-shadow: 0px 0px 10px black;
}
section {
position: absolute;
top: 40px;
bottom: 0px;
left: 0px;
right: 0px;
}
ul[data-gallery] {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0px;
padding: 0px;
list-style-type: none;
}
ul[data-gallery] + aside {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
margin: auto 0px;
width: 64px;
height: 320px;
background-color: rgba(255, 255, 255, 0.2);
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
ul[data-gallery] + aside div {
z-index: 1;
opacity: 0;
position: absolute;
width: 64px;
height: 64px;
border-radius: 100%;
border: 5px solid rgba(0, 0, 0, 0.1);
transition-duration: 1s;
transition-property: top, opacity;
}
ul[data-gallery] + aside div.prev2 {
top: 0px;
}
ul[data-gallery] + aside div.prev {
opacity: 1;
top: 64px;
}
ul[data-gallery] + aside div.atual {
opacity: 1;
top: 128px;
}
ul[data-gallery] + aside div.prox {
opacity: 1;
top: 192px;
}
ul[data-gallery] + aside div.prox2 {
top: 256px;
}
ul[data-gallery] + aside div.prev-arrow {
background: url(http://cdn.flaticon.com/svg/66/66757.svg) no-repeat center center;
background-size: cover;
z-index: 10;
opacity: 1;
top: 0px;
}
ul[data-gallery] + aside div.prox-arrow {
background: url(http://cdn.flaticon.com/svg/66/66783.svg) no-repeat center center;
background-size: cover;
z-index: 10;
opacity: 1;
top: 256px;
}
ul[data-gallery] li {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
height: 100%;
margin: 0px;
padding: 0px;
opacity: 0;
transition-duration: 1s;
transition-property: opacity;
}
ul[data-gallery] li.atual {
opacity: 1;
}<header>
Slider
</header>
<section>
<ul data-gallery="" data-inicial="0" data-interval="5">
<li data-image="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/red-lips-kreativ-portret-copy.jpg"></li>
<li data-image="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/purple-portret-makiyazh-listya.jpg"></li>
<li data-image="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/deadfall-ryzhevolosaya-palto.jpg"></li>
<li data-image="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/devushka-model-portret-4724.jpg"></li>
<li data-image="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/portret-volosy-veter-gorod-copy.jpg"></li>
<li data-image="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/passenger-vzglyad-otrazhenie.jpg"></li>
<li data-image="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/moscow-venice-portret-volosy.jpg"></li>
<li data-image="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/devushka-vzglyad-stil-1107.jpg"></li>
<li data-image="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/devushka-model-makiyazh-1457.jpg"></li>
<li data-image="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/dark-beauty-makiyazh.jpg"></li>
</ul>
</section>If you need to have more thumbs for navigation, you can adapt the scripts so that their CSS is also automatically generated, and in case you do not have to change much.
30.11.2015 / 17:58
3
Well, I made a template that follows the same design of the site, it was very simple, I think this is the idea to make it well didactic and commenting on the code below.
obs: I used the images from the page that AP posted, so any similarity is mere copy of the site itself.
var t = {};
t.arrayGlobal = new Array();
t.sentido = 1;
t.iniSlide = function(tamanho){
$('.no_fit img').hide();
for(var i=0; i<tamanho; i++){
var obj = new Object();
if(i===0){ obj.opcao = 'thmbNext2';}
else if(i===1){ obj.opcao = 'thmbNext';}
else if(i===2){ obj.opcao = 'thmbCurrent current-slide';}
else if(i===3){ obj.opcao = 'thmbPrev';}
else if(i===4){ obj.opcao = 'thmbPrev2';}
else{ obj.opcao = ''; }
t.arrayGlobal.push(obj);
$('.slide'+i).addClass( obj.opcao );
}
t.slideAtualiza(1);
};
t.inverter=function(flag){
$('.fs_slide_thmb').removeClass('thmbNext2 thmbNext thmbPrev2 thmbPrev thmbCurrent current-slide');
var aux = new Array();
if(flag===1){ //Up na lista
for( var i=0; i<t.arrayGlobal.length; i++){
if(i + 1 == t.arrayGlobal.length){ aux.push( t.arrayGlobal[0] ); }
else{ aux.push( t.arrayGlobal[i+1] ); }
var obj = t.arrayGlobal[i];
if( obj.opcao != ''){
if(i + 1 >= t.arrayGlobal.length){
$('.slide0' ).addClass( obj.opcao );
}
else{
$('.slide'+ (i+1) ).addClass( obj.opcao );
}
}
}
}
else{ // Down na lista
for( var i=0; i<t.arrayGlobal.length; i++){
if(i - 1 < 0){ aux.push( t.arrayGlobal[t.arrayGlobal.length-1] ); }
else{ aux.push( t.arrayGlobal[i-1] ); }
var obj = t.arrayGlobal[i];
if( obj.opcao != ''){
if( i - 1 < 0 ){
$('.slide'+(t.arrayGlobal.length-1) ).addClass( obj.opcao );
}
else{
$('.slide'+ (i-1) ).addClass( obj.opcao );
}
}
}
}
t.arrayGlobal = aux;
console.log( t.arrayGlobal );
t.slideAtualiza(flag);
t.slideAtualiza(flag);
t.slideAtualiza(flag);
};
t.slideAtualiza=function(flag){
$('.no_fit img').hide();
if( t.sentido != flag){ t.sentido = flag; t.inverter(flag); }
$('.fs_slide_thmb').removeClass('thmbNext2 thmbNext thmbPrev2 thmbPrev thmbCurrent current-slide');
var aux = new Array();
if(flag===1){ //Up na lista
for( var i=0; i<t.arrayGlobal.length; i++){
if(i + 1 == t.arrayGlobal.length){ aux.push( t.arrayGlobal[0] ); }
else{ aux.push( t.arrayGlobal[i+1] ); }
var obj = t.arrayGlobal[i];
if( obj.opcao == 'thmbCurrent current-slide'){ $('.no_fit .bg'+i).show(); }
if( obj.opcao != ''){
if(i + 1 >= t.arrayGlobal.length){
$('.slide0' ).addClass( obj.opcao );
}
else{
$('.slide'+ (i+1) ).addClass( obj.opcao );
}
}
}
}
else{ // Down na lista
for( var i=0; i<t.arrayGlobal.length; i++){
if(i - 1 < 0){ aux.push( t.arrayGlobal[t.arrayGlobal.length-1] ); }
else{ aux.push( t.arrayGlobal[i-1] ); }
var obj = t.arrayGlobal[i];
if( obj.opcao == 'thmbCurrent current-slide'){ $('.no_fit .bg'+i).show(); }
if( obj.opcao != ''){
if( i - 1 < 0 ){
$('.slide'+(t.arrayGlobal.length-1) ).addClass( obj.opcao );
}
else{
$('.slide'+ (i-1) ).addClass( obj.opcao );
}
}
}
}
t.arrayGlobal = aux;
};
t.iniSlide(6); // NUMERO DE IMAGENS QUE COLOCAR NO <UL>
#div-imagem{ width: 40%; height: 30%; }
#div-controle{ float: right; }
.fs_thmb_wrapper {
border-radius: 52px;
height: 196px;
width: 52px;
}
.fs_thmb_list li img {
border-radius: 100%;
display: block;
height: 32px;
margin: 0;
transition: all 400ms ease 0s;
width: 32px;
}
.nav_button::before, .nav_button::after {
background: rgba(0, 0, 0, 0) url("http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/themes/gt3-wp-goodwin/img/goodwin_sprite.png") no-repeat scroll 0 0;
content: "";
display: block;
height: 32px;
left: 0;
position: absolute;
top: 0;
transition: opacity 300ms ease 0s;
width: 32px;
}
.nav-down::before {
background-position: -32px 0;
}
.nav-down::after {
background-position: 0 35px;
}
.nav_button {
display: block;
height: 32px;
position: relative;
width: 32px;
}
.fs_thmb_list li.thmbNext {
opacity: 1 !important;
top: 134px !important;
}
.fs_thmb_list li.thmbNext2 {
opacity: 0;
top: 196px;
transform: scale(0, 0);
}
.fs_thmb_list li.thmbCurrent {
opacity: 1 !important;
top: 72px !important;
}
.fs_thmb_list li.thmbCurrent, .fs_thmb_list li.current-slide {
left: -9px;
margin-top: -7px;
padding: 0;
}
.fs_thmb_list li.thmbPrev2 {
opacity: 0;
top: -52px;
transform: scale(0, 0);
}
.fs_thmb_list li.thmbPrev {
opacity: 1 !important;
top: 10px !important;
}
.fs_thmb_list li {
box-sizing: border-box;
cursor: pointer;
display: block;
height: 52px;
left: 0;
list-style: outside none none;
opacity: 0;
/*padding: 10px;*/
position: absolute;
top: 72px;
transition: all 300ms ease 0s;
width: 52px;
}
.fs_thmb_viewport {
display: block;
height: 196px;
margin-top: -101px;
padding: 42px 0;
position: fixed;
right: 20px;
top: 50%;
width: 52px;
z-index: 44;
}
.fs_thmb_list {
position: relative;
}
ul {
margin: 0;
padding: 0 0 20px 12px;
}
.fs_thmb_list li.thmbCurrent img, .fs_thmb_list li.current-slide img {
display: block;
height: 52px;
width: 52px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><bodystyle="background: #aaa;">
<div class="fs_gallery_wrapper fadeOnLoad" style="">
<ul class="no_fit fs_gallery_container fade">
<img src="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/headphones-405868.jpg"class="bg0">
<img src="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/Photo-2-12-15-15-37-14-copy-2.jpg"class="bg1">
<img src="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/photo-1416339134316-0e91dc9ded92-copy.jpg"class="bg2" style="background:url(http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/photo-1416339134316-0e91dc9ded92-copy.jpg) no-repeat;">
<img src="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/joshua-tree-national-park-1593.jpg"class="bg3" style="background:url(http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/joshua-tree-national-park-1593.jpg) no-repeat;">
<img src="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/photo-1416339276121-ba1dfa199912-copy.jpg"class="bg4" style="background:url(http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/photo-1416339276121-ba1dfa199912-copy.jpg) no-repeat;">
<img src="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/06/56MMSHQTR2.jpg"class="bg5" >
</ul>
</div>
<div class="fs_thmb_viewport " style="width: 72px; opacity: 1;">
<a class="fs_slider_prev nav_button nav-up" href="javascript:t.slideAtualiza(1)"></a>
<div class="fs_thmb_wrapper">
<ul style="width:560px;" class="fs_thmb_list paused">
<li data-count="0" class="fs_slide_thmb slide0 ">
<img src="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/06/56MMSHQTR2-104x104.jpg"alt=" 0">
</li>
<li data-count="1" class="fs_slide_thmb slide1 ">
<img src="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/headphones-405868-104x104.jpg"alt="Euismod Molestie 1">
</li>
<li data-count="2" class="fs_slide_thmb slide2">
<img src="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/Photo-2-12-15-15-37-14-copy-2-104x104.jpg"alt="Rhoncus Urna 2">
</li>
<li data-count="4" class="fs_slide_thmb slide3 ">
<img src="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/photo-1416339134316-0e91dc9ded92-copy-104x104.jpg"alt="Ornare Ultrices 4">
</li><li data-count="5" class="fs_slide_thmb slide4 ">
<img src="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/joshua-tree-national-park-1593-104x104.jpg"alt="Condimentum 5">
</li>
<li data-count="6" class="fs_slide_thmb slide5 ">
<img src="http://www.gt3themes.com/wordpress-themes/goodwin/wp-content/uploads/2015/01/photo-1416339276121-ba1dfa199912-copy-104x104.jpg"alt="Placerat Ornare 6">
</li>
</ul>
</div>
<a class="fs_slider_next nav_button nav-down" href="javascript:t.slideAtualiza(0)"></a>
</div>
</body>
30.11.2015 / 20:56
3
Without some code it is difficult to help you 100%. But let's go: This slider uses the same list of images for the two sliders (in the main slider there is not only the image, but that's fine). What I would do would be this: It would create div's with the size of the user's screen, place the content and create the thumbnails in absolute position. With respect to javascript and jQuery I would put a setInterval to swap the slide and the div's. For the div I would use a transform: translate and for the mini slider I would use a transform translate and scale at the same time. look at the tableless link: link Understand that you do not need href to move the div's and mini sliders.
A very simple example of what I said:
<div id="container">
<div id="slider-container">
<div id="content-1"></div>
<div id="content-2"></div>
<div id="content-3"></div>
</div>
</div>
<nav id="mini-slider-container">
<div id="arrow-up"></div>
<ul id="mini-slider">
<li id="element-1"></li>
<li id="element-2"></li>
<li id="element-3"></li>
</ul>
<div id="arrow-bottom"></div>
</nav>
Note that the div's container and the mini slider container each have another div inside them. The reason is because the container div and the nav mini-slider-container must have a fixed size, in the case of the div 100% of the screen and nav the size you want your mini slider to be. The inside div will have a size of the number of elements and spacing between them. Soon the container div and the nav mini-slider-container will have as css overflow:hidden to hide elements that exceed their limit.
Regarding javascript:
var sliderContainer= document.getElementById('slider-container'),
miniSlider = document.getElementById('mini-slider'),
arrowUp = document.getElementById('arrow-up'),
arrowBottom = document.getElementById('arrow-bottom'),
sliderY = 0,
sliderUnit = 1080,
miniSliderUnit = 100,
miniSliderY = 0,
sliderMaxSize = 1080 * 3,
miniSliderMaxSize = 150 * 3;
arrowUp.addEventListener('click', function(){
if(sliderY >= sliderUnit){
sliderY -= sliderUnit;
}
else{
sliderY = sliderMaxSize;
}
if(miniSliderY >= miniSliderUnit){
miniSliderY -= miniSliderUnit;
}
else{
miniSliderY = miniSliderMaxSize;
}
sliderContainer.style.transform = 'translateY(' + sliderY + 'px)';
miniSliderContainer.style.transform = 'translateY(' + miniSliderY + 'px)';
});
arrowBottom.addEventListener('click', function(){
if(sliderY < sliderMaxSize){
sliderY += sliderUnit;
}
else{
sliderY = 0;
}
if(miniSliderY < miniSliderMaxSize){
miniSliderY += miniSliderUnit;
}
else{
miniSliderY = 0;
}
sliderContainer.style.transform = 'translateY(' + sliderY + 'px)';
miniSliderContainer.style.transform = 'translateY(' + miniSliderY + 'px)';
});
What I did in the code above was to get the div's that will contain the elements of either will be moved to make the slider function (in this case sliderContainer and miniSlider). I got the buttons to click (arrowUp, arrowBottom). The position of each of the sliders (sliderY, miniSliderY), the sliderUnit, miniSliderUnit, and the maximum size (sliderMaxSize, miniSliderMaxSize) that can reach to be able to return the slider to the first element.
After that I used the logic I mentioned, I moved the internal div of the containers in the click events. With each click I increased or decreased the displacement unit, saved in the position of each slider and applied the transform.
I believe that this code is not totally correct, because to respond as if a slider does not even what you showed is not an easy task to do because they require several specific knowledge together. But I believe I have given you an idea how to do it.
Another tip and see if this slider fits your needs: link
16.06.2015 / 13:10