html - How can I make an image carousel using HTML5, CSS and Javascript? -


when run file, can see first image doesn't change after slideinterval time.

i think problem in javascript code because html , css part of project supposed do, done. however, image doesn't change.

i bit of noob javascript please point out if obvious. beforehand!!

this code:

first javascript, css , html:

var slideinterval = 3500;    function getfigures() {      return document.getelementbyid("carousel").getelementsbytagname("figure");  }    function nextimage() {      var pointer;      //var figures = getfigures;      var figures = getfigures();      for(var = 0; < figures.length; i++){          if(figures[i].classname == "visible")              figures[i].classname = "";              pointer = i;       }        if (++pointer == figures.length) {          pointer = 0;      }        figures[pointer].classname = 'visible';      settimeout(nextimage(), slideinterval);  }    function startplayback() {          settimeout(nextimage(), slideinterval);  }    startplayback();
section#carousel > figure > img {      display: none;      margin: 0px auto;  }    section#carousel > figure.visible > img {      display: block;          position: relative;      overflow: hidden;    }    section#carousel > figure > figcaption {      display: none;  }    section#carousel > figure.visible > figcaption {  display: block;      text-align: center;    font-weight: bold;  font-size: 1.5em;  }
<!doctype html>  <html lang="en-us">      <head>          <title>contoso news</title>          <link rel="stylesheet" href="../styles/style.css" />      </head>      <body>      <section id="carousel">          <figure class="visible">              <img src="../media/efficient_cars.png" alt="efficient cars">              <figcaption>efficient cars used in future</figcaption>          </figure>          <figure>              <img src="../media/natural_disasters.png" alt="natural disasters">              <figcaption>many natural disasters thought happen more often</figcaption>          </figure>          <figure>              <img src="../media/health_records.png" alt="health records">              <figcaption>many doctors moving digital health records year</figcaption>          </figure>      </section>      <script type="text/javascript" src="../js/carousel_script.js"></script>      </body>  </html>

use can use jssor slider plugin create responsively carousels. refer https://www.jssor.com/


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more