jquery.cycle2 transition plugin with multiple captions -
I am trying to use the jquery.cycle2.js plugin to create a transitional carousel - I would like to show multiple images in this carousel at one time, as it appears in the demo, however, I would like to place my caption on each slide so that there is a caption below each picture. I am showing a caption on the screen at a time which I am doing, which I do not want Here's my code:
& lt; Div class = "cycle-slideshow" data-cycle-fx = carousel data-cycle-timeout = 1000 data-cycle-caption = "# alt-caption" data-cycle-caption-templates = "{{alt}}" data -crack-carousel-visible = 3 data-cycle-carousel-fluid = true> & Lt; Img src = 'img1.jpg' alt = 'IMG1' / & gt; & Lt; Img src = 'img2.jpg' alt = 'IMG2' / & gt; & Lt; Img src = 'im3.jpg' alt = 'IMG3' /> & Lt; Img src = 'img4.jpg' alt = 'IMG4' /> & Lt; / Div & gt; & Lt ;! - Empty element for caption - & gt; & Lt; Div id = "alt-caption" class = "center" & gt; & Lt; / Div & gt;
I understand that for this, we can not take advantage of data cycle-captions Instead, instead we need to take advantage of the data cycle-slides instead. This will allow us to use an image / text element as a slide. Here is my code:
& lt; Ul class = "cycle-slideshow" data-cycle-fx = carousel data-cycle-timeout = 1000 data cycle-slides = "li" data-cycle-carousel-visible = 3 data-cycle-carousel-fluid = true> ; & Lt; Li & gt; & Lt; Img src = 'img1.jpg' alt = 'img1' / & gt; & Lt; Div & gt; Caption 1 & lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Img src = 'img2.jpg' alt = 'img2' / & gt; & Lt; Div & gt; Caption 2 & lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Img src = 'im3.jpg' alt = 'IMG3' /> & Lt; Div & gt; Caption 3 & lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Img src = 'img4.jpg' alt = 'IMG4' /> & Lt; Div & gt; Caption 4 & lt; / Div & gt; & Lt; / Li & gt; & Lt; / Ul & gt;
Comments
Post a Comment