Hi,
I'd like to have a simple gallery using full screen slider in following way instead of going all trough md slider gui.
<ul class="slider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
Hi,
Fullscreen slider works base on a certain number of functions so HTML of Fullscreen slider is more complex than others. If you would like to use slide which has image only, just need to add background for silde.
Also, you can try to add custom block as you would like.
Hi,
Okay. I don't want to import new javascript and css so it would be nice to use exisiting javascript&css. Could show me the example of utilizing background silde in html like above then? Thank you.
Sorry,
Maybe you misunderstood. We did not mean that slide will have HTML as you mentioned as your comment #1.
To create a simple gallery with fullscreen slider, you just need create a silder containing several slides. In each slide, you add a image as background so you will have a gallery. It does not make sense to use any HTML there.
Okay. Thing is I don't want to use GUI based system cause there will be tons of pic. I found out following code from application.js file.
/* Background Slider */
if ($('.bg-slider').length && $.fn.backstretch) {
$('.bg-slider').height(windowHeight);
if ($('.bg-slider').attr('data-images')) {
var bgImages = [];
bgImages = $('.bg-slider').attr('data-images').split(',');
// Access the instance
var instance = $('.bg-slider').data('images');
// Then, you can manipulate the images array directly
$('.bg-slider').backstretch(
instance,
{
fade: 600,
duration: 4000
});
}
else {
$('.bg-slider').backstretch([
'../../common-files/images/bg/bg-6.jpg',
'../../common-files/images/bg/bg-2.jpg',
'../../common-files/images/bg/bg-3.jpg'],
{
fade: 600,
duration: 4000
});
}
}
Can you tell me how to use above code then? That way I don't have to use GUI based system.
You can view source and check header tag:
http://themes-lab.com/make-frontend/pages/homepage/index-bg-slider-fullh...