1. Stefan Member

    Slideshow/ carousel mouseover pause how?

    Topic geplaatst op: 04-05-2019 om 16:55

    https://codepen.io/mayurbirle/pen/ppqRoZ
    How do i edit this js to pause the slideshow when someone is hovering on the slideshow carousel ?

    <script>
    onload = start;

    function start(){
    var i = 1;
    function Move(){
    i = (i%9)+1; // 9 is the Number of image in slider
    document.getElementById('i'+i).checked = true;
    }
    setInterval(Move,3000); //change img in 3 sec
    }
    </script>
    html :
    <div class="containercarousel">


    <input type="radio" id="i1" name="images" checked/>
    <input type="radio" id="i2" name="images" />
    <input type="radio" id="i3" name="images" />
    <input type="radio" id="i4" name="images" />
    <input type="radio" id="i5" name="images" />
    <input type="radio" id="i6" name="images" />
    <input type="radio" id="i7" name="images" />
    <input type="radio" id="i8" name="images" />
    <input type="radio" id="i9" name="images" />

    <div class="slide_img" id="one">
    <img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
    <label class="prev" for="i9" type="radio"><span></span></label>
    <label class="next" for="i2" type="radio"><span></span></label>
    </div>

    <div class="slide_img" id="two">
    <img src="https://preview.ibb.co/e5OShF/cropped_800_480_111290.jpg " >
    <label class="prev" for="i1"><span></span></label>
    <label class="next" for="i3"><span></span></label>
    </div>

    <div class="slide_img" id="three">
    <img src="http://wallpaperswide.com/download/up_house-wallpaper-1280x800.jpg">
    <label class="prev" for="i2"><span></span></label>
    <label class="next" for="i4"><span></span></label>
    </div>

    <div class="slide_img" id="four">
    <img src="http://wallpaperswide.com/download/up_house-wallpaper-1280x800.jpg">
    <label class="prev" for="i3"><span></span></label>
    <label class="next" for="i5"><span></span></label>
    </div>

    <div class="slide_img" id="five">
    <img src="http://wallpaperswide.com/download/up_house-wallpaper-1280x800.jpg">
    <label class="prev" for="i4"><span></span></label>
    <label class="next" for="i6"><span></span></label>
    </div>

    <div class="slide_img" id="six">
    <img src="http://wallpaperswide.com/download/up_house-wallpaper-1280x800.jpg">
    <label class="prev" for="i5"><span></span></label>
    <label class="next" for="i7"><span></span></label>
    </div>

    <div class="slide_img" id="seven">
    <img src="http://wallpaperswide.com/download/up_house-wallpaper-1280x800.jpg">
    <label class="prev" for="i6"><span></span></label>
    <label class="next" for="i8"><span></span></label>
    </div>

    <div class="slide_img" id="eight">
    <img src="http://wallpaperswide.com/download/up_house-wallpaper-1280x800.jpg">
    <label class="prev" for="i7"><span></span></label>
    <label class="next" for="i9"><span></span></label>
    </div>

    <div class="slide_img" id="nine">
    <img src="http://wallpaperswide.com/download/up_house-wallpaper-1280x800.jpg">
    <label class="prev" for="i8"><span></span></label>
    <label class="next" for="i1"><span></span></label>
    </div>


    <div id="nav_slide">
    <label for="i1" class="dots" id="dot1"></label>
    <label for="i2" class="dots" id="dot2"></label>
    <label for="i3" class="dots" id="dot3"></label>
    <label for="i4" class="dots" id="dot4"></label>
    <label for="i5" class="dots" id="dot5"></label>
    <label for="i6" class="dots" id="dot6"></label>
    <label for="i7" class="dots" id="dot7"></label>
    <label for="i8" class="dots" id="dot8"></label>
    <label for="i9" class="dots" id="dot9"></label>


    </div>

    </div>


    thnx !!

    Reageer
  2. Er zijn nog geen reacties.