6
There is a slider here on this website that has a vertical navigation that is located on the right side, which includes the thumbnails of the previous slides and also of the following slides. I’d like a example to replicate this effect and I would like this example to be used only HTML, CSS and jQuery if possible.
6
I made an implementation that the gallery will have the same size of the element it belongs to, if this element occupies the whole screen, then the gallery will occupy the whole screen:
I tried to avoid the use of animations made in Java, for this I used only CSS, leaving Javascript only with the mission to assemble the CSS with the images (in this case a URL in memory) and control the slide:
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 there is a need to have more Thumbs for navigation, it is possible to adapt the scripts so that the CSS of the same is also generated automatically, and in case would not need to modify much.
3
Without some code it’s hard to help you 100%. But come on: This slider uses the same list of images for the two sliders (in the main slider not only has the image, but all right). What I would do is this: Create div’s with the size of the user’s screen, place the content and create the thumbnails in absolute position. Regarding javascript and jQuery in would put a setInterval to change the slide and div’s. For 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: http://tableless.com.br/css-transforms/ Understand that you don’t need href to move 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 each div’s container and mini slider each have another div inside them. The reason is because the container div and the Nav mini-slider-container must have fixed size, in the case of the 100% div of the screen and the Nav the size you want it to be your mini slider. The inside div will have a size of the number of elements and spacing between them. Soon the div container and the Nav mini-slider-container will have as css overflow:hidden to hide elements that exceed their limit.
With regard to 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 above code was to take the div’s that will contain the elements of either will be moved to make the slider function (in the case sliderContainer and miniSlider ). I took the buttons to click (arrowUp, arrowBottom ). The position that is each of the sliders (sliderY , miniSliderY), the displacement unit (sliderUnit , miniSliderUnit) and the maximum size (sliderMaxSize , miniSliderMaxSize) that you can reach in order to return the slider to the first element.
After that I used the logic I talked about, I moved the internal div of the containers in the click events. With each click I incremented 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 answer as you do a slider that neither what you showed is not an easy task to do because they require various specific knowledge together. But I believe I gave you an idea of how to do.
Another tip is to see if this slider fits your needs: http://www.idangero.us/swiper/#. Vx_6kvlvhbc
3
Well I made a model that follows the same design of the site, it was very simple I believe that this is the idea to leave it well didactic and commenting the code follows below.
Obs: I used the images from the page that AP posted, so any similarity is just a 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>
<body style="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>Browser other questions tagged javascript jquery html css slider
You are not signed in. Login or sign up in order to post.
I modified the script to help organize it and create a closure for the Gallery, now it is possible to have multiple galleries on the page.
– Tobias Mesquita