what trying accomplish here carousel has centered image , underneath image, in separate div outside carousel, quote displayed pertaining image centered. i'm using 'slick' carousel , carousel working fine. switch statement goes straight through default case.
js file
(function ($) { 'use strict'; $(document).ready(function () { var $idone = document.getelementbyid('1'), $idtwo = document.getelementbyid('2'), $idthree = document.getelementbyid('3'), $idfour = document.getelementbyid('4'), $idfive = document.getelementbyid('5'), $idsix = document.getelementbyid('6'), $idseven = document.getelementbyid('7'), $ideight = document.getelementbyid('8'), $idnine = document.getelementbyid('9'), idarray = [ $idone, $idtwo, $idthree, $idfour, $idfive, $idsix, $idseven, $ideight, $idnine ]; switch (idarray) { case $idone: $('#imagecaptions').html("this image one's caption"); break; case $idtwo: $('#imagecaptions').html("this image two's caption"); break; case $idthree: $('#imagecaptions').html("this image three's caption"); break; case $idfour: $('#imagecaptions').html("this image four's caption"); break; case $idfive: $('#imagecaptions').html("this image five's caption"); break; case $idsix: $('#imagecaptions').html("this image six's caption"); break; case $idseven: $('#imagecaptions').html("this image seven's caption"); break; case $ideight: $('#imagecaptions').html("this image eight's caption"); break; case $idnine: $('#imagecaptions').html("this image nine's caption"); break; default: $('#imagecaptions').html("sorry"); break; } }); })(jquery); html file
<div id="new"> <div class="center"> <div id="1"> <img src="http://placehold.it/350x300?text=1" class="img-responsive"> </div> <div id="2"> <img src="http://placehold.it/350x300?text=2" class="img-responsive"> </div> <div id="3"> <img src="http://placehold.it/350x300?text=3" class="img-responsive"> </div> <div id="4"> <img src="http://placehold.it/350x300?text=4" class="img-responsive"> </div> <div id="5"> <img src="http://placehold.it/350x300?text=5" class="img-responsive"> </div> <div id="6"> <img src="http://placehold.it/350x300?text=6" class="img-responsive"> </div> <div id="7"> <img src="http://placehold.it/350x300?text=7" class="img-responsive"> </div> <div id="8"> <img src="http://placehold.it/350x300?text=8" class="img-responsive"> </div> <div id="9"> <img src="http://placehold.it/350x300?text=9" class="img-responsive"> </div> </div> <div id="imagecaptions"> </div> </div>
i think should slick events change caption.
your switch not bad idea, if same thing achieved using array...
switch has advantage of default caption.
so, using switch within function called on afterchange, works.
$(document).ready(function () { // slick init $('.center').slick({ infinite: true, autoplay:true }); // function executed on slick "afterchange" event $('.center').on("afterchange",function(event, slick, direction){ // "slick-active" id var imageid = parseint($(".slick-active").attr("id")); //console.log( imageid ); switch ( imageid ) { case 1: $('#imagecaptions').html("this image one's caption"); break; case 2: $('#imagecaptions').html("this image two's caption"); break; case 3: $('#imagecaptions').html("this image three's caption"); break; case 4: $('#imagecaptions').html("this image four's caption"); break; case 5: $('#imagecaptions').html("this image five's caption"); break; case 6: $('#imagecaptions').html("this image six's caption"); break; case 7: $('#imagecaptions').html("this image seven's caption"); break; case 8: $('#imagecaptions').html("this image eight's caption"); break; case 9: $('#imagecaptions').html("this image nine's caption"); break; default: $('#imagecaptions').html("sorry"); break; } }); // first caption displayed on load $(".center").trigger("afterchange"); });<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> <div id="new"> <div class="center"> <div id="1"> <img src="http://placehold.it/350x300?text=1" class="img-responsive"> </div> <div id="2"> <img src="http://placehold.it/350x300?text=2" class="img-responsive"> </div> <div id="3"> <img src="http://placehold.it/350x300?text=3" class="img-responsive"> </div> <div id="4"> <img src="http://placehold.it/350x300?text=4" class="img-responsive"> </div> <div id="5"> <img src="http://placehold.it/350x300?text=5" class="img-responsive"> </div> <div id="6"> <img src="http://placehold.it/350x300?text=6" class="img-responsive"> </div> <div id="7"> <img src="http://placehold.it/350x300?text=7" class="img-responsive"> </div> <div id="8"> <img src="http://placehold.it/350x300?text=8" class="img-responsive"> </div> <div id="9"> <img src="http://placehold.it/350x300?text=9" class="img-responsive"> </div> </div> <div id="imagecaptions"> </div> </div>
Comments
Post a Comment