i have div has static background image, , need create slideshow of background images , text div. fade background images , caption text in , out. know of way using jquery? knowledge of javascript , jquery limited. tried use ready-made plugins backstretch, responsiveslides not understand them enough , edit them use.
here current code: http://jsfiddle.net/1zdyh3wo/
html
<div class="content bg-slider"> <div class="wrapper"> <h1 class="sectiontitle">image title 1</h1> <div class="separator white"></div> <h2 class="sectiondescription">this description of first image. wanna know more? click here.</h2> <div class="nav-wrapper"> <div class="nav-arrows prev"></div> <div class="nav-dots"> <div class="current"></div> <div class=""></div> <div class=""></div> </div> <div class="nav-arrows next"></div> </div> </div> css:
@import url(http://fonts.googleapis.com/css?family=montserrat:400,700); /* -- common -- */ body { font: 400 14px 'montserrat', helvetica, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: white; } .separator { width: 24px; height: 4px; } .separator.white { background-color: white; } .separator.black { background-color: black; } /* -- menu -- */ /* -- canvas -- */ .content { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; width: 100%; height: 100%; } .wrapper { position: absolute; right: 0; bottom: 100px; left: 0; width: 33.333333333%; margin: 0 auto; } .sectiontitle { font: 700 32px/24px 'montserrat', helvetica, sans-serif; line-height: 24px; margin-bottom: 24px; letter-spacing: 4px; } .sectiondescription { font: 400 14px/18px 'montserrat', helvetica, sans-serif; margin-top: 24px; } /* -- slider -- */ .bg-slider { background: url(../img/slides/image1.jpg) no-repeat center center fixed; background-color: red; /* demo purpose */ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* -- slider - navegation -- */ .nav-wrapper { display: inline-block; min-width: 250px; margin-top: 24px; padding: 4px; } /* -- slider - navegation arrows -- */ .nav-arrows { float: left; width: 20px; height: 20px; cursor: pointer; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border: 4px solid white; } .nav-arrows.prev { border-top: none; border-right: none; } .nav-arrows.next { border-bottom: none; border-left: none; } /* -- slider - navegation dots -- */ .nav-dots { margin: 0px 8px; float: left; } .nav-dots div{ float: left; width: 12px; height: 12px; margin: 4px 18px; cursor: pointer; border-radius: 50%; background: rgba(255,255,255,.5); } .nav-dots .current:after { float: left; width: 12px; height: 12px; content: ''; border-radius: 50%; background: white; } here visual aid, how result be:
desktop version:
mobile version:
to keep things simple:
- make "wrapper" div entire slider
- make individual "wrapper" div each individual slide
- put slider navigation outside of of individual slides (i put outside of slider altogether, that's choice based on desired positioning).
- make function transitions
here's example html structure, based on yours
<div id="slider"> <div class="content bg-slider active"> <div class="wrapper"> <h1 class="sectiontitle">image title 1</h1> <div class="separator white"></div> <h2 class="sectiondescription">this description of first image. wanna know more? click here.</h2> </div> </div> <div class="content bg-slider"> <div class="wrapper"> <h1 class="sectiontitle">image title 2</h1> <div class="separator white"></div> <h2 class="sectiondescription">this description of second image. wanna know more? click here.</h2> </div> </div> <div class="content bg-slider"> <div class="wrapper"> <h1 class="sectiontitle">image title 3</h1> <div class="separator white"></div> <h2 class="sectiondescription">this description of third image. wanna know more? click here.</h2> </div> </div> </div> here's functional javascript, comments.
$(document).ready(function(){ // hide slides, re-show first: $(".bg-slider").hide() $(".bg-slider:first-child").show(); // prev button click $(".nav-arrows.prev").click(function(){ slideprev(); }) // next button click $(".nav-arrows.next").click(function(){ slidenext(); }) // "dots" click $(".nav-dots div").click(function(){ slideto($(this).index()); }) }); // "previous" function must conclude if @ first slide function slideprev() { if ($("#slider .active").index() == 0) { slideto($("#slider .bg-slider").length - 1); } else { slideto($("#slider .active").index() - 1); } } // "next" function must conclude if @ last slide function slidenext() { if ($("#slider .active").index() == $("#slider .bg-slider").length - 1) { slideto(0); } else { slideto($("#slider .active").index() + 1); } } // slide called every slide change. makes easy change animation, or want during transition. function slideto(slide) { $("#slider .active").fadeout().removeclass("active"); $("#slider .bg-slider").eq(slide).fadein().addclass("active"); $(".nav-dots .current").removeclass("current"); $(".nav-dots div").eq(slide).addclass("current"); } finally, here's updated fiddle demonstrate: http://jsfiddle.net/1zdyh3wo/1/
