javascript - image carousel/slideshow with prev/next button -


i have follow tutorial w3school

now want improve prev / next indicators, not slider

this want achieve

example

also code

example

or

var slideindex = 1;  showdivs(slideindex);    function plusdivs(n) {    showdivs(slideindex += n);  }    function currentdiv(n) {    showdivs(slideindex = n);  }    function showdivs(n) {    var i;    var x = document.getelementsbyclassname("myslides");    var dots = document.getelementsbyclassname("demo");    if (n > x.length) {slideindex = 1}    if (n < 1) {slideindex = x.length}    (i = 0; < x.length; i++) {       x[i].style.display = "none";    }    (i = 0; < dots.length; i++) {       dots[i].classname = dots[i].classname.replace(" w3-opacity-off", "");    }    x[slideindex-1].style.display = "block";    dots[slideindex-1].classname += " w3-opacity-off";  }
#indi {    width: 200px;    float:left;  }
<body>    <div class="w3-content" style="max-width:1200px">    <img class="myslides" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">    <img class="myslides" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%">    <img class="myslides" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%">      <div class="w3-row-padding w3-section">      <div  id="indi" class="w3-col s4">        <img  class="demo w3-opacity w3-hover-opacity-off" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%" onclick="currentdiv(1)">      </div>      <div id="indi" class="w3-col s4">        <img class="demo w3-opacity w3-hover-opacity-off" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%" onclick="currentdiv(2)">      </div>      <div id="indi" class="w3-col s4">        <img  class="demo w3-opacity w3-hover-opacity-off" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%" onclick="currentdiv(3)">      </div>    </div>  </div>    </body>

thanks before, appreciated

next:

$("#next").click(function () { $("#container div:eq(" + num + ")").slideup(450); num = (num + 1) % 4; $("#container div:eq(" + num + ")").fadein(450); });

last:

$("#last").click(function () { $("#container div:eq(" + num + ")").slideup(450); num = 4; $("#container div:eq(" + num + ")").fadein(450); });

this has been asked , answered - how add buttons javascript/jquery slider?

if need more specific please don't hesitate ask though.


Comments

Post a Comment

Popular posts from this blog

Retrieving ETA (estimated time of arrival) with Google Distance Matrix API and public transit as transport mode -

Image
is possible retrieve eta google's distancematrix api (or alternative api). fyi, eta different duration, when using public transport. following example clarify request. when leave on friday @ 8.15 i'll able catch train @ 8.30 , arrive @ 9.00 am. google says duration 30 minutes. however, when leave on saturday @ 8.15 i'll able catch first train @ 9.00 , arrive @ 9.30 am. google still says duration 30 minutes, means ignore delay. google map supports functionality there api around giving me eta instead of duration. can see, distance-matrix' response no good. clarifying question little. eta estimated time of arrival , it's clear user wants know entire duration of transport (including waiting time public transport).
Read more

javascript - Confirm a form & display message if form is valid with JQuery -

i'm developing django application , use javascript in order improve website. i have form , display 2 things : confirm form before submit if form submitted, display message : 'form saved' it's first time i'm using js , need make process. this code : <form class = "form" method='post' action=''> {% csrf_token %} <br></br> {{ form.as_p}} <br></br> <button type="submit">valider</button> </form> <script> $('#form').submit(function() { var c = confirm("click ok continue?"); return c; //you can return c because true or false }); </script> and if form valid , saved : <script type="text/javascript" > $(document).on('valider', 'form.form', function(form) { var $form = $(form); $.ajax({ ...
Read more

ionic framework - Meteor - Error: Failed to execute 'insertBefore' on 'Node' -

i trying make dynamic list display using meteor, idea load more elements each time bottom of page reached. the html template following : <template name="contacts"> {{#contentfor "headertitle"}} <div class="bar bar-header bar-assertive"> <h1 class="title">contacts :</h1> </div> {{/contentfor}} {{#ionview}} {{#ioncontent}} <div class="list"> {{#each contacts}} <a class="item item-avatar" href="/contacts/{{_id}}"> <img src="/img/ico_client.png"> <h2>{{full_name}}</h2> <p>{{company}}</p> </a> {{/each}} </div> {{#if moreresults}} <div id="showmoreresults" style="margin-left: 25px;"> <span class="loading">loading...</span> </div> {{/if}} {{/ioncontent}} {{/ionview}} </te...
Read more