Sliders with sliding backgrounds are a great feature that adds visual appeal to websites. In this case not only does the image move but the background images also slides when the screen moves. It will not be wrong to say that old screen is replaced with new screen. Interesting? Do you also want to incorporate this in your website? Here are tips to create slier with sliding backgrounds. Also, many wordpress website designers rely on this:HTML.
Three components of slider are:
1. Container that keep everything in shape
2. Sliding container whose width is same as slider in a row
3. Individual side container
HTML: Adding Navigation
It is suggested to add links to change the slides instead of relying on scrollbar. But anchor links that link to the IDs of the individual slides is important.
Slide 0
Slide 1
Slide 2
CSS
It is important that the size of the slider and slides is the same. The code that you need to use is:
.slider {
width: 300px;
height: 500px;
overflow-x: scroll;
}
.slide {
float: left;
width: 300px;
height: 500px;
}
To float the slides leftwards will not line them up in single row as the main element of the slide is not wide enough. Therefore, it is important to have holder element. To fit three slides it must be 300 percent wide that is number of slides multiplied by 100%.
.holder {
width: 300%;
}
Each slide has unique ID as it is important to create anchor links. These links the IDs and slider jump to the slides. IDs make it possible to drop in the background picture.
#slide-0 {
background-image: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
}
#slide-1 {
background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}
#slide-2 {
background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}
If your text is in white, to make sure it is visible, fade out the photograph subtly to black at the bottom. Pseudo element is sure to work well.
.slide:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: linear-gradient(transparent, black);
}
There is an active class on the navigational links to use in CSS to indicate that slide is active. This can be handled by removing the “Active” status from the links and later adding back to the particular one that is clicked.
JavaScript
To get the perfect hide and reveal effect it is advisable to use JavaScript. On the basis of scrolling, adjust the position of the background. The numbers can be any on the basis of images that you use and the size. Here in the code below, 6 and -100 are used.
$("#slider").on("scroll", function() {
$(".slides").css({
"background-position": $(this).scrollLeft()/6-100+ "px 0"
});
});
JavaScript: Impart Structure
JavaScript is incomplete without any structure. It is possible to make everything related to slider. Also group related elements in an area, bind the events and also write specific functions.
var slider = {
el: {
slider: $("#slider"),
allSlides: $(".slide")
},
init: function() {
// manual scrolling
this.el.slider.on("scroll", function(event) {
slider.moveSlidePosition(event);
});
},
moveSlidePosition: function(event) {
// Magic Numbers
this.el.allSlides.css({
"background-position": $(event.target).scrollLeft()/6-100+ "px 0"
});
}
};
slider.init();
JavaScript: Adding Navigation
Add some elements, event and also write functions to deal with the event. In this case the scroll must be animated for 300.
var slider = {
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNav: $(".slider-nav"),
allNavButtons: $(".slider-nav > a")
},
timing: 800,
slideWidth: 300, // could measure this
init: function() {
// You can either manually scroll...
this.el.slider.on("scroll", function(event) {
slider.moveSlidePosition(event);
});
// ... or click a thing
this.el.sliderNav.on("click", "a", function(event) {
slider.handleNavClick(event, this);
});
},
moveSlidePosition: function(event) {
// Magic Numbers
this.el.allSlides.css({
"background-position": $(event.target).scrollLeft()/6-100+ "px 0"
});
},
handleNavClick: function(event, el) {
// Don't change URL to a hash, remove if you want that
event.preventDefault();
// Get "1" from "#slide-1", for example
var position = $(el).attr("href").split("-").pop();
this.el.slider.animate({
scrollLeft: position * this.slideWidth
}, this.timing);
this.changeActiveNav(el);
},
changeActiveNav: function(el) {
// Remove active from all links
this.el.allNavButtons.removeClass("active");
// Add back to the one that was pressed
$(el).addClass("active");
}
};
slider.init();
Now that you know who to make slider with sliding background, add visual appeal to your ecommerce website and get the products on display. You can even take help from ecommerce web designers to get perfect slider that works.
